Webサイトのデザインを変更
たまにはサーバー以外の話題を。
当「稲葉サーバーデザインWebサイト」のデザインを変更しました。
具体的には、WordPressのテーマをhabakiriからLightningに変更しました。
habakiriテーマは2015年7月に導入しました。
当時、
「Bootstrapベースで、デフォルトである程度見栄えがよく、管理画面から細かく色や背景画像などを指定できるテーマ」
ということで、habakiriを選択しました。
ですが、その後ブログ記事を書いていて、いまいち文字が読みにくい、ということが気になっていました。
これはhabakiriテーマが悪いのではなく、自分で設定したページ全体の色合いや背景画像が原因でもありますし、ベースとなるフォントをカスタマイズすれば解決できそうですが、僕はフロントエンドエンジニアではないので（笑）、デザイン面であまり時間をかけたくありません。
そこで、
- デフォルトで文字が読みやすく、すっきりシンプルなデザイン。
- 管理画面でそこそこカスタマイズできる。
- ユーザー数がそこそこ多く、ネット上にコードカスタマイズの事例が多くある。
という観点で新たなテーマを探し、Lightningテーマをピックアップしました。
・Lightning – Bootstrap based Free WordPress Theme
https://lightning.nagoya/
念のため、AWS EC2で検証環境を用意して、カスタマイズをいろいろ試したうえで、本番環境に適用しました。
子テーマを作成して、コードをカスタマイズした箇所は、以下です。
- ヘッダーロゴ画像は縮小せずにそのままのサイズで表示
- ヘッダーの固定解除、高さ自動調整をオフ
- ヘッダーロゴ画像の下にキャッチフレーズを表示
- グローバルメニューの文字サイズを大きく
- コンテンツとサイドバーの間の幅を狭く
- 記事内の画像に枠線をつける
- フッターを3列から2列に
- フッターの文字サイズを小さく
- フッターのCopyrightに今年の西暦年表示を追記
- Syntax Highlighterの背景色を変更（背景が白だとコード表示部分との区切りがわかりにくいため）
- ソーシャルブックマークボタンは、VK All in One Expansion Unit プラグインのものではなく、SNS Count Cacheを使用した自前のものに変更
ソーシャルブックマークボタンについては、各ソーシャルのオフィシャルから数値を取ってくるとページ表示が遅くなるのでSNS Count Cacheを使用するようにしました。
しかし、SNS Count Cacheによる定期的なカウント数取得処理は、サーバーに継続的な負荷をかけるものなので、そのうちVK All in One Expansion Unit プラグインのものに戻すかもしれません。
カスタマイズにあたっては、Lightningオフィシャルサイトのほか、以下の記事を参考にさせていただきました。
ありがとうございました。
・WEB制作会社イエローグラスのブログ Lightning
https://yellowglasses.jp/tag/lightning
・西沢直木のIT講座 Lightningのカスタマイズ
https://www.nishi2002.com/lightning
・フリーランス航海日誌 [wordpress]タイトル下にキャッチコピーを表示させる方法
http://free.celux.jp/webdesign/wp/catch-copy-customize
・Golbitz SyntaxHighlighter Evolvedの表示をカスタマイズ
http://golbitz.com/wordpress/522
・ネットビジネスで起業したスイクンのブログ 【WordPress】全記事内の全画像に一括で枠線を付ける方法
https://yakugakusuikun.com/11578.html
Lightningテーマへの変更で、当初の目的どおりブログ記事の文字が読みやすくなったと思いますし、特に見出しまわりがシンプルながらわかりやすくなって、気に入っています。
（関連記事）
・WordPress Simple GA Rankingで記事作成日付表示を追加
https://inaba-serverdesign.jp/blog/20171002/wordpress_simple_ga_ranking_date.html
