2014年のWordPress公式テーマ、Twenty Fourteen。
レスポンシブデザインのスマホ表示がとてもみやすくて気に入っています。
PC版で見ると、黒っぽいデザインが重くて苦手だったので、プラグインを使ってPC表示とスマホ表示のテーマを別にしていましたが、今回思いきって全面カスタマイズしました。
いまさらテーマ2014？という感もありますが、カスタマイズのやり方など、WEBに手順が出揃っているのでやりたいことが簡単に実装できます。
ほかにもいろいろ、やろうと思いながらそのままにしていたことに着手できました。以下、作業のメモです。
すべて先達の方々の指示に従い行いました。ありがとうございます。他力本願ばんざい。
英文大文字表記をなしにする
これは以前より対策済みでしたが、Twenty Fourteenのカスタマイズの第一歩だと思いますので、あらためてご紹介。
WordPressテーマ 『Twenty Fourteen』の記事タイトルの英字が大文字変換されないよう修正する 代助のブログ｜代助のブログ
レフトサイドバーの幅変更
Twenty Fourteenは2カラムまたは3カラムのレイアウトで、左側に設置してあるメインサイドバーを右に移すことができません。
ですので、メインサイドバーの幅を小さくして、右側にコンテンツサイドバーを設置しました。
【Twenty Fourteen】メインコンテンツ部分の幅を広げて、プライマリーサイドバーの幅を狭くするように修正⇒style.css 変更メモ
デフォルトの状態では、メインコンテンツ部分の幅が狭かったので、僕の場合コンテンツ部分の幅を広げ、左側のサイドバーの幅を狭めるようにカスタマイズしています。
サイドバーほか、黒い部分の背景色変更
PC表示だと、黒い部分が多いので、カラーを変えてみることにしました。
【Twenty Fourteen】子テーマの色に関するカスタマイズ | WordPress College
色に関するカスタマイズはスタイルシートである style.css という書類に記載して変更していきます。親テーマのスタイルシートをインポートした場合は追記していきましょう。
更新日を表示させる
このブログ、10年以上前から続けているのですが、10年前の記事もいまだに読まれています。
時間がたっても役に立つ記事があるのは嬉しいこと。手を加えたり、情報を更新させた記事に更新日を表示できたらなあと思っていましたが、ようやくできました。
[Twenty Fourteenカスタマイズ]タイトル下に更新日付を追加する方法。
PC版投稿一覧を抜粋表示にする
Twenty Fourteen、スマホ版は抜粋表示なのですが、PC版は全文表示です。
PCで見たときも抜粋表示にしてみました。アイキャッチ設定をしていないので、そのうちしようかな。
テーマtwenty fourteenのトップページなど最近の投稿一覧が全文表示なのを短縮一覧表示にカスタマイズ
ロゴ作成
流行っているみたいなので、ロゴつくってfabiconにしてみました。多分しばらくはコロコロ変えます。
ヘッダー画像をランダム表示
CC0の画像をランダム表示させています。これとfabiconはTwenty Fourteenのカスタマイズから簡単にできたので、気まぐれにやってみました。
PageSpeed Insights対応
ページの読み込み速度の改善を図るために、Autoptimizeというプラグインを入れてみたりしましたが、Twenty Fourteenのテーマに干渉してしまうので、あまり意味がなかったかもしれません。
.htaccessを利用してのリソース圧縮も、サーバーの関係で実施できず。
点数で表示されると、ムキになって高得点がとりたくなるのですが、見習いたいサイトの読み込み速度をチェックしてみると、私のと大して変わらなかったので、「まあいいか！」と潔く見切りをつけました。
All in One SEO Pack設定
プラグインを入れるだけで満足していたAll in One SEO Packの設定をしました。
これまでまったくSEOのことを考えず、書き散らかしていましたが、ちょっと手をつけてみて、どのくらい効果があるものか試してみます。
