WordPressの達人が教える 本気でカッコよくする WordPressで人気ブログ 思いどおりのブログにカスタマイズするプロの技43

2019年8月17日

 以前、WordPressでブログを公開していたのだが、Facebookの方が手軽に投稿でき、反応もあったこともあってブログを辞めてしまった。新元号が「令和」に決まったのを機にreiwaに関するドメインでも取得してみるかとさくらのドメインで検索したところ、このサイトのドメインが空いていて取得できてしまった。
 せっかくなのでさくらのVPS(仮想専用サーバー)も契約することにし、久々にブログを再立ち上げすることにしたのだが、暫くぶりにWordPressを触ることになった。
 以前、ブログを公開していたときは、WordPressのテーマをテーマ作成ソフトであるArtisteerや書籍「本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版」に掲載されていたテーマから作成して使っていたのだが、携帯やスマートフォンに対応したレスポンシブウェブデザインに対応していなかったこととWordPressのバージョンも当時より上がって、随分使用勝手が変わっているのではないかと思われたので本屋さんで一番ポピュラーと思われる本書を購入した。

 本書の特設サイトもあり、購入者は、特典PDFもダウンロードできる。




 この本には、WordPress自体のインストール方法の記載はなく、WordPressを導入した後に行う投稿記事の作成方法やカテゴリ、パーマリンクなどのWordPressの設定、機能追加を行うおすすめプラグインなどについての解説が書かれている。
 WordPress 5.2をインストールして驚いたのが記事を書く際のエディタがClassic EditorからGutenberg(グーテンベルク)というものに変わっていたことである。ブロックという概念が導入されていて、文章を書く段落ブロックや見出しブロック、画像ブロックなど各機能に分かれたブロックを組み合わせて記事を作成するようになっている。
 従来のClassic Editorに慣れている自分にとっては、少し面食らったが、HTMLを使ったことのない人が使う場合は、Gutenbergの方が使いやすいのかもしれない。
 ちなみにClassic Editorをプラグインで導入すればGutenbergに代えて利用することができる。
 WordPressは、ブログを作成するソフトウェアである。ブログを含むホームページは、見栄えが重要になるが、その見栄えを決めているのがWordPressテーマになる。本書では、著者の方が制作されたyStandardというテーマとそのカスタマイズ方法が解説されている。白を基調としたテーマで洗練されている。

「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったテーマyStandard。表示高速化を仕込みながらカスタマイズ性に優れた無
wp-ystandard.com


 WordPressテーマの中には、有償と無償のものがあるが無償で利用できる。本ブログもこのyStandardを採用しており、色やメニューのフォントサイズなどを追加CSSでカスタマイズしている。yStandardは、親テーマと子テーマの2つ導入できるようになっており、子テーマを利用することでバージョンアップしてもカスタマイズ部分が影響されないようになっている。
 WordPressには、サイドバー、フッターには、ウィジェットと呼ばれるパーツ、例えばカテゴリ、検索、アーカイブ、カレンダーを表示させる機能があるが、yStandardには、著者情報表示、人気記事ランキングなどをウィジェットとして追加できる機能もある。
 一般にWordPressの解説書には、あるテーマを導入してそれをカスタマイズする内容になっているのが一般的だと思う。本書では、yStandardの導入について書かれているので、カスタマイズ前にyStandardを導入し、それから本書の手順に従ってプラグインやカスタマイズをしていった方が良いと思う。

 ちなみに本サイトでは、以下の追加CSSをyStandardに付加している。ブログの背景を空色にしてロゴ画像下とメニューの文字色を白にした。

.global-nav--amp a, .global-nav a {
    background-color: #52accc;
}

/* ロゴ画像下のReiwa periodの文字色を白にする。 */
.color__site-dscr {
    color: #ffffff;
}

/* メニューの文字色を白にする。 */
.color__nav-font--pc {
	color:  #ffffff;
}

/* メニューのフォントを大きくする。 */
.global-nav, .global-nav--amp {
	  background-color: #52accc;
	  font-weight: bold;
    font-size: .9em;
}

/* ウィジェットのカテゴリに表示される投稿数を改行ではなく一行で表示させる。 */
.widget_categories li a{
    display: inline;
}

 それから、ウィジェットのカテゴリに表示される投稿数を改行ではなく一行で表示させるための修正を追加した。これが無いと投稿数の前に改行されてしまい、見ずらい表示になる。この修正は、以下のページを参考にさせて頂いた。


yStandardカスタマイズ・ウィジェットカテゴリ編 左:デフォルト 右:カスタマイズ後 こんな感じに、カテゴリ名の後に投稿数が来るようにするカスタマイズ方法
indigi.work


 本書のおかげでyStandard、おすすめプラグインを導入することができた。作者様に感謝致します。