テーマ「Twenty Seventeen」で行ってきたカスタマイズの記事を備忘録的に書いてきましたが、記事が溜まってきましたので、まとめ記事を書きたいと思います。
新たにカスタマイズを行った場合は、この記事に対して追記していきます。
※ブログのカスタマイズをする際は、子テーマの作成・バックアップを忘れずにお願いします。
Contents
- 記事とサイドバーの幅を変更
- 記事一覧に「続きを読む（moreタグ）」を自動挿入するプラグインを導入
- トップページをサムネイル（アイキャッチ画像）付き記事一覧にする
- サムネイル（アイキャッチ画像）にカテゴリー名を重ねて表示する
- アイキャッチ画像やタイトルの表示位置を変更する
- 「投稿」と「投稿者」の表示を非表示にする
- 背景の色を好みの色に変更する
- ブログ全体を好みのフォントに変更する
- フッターの「Proudly powered by WordPress」をCopyright表示に変更する
- 「Milliard関連ページプラグイン」を使って関連記事を表示する
- 「Milliard関連ページプラグイン」をカスタマイズし、記事幅を揃える
- Web Font「Font Awesome」を使ってアイコンを表示する
- プラグイン「Breadcrumb NavXT」を使ってパンくずリストを表示する
- プラグイン「Akismet」を使って無料でスパムコメント対策
- 「カエレバ」のデザインをカスタマイズ
- Googleアドセンスを２個並べて表示（ダブルレクタングル）
- 画像だけページをGoogle検索にインデックスされないように対応
- SNSシェアボタンをプラグイン無しで設置
- サイドバーのカテゴリー一覧を親カテゴリーのみ表示する
- 最終更新日を表示する
- 目次を表示するプラグインを導入してデザインをカスタマイズ
記事とサイドバーの幅を変更
テーマ「Twenty Seventeen」の記事幅はブラウザの幅によって変化するレスポンシブデザインですが、記事本文の最大値は決まっています。サイドバーの幅は良いとして、記事本文の幅が狭いと感じたので、広げるためのカスタマイズを行いました。併せて、グローバルナビゲーションメニューの幅や余白の調整もしています。
記事一覧に「続きを読む（moreタグ）」を自動挿入するプラグインを導入
テーマ「Twenty Seventeen」で記事を作成した際、手動で「続きを読む（moreタグ）」を挿入しないと、記事が全部表示されてしまい、トップページが見にくくなってしまいます。そこで、「続きを読む（moreタグ）」を自動挿入するプラグイン「Auto Limit Posts Reloaded」を導入しました。手動で「続きを読む（moreタグ）」を挿入する一手間が無くなっただけで、記事の更新が楽になり、トップページや記事の一覧が見やすくなりました。
トップページをサムネイル（アイキャッチ画像）付き記事一覧にする
テーマ「Twenty Seventeen」でトップページを開いたとき、上のイメージ画像の様にサムネイル（アイキャッチ画像）付きの記事一覧を表示したかったので、カスタマイズしてみました。サイトにどのような記事をがあるのかがわかりやすくなりました。
サムネイル（アイキャッチ画像）にカテゴリー名を重ねて表示する
テーマ「Twenty Seventeen」でトップページを開いたとき、上のイメージ画像の様にサムネイル（アイキャッチ画像）にカテゴリー名を重ねて表示したかったので、カスタマイズしてみました。どのカテゴリーに属するページなのか一目でわかるようになりました。
アイキャッチ画像やタイトルの表示位置を変更する
テーマ「Twenty Seventeen」の投稿ページは、アイキャッチ画像のサイズを調整しないと、記事とサイドバーの上に画面横幅いっぱいにデカデカと表示されてしまいます。いちいちアイキャッチ画像のサイズを調整するのは大変なので、アイキャッチ画像やタイトルの表示位置を変更し、手間を掛けなくてもアイキャッチ画像がバランス良く表示され、すっきりと記事本文が見られるように調整しました。
「投稿」と「投稿者」の表示を非表示にする
テーマ「Twenty Seventeen」では、「投稿」と「投稿者」という文言が勝手に表示されてしまいます。これには「見出し（h2タグ）」が使用されているので、SEO的にも不要だと思います。読者にとっても邪魔だと判断し、非表示にしました。
背景の色を好みの色に変更する
テーマ「Twenty Seventeen」では、初期状態だとブログの背景が真っ白に表示されます。（設定変更で真っ黒にもできます。）シンプルな真っ白でもいいかもしれませんが、メリハリが無くて読みにくいと感じました。また、他のブログとの違いを出すためにも、背景の色を自分好みにカスタマイズしてみました。
ブログ全体を好みのフォントに変更する
テーマ「Twenty Seventeen」では、初期状態ではヒラギノ角ゴシック、メイリオ、ゴシック系の優先度でフォントが表示されます。自分好みのフォントに変更したかったので、ブログ全体のフォントを強制的に変更しました。
フッターの「Proudly powered by WordPress」をCopyright表示に変更する
フッターには初期表示で「Proudly powered by WordPress」と表示される箇所がありますが、これをCopyright表示に変更しました。
「Milliard関連ページプラグイン」を使って関連記事を表示する
「Milliard関連ページプラグイン」を使って関連記事を表示するようにしました。デザインが素敵で、おしゃれに関連記事を表示することができます。また、このプラグインはPCとスマホで表示の仕方を分けることができます。どんな画面サイズでもおしゃれに表示でき、導入方法も簡単なのでおすすめです。
「Milliard関連ページプラグイン」をカスタマイズし、記事幅を揃える
「Milliard関連ページプラグイン」について記事幅を揃えるなどのカスタマイズを行いました。これにより、さらに関連記事の見栄えが良くなりました。記事幅やフォントサイズを調整したことで、ブログタイトルも途中で切れることなく表示されるようになりました。
Web Font「Font Awesome」を使ってアイコンを表示する
Web Font「Font Awesome」を使って、グローバルナビゲーションメニューやサイドバーのタイトルにアイコンを可愛く表示してみました。プラグインを使っているので、とても簡単に表示することができます。
プラグイン「Breadcrumb NavXT」を導入し、パンくずリストを表示するように変更しました。読者がどこの位置にあるページを読んでいるのか視覚的にわかりすくなりました。パンくずリストの表示にあたっては、Web Font「Font Awesome」を使って、可愛くアイコンを表示するようにカスタマイズしました。
プラグイン「Akismet」を使って無料でスパムコメント対策
外観のカスタマイズには関係ありませんが、ブログを運営する上で、スパムコメントへの対処は絶対に必要です。そこで、プラグイン「Akismet」を使って、無料でスパムコメントの対策を行いました。
「カエレバ」のデザインをカスタマイズ
当ブログでは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介していますが、可愛いデザインにするため、カスタマイズを行いました。
Googleアドセンスを２個並べて表示（ダブルレクタングル）
記事下にGoogleアドセンスを２個並べて表示させるようにしました。見栄えも良いですし、クリック率も良いと言われています。
画像だけページをGoogle検索にインデックスされないように対応
当ブログをGoogle検索で検索してみると、画像だけの謎のページが大量にヒットすることに気が付きました。意味がないページをGoogle検索でヒットされても邪魔なだけなので、検索結果に表示されないように対応しました。
SNSシェアボタンをプラグイン無しで設置
プラグインでは好みのデザインが無く、自由にデザインをカスタマイズできなかったので、プラグイン無しでSNSのシェアボタンを設置しました。
サイドバーのカテゴリー一覧を親カテゴリーのみ表示する
サイドバーにあるカテゴリー一覧が見にくくなってきたので、親カテゴリーのみ表示することにして子カテゴリーを非表示にすることにしました。
最終更新日を表示する
Twenty Seventeenでは、初期状態で記事の投稿日が表示されるものの、最終更新日が表示されません。
読者に記事の鮮度を示すためにも、最終更新日を表示するためCSSの修正を行いました。さらに、投稿日にもアイコンを飾り付けて可愛く表示させるようにしました。
目次を表示するプラグインを導入してデザインをカスタマイズ
目次を表示するプラグイン「Table of Contents Plus」を導入し、さらに、デザインを自分の好みにカスタマイズしました。
