[ブログ] テーマをSimplicity2からLION BLOGに変えてみた

ブログのテーマをSimplicity2からLION BLOGに変えてみた。無料でサイトのレスポンスも良好。そしておしゃれな感じにビビッときちゃったのだ。

LION BLOG とは？

LION BLOG とは、サイトデザインやWebコンサルティングを行うFIT社が作成した無料のWordPressテーマ。今年の8月に登場した新鋭だ。

http://fit-jp.com/lionblog_announce/

ダウンロードは↓から。

http://fit-jp.com/theme/theme_download/

豊富なカスタマイズ、SEO対策はもちろんのこと、このご時世には珍しいJavaScript不使用というのが特徴的。それゆえにページレスポンスが良いらしい。

なぜSimplicity2から変えたのか？

Simplicity2は、今となっては豊富すぎるカスタマイズかつ名前のとおりシンプルなデザインが魅力の無料テーマで、ちょこちょこいじりながらありがたく使わせてもらっていた。

https://wp-simplicity.com/

機能的な不満は全然なかったのだけど、お知り合いのブログのこの記事を読んで「あー、確かにみんな使っているから没個性になりやすいのかも…」と感じたのだった。

で、何かいいのがないかなーと探してみたところ、このLION BLOGに出会ったというわけ。お金を出せばもっと高機能で差別化も図れるのだろうけど、いかんせんお財布事情が厳しい僕には、無料というのがありがたかった。

LION BLOG に変えて行ったカスタマイズ

LION BLOGに変えていくつか行ったカスタマイズを書いてみる。

Google AdSense の貼り直し

いままでとブログのレイアウトが多少変わったことにより、広告の大きさなども変わったので、改めてGoogle AdSenseからコードを取得し直して貼り直した。収益面で言うとSimplicity2のほうがいろいろとこだわり設定を出来るので、今後どうなるかが多少不安ではあるものの、とりあえず様子を見てみることにする。

ひとまず今は、TOPバナー（PCのみ）と記事の上下、そしてサイドバーに縦長のバナーを配置してみた。

独自スタイルシートの当て直し

僕のブログは商品紹介のリンクにカエレバを使っていて、それに独自スタイルシートを当てていた。ブログのテーマを変えると当然それが無効になるので、子テーマのstyle.cssにそれを移行した。

LION BLOGはSimplicity2と同様に、始めから子テーマも用意されていたので、すんなり移行することが出来た。これでテーマのアップデートを行っても、コードが消えたり上書きされたりしないで済む。

サイトロゴの作り直し

Simplicity2の時は、海外サイトのWebサービスでロゴを作った。で、今回も同じように作成しようと思ったのだけど、いまいちしっくりこなかったので、いっそのこと自分で作ろうと思い、画像編集ソフトを使ってぱっと作ってみた。

とは言っても、アイコンがてら頭文字を持ってただけというひねりも何もない感じに。まあ、言われなかったらそれっぽく見えると思うし、思いのほか気に入っているのでこれでOK。

ブログカードの設定

実はこれが一番困った。というのも、Simplicity2にはリンクを自動的にブログカードにしてくれる機能があったので、それを多用していた。そもそもブログカードはなに？と言うと、はてなブログとかで見られる、リンクをサムネイル付きでタイトル・概要とともに四角で囲ってくれるやつだ。

移行当初は、当然その機能はなくなるので、無機質にURLのリンクがベタッと貼られている状態になってしまった。で、これをどうしたかというと、プラグインで解決した。Pz-LinkCardというものだ。

https://popozure.info/pz-linkcard#i-17

このままだとショートコードを使わないとこれまでのリンクがブログカードにならないので、「テキストリンク行の変換」と「URL行の変換」の2つにチェックを入れることで対処した。

また、デザインもできるだけ以前のものにしたかったので、以下のブログを参考にはてなのそれに近づけるようにした。

https://webdesigner.fans-web.net/3906

ただ、ここまで設定したあとにいくつか記事を見てみたところ、ちゃんと適用されているところもあれば、標準デザインのままのものもあって、適用条件がいまいちわからない…（キャッシュクリアしてもだめ）。他に方法があるかもしれないけれど、時間が足りないので一旦そのままにしている。

AmazonアソシエイトのMobile Popoverを有効化

これは以前までやっていなかったのだけど、今回テーマを新しくしたことを機に設定してみた。何かというと、スマホで記事を見たときに、そこにAmazonリンクがある場合、下の方からシュッと商品バナーが出てくるやつだ。

有効化するには、Amazonアソシエイトのページからコードを取得したあと、bodyタグの終わりの直前に入れる必要があるが、これは親テーマからfooter.phpを子テーマにコピーして記述すればOK。

見ている人には「じゃまくさ！」って思うだろうけど、まあ、許してください…（気になるのがあったら買ってね

まとめ

photo credit: Hadock Be a Lion via photopin (license)

まだまだ移行しきれていない部分もあるが、見られるくらいにはなったと思うので、これで行きたいと思う。しばらく慣れないかもしれないけれど、今後ともよろしくお願いします。

WordPress標準デザイン講座【Version 4.x対応】

posted with ヨメレバ

野村 圭,石原 隆志 翔泳社 2015-02-28

Amazon

Kindle

楽天ブックス

楽天kobo