ブログのテンプレートを変更した話。

レンタルサーバに移行して独自ドメインでブログを運用し始めてから数年経ち、急にデータが消失したりした時もあったのですが、その際に復旧させることを優先して取り急ぎWordpressの公式テーマをそのまま使ったりしていて放置してしまっていましたので、ここでテーマを変更しました。

基本となるテーマはシンプルなものを。

変更後の新しいブログのデザインはテーマそのままのレイアウトですのでお分かりになる方も多いと思いますが、「Lightning」というテーマを使いました。色々と物色して探したりもしていたのですが、結局シンプルなのが一番見やすくて運用側もカスタマイズしやすいのではと思い、チョイスしました。

Lightning – 無料で使える超高機能WordPressテーマ
https://lightning.nagoya/ja/

ちなみに今回のWebページのスクリーンショットについては、Chromeの拡張機能「Full Page Screen Capture」を使っています。Webページを保存しようとしたりPDFで保存しようとしたりしても見た目通りに保存できないことが多いですが、このプラグインだとスクロールで見えない部分も含めてキャプチャしてくれるので便利です。

基本構造はそのままでプラグインを活用。

テーマのデザインや構造、機能はそのまま活用しました。今までカテゴリーやメニュー構造も全く考えずに記事をとりあえず書くみたいな感じで続けていたので、ここで少しだけ整理してみることにしました。

子テーマを作ってそちらでカスタマイズするのはWordpressの定石とも言われていて、通常は自分で子テーマ用のstyle.cssやfunctions.phpなどを作成してアップロードしますが、Lightningでは公式サイトで子テーマ用のファイルを予め配布してくれているのも面倒くさがりの私にとってはありがたかったです(笑)。

子テーマでのカスタマイズ | 設定ガイド | Lightning – シンプルでカスタマイズしやすいWordPress.org登録無料テーマ –
https://lightning.nagoya/ja/setting/customize/child_theme

Lightningのデザインはそのままにプラグインでそれらしくカスタマイズすることにしました。CSSを思い出しながらカスタマイズするのも悪くはなかったのですが、近い未来でデザインを変更したくなっても、カスタマイズしすぎていると自分で分からなくなってしまうからです(笑)。所詮個人ブログなので仕様書とかマニュアルとか残すつもりもありませんし。
インストールしたプラグインは「ExUnit | VK All in One Expansion Unit」です。Lightning専用ともいうべきプラグインで、インストールを推奨されています。

ExUnit | VK All in One Expansion Unit
https://ex-unit.nagoya/ja/

CSSのカスタマイズは最小限に。

CSSのカスタマイズは最小限に留めておきました。主に表示される画像へのカスタマイズがほとんどで、レイアウト系は変更していません。

複数カテゴリーを投稿エントリーに表示させる

他のサイトでカスタマイズされている方々の情報を色々と組み合わせながら、子テーマのstyle.cssの中に以下を追記しました。

/* カテゴリーを複数出す対応のための修正 */
.entry-meta_items_term {
    float:none;
    margin-right:3px;
}
 
@media screen and (max-width: 767px) {
.entry-meta .entry-meta_items_term {
    display: unset;
}

この追記を行う前までは複数カテゴリーを投稿記事に割り当てていても1つしか表示されなかったのですが、これで複数表示可能になりました。

投稿記事の画像の表示をカスタマイズ

基本的に画像ありきの記事を投稿しているのですが、Flickrからプラグイン経由で貼り付けた画像の角を丸くしたり、ドロップシャドウやフェードインさせるCSSを追加しました。

/*ブログ投稿の写真画像に関するCSS(角丸・ドロップシャドウ・フェードイン)*/
.aligncenter {
    border-radius:10px !important;
    box-shadow:0px 0px 5px 3px #cccccc !important;
    margin-top: 20px;
    animation-name: fadein;
    animation-duration: 2s;
    /*animation-iteration-count: infinite;*/
    animation-iteration-count: 1;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

これもChromeのデベロッパー ツールでid属性やclass属性の名前を探しながら、CSSを追記して試しています。このCSSで掲載する画像の角が半径10ピクセルの1/4円で丸くなり、グレーの影が付いて、なおかつ画面読み込み時に下方向からフェードインしてくるように見えます。

プラグインのPR Block部分もカスタマイズ

プラグインで表示させているPR Block部分の画像表示も投稿記事同様に角を丸くしたりするエフェクトを追加しました。

/*PR Blick部分の画像に関するCSS*/
.prBlock .prBlock_image {
    width:100% !important;
    max-width:400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:auto !important;
    border-radius:5% !important;
    box-shadow:0px 0px 5px 3px #cccccc !important;
    margin-bottom:20px;
}

テンプレートのテスト運用はプラグイン「WP Theme Test」で。

今までこういったプラグインがあることも知らず、本番環境しか持っていなかった私はテーマの変更やCSSのカスタマイズをしませんでした。変更を間違えてしまうと、最悪システム自体が壊れてしまったり、レイアウトが崩れた状態で公開しないといけなくなったりするからです。
ですが、探してみるとあるものですね。

WP Theme Test – WordPress プラグイン | WordPress.org
https://ja.wordpress.org/plugins/wp-theme-test/

現行のテーマはそのままに特定のユーザーだけがWP Theme Testで設定したテーマが適用されるように設定できます。私はこちらでLightningの子テーマを管理者のみに適用してバッグラウンドでテーマをカスタマイズしていました。

Googleの設定もExUnitで簡単に。

GoogleアナリティクスもGoogle AdSenseも、通常は設定の敷居が高いのですが、こちらもExUnitの設定画面で簡単に追加できますね。

Googleアナリティクス

色々と設定しても反映されなかったり、以前は手こずっていた記憶があるのですがExUnitの設定画面から簡単に設定できました。

Google AdSense

アフィリエイト広告を表示させるGoogle AdSenceですが、こちらもheader.phpに追記することなく、設定画面でアカウントの情報を入力して表示する箇所にタグを貼り付けるだけです。

URLを変更したので404ページでユーザーフォロー。

今まではサイトアドレスを「https://shinjiman0101-digital.net/blog/」としていましたが、設定を見直して「https://shinjiman0101-digital.net/」としました。Wordpressのインストールディレクトリと同じのままで放置していたので…。

WordPressの設定画面からサイトアドレスを変更し、「.htaccess」と「index.php」を1つ上の階層にコピーしてアドレスの変更は完了したのですが(index.php内部の書き換えは必要)、既存記事を今までSNSなどにポストしていたリンクはエラーになるようになってしまいました。
さすがにここを1つ1つ変更していくのは手間すぎます。
もともと、そこまでアクセス数が多くない弱小個人ブログですので気にせず続けていけばいずれ無くなるとは思いますが、アクセスしてきていただいた方に「ページがありません」と突きつけるのは若干気が引けたので、少し子テーマのfunctions.phpに以下のコードを貼り付けておきました。

functions.php内の「<?php」から「?>」の間に追記します。「自身のサイトアドレス」部分は任意で変更してください。

add_action( 'get_header', 'my_redirect_404' );
function my_redirect_404() {
	if ( is_404() ) {
		// 404ページ用に作った固定ページ
		wp_safe_redirect( 'https://自身のサイトアドレス/404-page/' );
	}
}

後は、アドレスを同じパーマリンクで404エラー用の固定ページを作成しておけば、もし既存ページへのアクセスで404エラーになったとしても自動的に予め作成しておいたページへ遷移します。
こうしておけば404エラーで止まらずに次のアクションをユーザーに促すことができますね。

これだけで変更後のブログは一通り完成。

もともと記事自体は積み重ねているブログだったので、テーマを画面上でグラフィカルに設定を変更して、ある程度カスタマイズするだけでデザインが出来上がってしまうのは便利な時代になりましたね。
一昔前ならWordpressでそれなりのデザインのページにしようと思ったら、CSSやHTMLタグの知識、javascriptの知識は必須だったと思うのですが、それすらも必要ないくらいにプラグインが充実していました。

作業時間は合計で数時間くらい。

今回のテーマ変更とカスタマイズは、日々の仕事から帰ってから寝るまでの時間の中で書斎に行けるタイミングがあれば作業していたくらいで、一日30分程度でした。プラグイン「WP Theme Test」のおかげで少しずつ作業できたのは大きいですね。

ひと手間かけると吉。

料理でもそうですが、ひと手間を惜しまずに作ると奥行きというか深みが増したりしますし、それはデザインにも言えるのかもしれませんね。今回のテーマ変更にあたって、アイコンではなく画像を準備したり、それなりに手間を少しかけました。
テーマそのままだと他人のページと同じ雰囲気になってしまいがちですが、自分の写真を使ったりすることでオリジナリティが出てきた気がします。これは写真スキルの有り無しに関わらず、やった方が良いと思います。やはりテーマのデザインと自分が考えているデザインのイメージとは完全に一致していることはまず無くて、そこを自身が撮影した画像でカスタマイズすると2つの差は埋まっていきます。