テーマ「Twenty Seventeen」で行ってきたカスタマイズの記事を備忘録的に書いてきましたが、記事が溜まってきましたので、まとめ記事を書きたいと思います。

新たにカスタマイズを行った場合は、この記事に対して追記していきます。

※ブログのカスタマイズをする際は、子テーマの作成・バックアップを忘れずにお願いします。

目次

スポンサーリンク



記事とサイドバーの幅を変更

width_customize02

テーマ「Twenty Seventeen」の記事幅はブラウザの幅によって変化するレスポンシブデザインですが、記事本文の最大値は決まっています。サイドバーの幅は良いとして、記事本文の幅が狭いと感じたので、広げるためのカスタマイズを行いました。併せて、グローバルナビゲーションメニューの幅や余白の調整もしています。

この記事を読む

 

記事一覧に「続きを読む(moreタグ)」を自動挿入するプラグインを導入

auto_limit_posts reloaded_top

テーマ「Twenty Seventeen」で記事を作成した際、手動で「続きを読む(moreタグ)」を挿入しないと、記事が全部表示されてしまい、トップページが見にくくなってしまいます。そこで、「続きを読む(moreタグ)」を自動挿入するプラグイン「Auto Limit Posts Reloaded」を導入しました。手動で「続きを読む(moreタグ)」を挿入する一手間が無くなっただけで、記事の更新が楽になり、トップページや記事の一覧が見やすくなりました。

この記事を読む

 

トップページをサムネイル(アイキャッチ画像)付き記事一覧にする

テーマ「Twenty Seventeen」でトップページを開いたとき、上のイメージ画像の様にサムネイル(アイキャッチ画像)付きの記事一覧を表示したかったので、カスタマイズしてみました。サイトにどのような記事をがあるのかがわかりやすくなりました。

この記事を読む

 

サムネイル(アイキャッチ画像)にカテゴリー名を重ねて表示する

twenty-seventeen_custmize_02

テーマ「Twenty Seventeen」でトップページを開いたとき、上のイメージ画像の様にサムネイル(アイキャッチ画像)にカテゴリー名を重ねて表示したかったので、カスタマイズしてみました。どのカテゴリーに属するページなのか一目でわかるようになりました。

この記事を読む

 

アイキャッチ画像やタイトルの表示位置を変更する

twenty-seventeen_custmize_03

テーマ「Twenty Seventeen」の投稿ページは、アイキャッチ画像のサイズを調整しないと、記事とサイドバーの上に画面横幅いっぱいにデカデカと表示されてしまいます。いちいちアイキャッチ画像のサイズを調整するのは大変なので、アイキャッチ画像やタイトルの表示位置を変更し、手間を掛けなくてもアイキャッチ画像がバランス良く表示され、すっきりと記事本文が見られるように調整しました。

この記事を読む

 

「投稿」と「投稿者」の表示を非表示にする

post_not_represented_top

テーマ「Twenty Seventeen」では、「投稿」と「投稿者」という文言が勝手に表示されてしまいます。これには「見出し(h2タグ)」が使用されているので、SEO的にも不要だと思います。読者にとっても邪魔だと判断し、非表示にしました。

この記事を読む

 

背景の色を好みの色に変更する

color_customize_top

テーマ「Twenty Seventeen」では、初期状態だとブログの背景が真っ白に表示されます。(設定変更で真っ黒にもできます。)シンプルな真っ白でもいいかもしれませんが、メリハリが無くて読みにくいと感じました。また、他のブログとの違いを出すためにも、背景の色を自分好みにカスタマイズしてみました。

この記事を読む

 

ブログ全体を好みのフォントに変更する

font_custmize_top

テーマ「Twenty Seventeen」では、初期状態ではヒラギノ角ゴシック、メイリオ、ゴシック系の優先度でフォントが表示されます。自分好みのフォントに変更したかったので、ブログ全体のフォントを強制的に変更しました。

この記事を読む

 

フッターの「Proudly powered by WordPress」をCopyright表示に変更する

footer_copyright_top

フッターには初期表示で「Proudly powered by WordPress」と表示される箇所がありますが、これをCopyright表示に変更しました。

この記事を読む

 

「Milliard関連ページプラグイン」を使って関連記事を表示する

Milliard-plugin-04

「Milliard関連ページプラグイン」を使って関連記事を表示するようにしました。デザインが素敵で、おしゃれに関連記事を表示することができます。また、このプラグインはPCとスマホで表示の仕方を分けることができます。どんな画面サイズでもおしゃれに表示でき、導入方法も簡単なのでおすすめです。

この記事を読む

 

「Milliard関連ページプラグイン」をカスタマイズし、記事幅を揃える

milliard-customize-02

「Milliard関連ページプラグイン」について記事幅を揃えるなどのカスタマイズを行いました。これにより、さらに関連記事の見栄えが良くなりました。記事幅やフォントサイズを調整したことで、ブログタイトルも途中で切れることなく表示されるようになりました。

この記事を読む

 

Web Font「Font Awesome」を使ってアイコンを表示する

wordpress-アイキャッチ画像

Web Font「Font Awesome」を使って、グローバルナビゲーションメニューやサイドバーのタイトルにアイコンを可愛く表示してみました。プラグインを使っているので、とても簡単に表示することができます。

この記事を読む

 

プラグイン「Breadcrumb NavXT」を使ってパンくずリストを表示する

Breadcrumb-NavXT _set_11

プラグイン「Breadcrumb NavXT」を導入し、パンくずリストを表示するように変更しました。読者がどこの位置にあるページを読んでいるのか視覚的にわかりすくなりました。パンくずリストの表示にあたっては、Web Font「Font Awesome」を使って、可愛くアイコンを表示するようにカスタマイズしました。

この記事を読む

 

プラグイン「Akismet」を使って無料でスパムコメント対策

anti-spam_top

外観のカスタマイズには関係ありませんが、ブログを運営する上で、スパムコメントへの対処は絶対に必要です。そこで、プラグイン「Akismet」を使って、無料でスパムコメントの対策を行いました。

この記事を読む

 

「カエレバ」のデザインをカスタマイズ

kaereba_image_01
当ブログでは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介していますが、可愛いデザインにするため、カスタマイズを行いました。

この記事を読む

 

Googleアドセンスを2個並べて表示(ダブルレクタングル)

double_rectangle01
記事下にGoogleアドセンスを2個並べて表示させるようにしました。見栄えも良いですし、クリック率も良いと言われています。

この記事を読む

 

画像だけページをGoogle検索にインデックスされないように対応


当ブログをGoogle検索で検索してみると、画像だけの謎のページが大量にヒットすることに気が付きました。意味がないページをGoogle検索でヒットされても邪魔なだけなので、検索結果に表示されないように対応しました。

この記事を読む

 

SNSシェアボタンをプラグイン無しで設置


プラグインでは好みのデザインが無く、自由にデザインをカスタマイズできなかったので、プラグイン無しでSNSのシェアボタンを設置しました。

この記事を読む

 

サイドバーのカテゴリー一覧を親カテゴリーのみ表示する


サイドバーにあるカテゴリー一覧が見にくくなってきたので、親カテゴリーのみ表示することにして子カテゴリーを非表示にすることにしました。

この記事を読む

 

最終更新日を表示する


Twenty Seventeenでは、初期状態で記事の投稿日が表示されるものの、最終更新日が表示されません。
読者に記事の鮮度を示すためにも、最終更新日を表示するためCSSの修正を行いました。さらに、投稿日にもアイコンを飾り付けて可愛く表示させるようにしました。

この記事を読む

 

目次を表示するプラグインを導入してデザインをカスタマイズ


目次を表示するプラグイン「Table of Contents Plus」を導入し、さらに、デザインを自分の好みにカスタマイズしました。

この記事を読む

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です