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

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

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

LION BLOG とは?

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

AMP対応・SEO最適化・高機能・高速表示。そしてレスポンシブ対応の無料 WPテーマ「...
WordPress用無料テーマ「LION BLOG」をリリースしました。LION BLOGテーマは、プラグインなしでAMPに対応しており、SEO最適化済みで表示速度も速い。そしてレ […

ダウンロードは↓から。

FIT-フィット
千葉県印西市にある中小企業向けのホームページ制作なら

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

なぜSimplicity2から変えたのか?

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

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

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

 で、何かいいのがないかなーと探してみたところ、この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というものだ。

WordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので...

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

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

WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFAN
WordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプラグイン「Pz-LinkCard」をご紹介します。 ブログカードとは? はてなブログを見...

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

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

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

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

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

まとめ


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

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