やあやあ、能ある鷹ｈ氏（@noaru_takahshi）だよ。
以前からご覧になっていただいている方にはきっと分かってもらえると思うんですが、サイトデザインをリニューアルしました！
ブログをワードプレスで始めてから、どのテーマがいいかよくわからず、とりあえず多くの人が使っている無料のテーマ「STINGER5」を使い続けてきました。
しかし1年運営していると、なんとなーくマンネリ化してきてしまい、他のサイトを見て羨ましくなったり、ブログに対するモチベーションが下がりがちになったり。。
「そろそろデザインを変えてみよっかな」
と、思い立ち、結局opencageの「ハミングバード」という有料テンプレートに変更することにしました。
これです。有料だけあって、さすがに機能も充実してますねえ！！
デザイン自体はSTINGER5時代とあまり変更せずにゆるりとふんわりした感じにしつつ、記事の見易さや回遊性をパワーアップする感じで修正しています。（おかしなところあったらご指摘お願いします！）
今回はテーマを変えてみた雑感とカスタマイズしたことについてメモしておこうと思います！
ハミングバードにした理由！
冒頭にも書きましたが、理由は３点。
- STINGER5+SIMPLESTERのカスタマイズに限界を感じた
- 他のサイトを見てもうちょっと本格的なブログ運営にしようと思った
- ハミングバードが流行っていた
第一の理由として、これまでSTINGER5でせこせこと自分好みのサイトデザインにしてきたのですが、CSSをいじるのみで、これ以上の構造改革は無理だなという実感がありました。
とにかくオシャレなサイトって細かいところまできっちりデザインされていて見るのは楽しいんですけど、いざ自分のサイトに実装するとなると、一から勉強するのが面倒くさくて手がつきません。。。
もうちょっと過去記事へのリンクあってもいいかなーとか、
こういうショートコード書いておきたいなーとか、
リストタグのデザインを修正したいなーとか、
諸々の願望はあって、暇なときにちょっとずついじってきたんですけど、いよいよ、どこをどういじればその目標に到達できるかが分からない状態になってしまいました。。
基本的なことは色んなサイトにカスタマイズ記事があるのですが、応用編となるとなかなかそういう記事も見つからないんだよね。。。
だったら、もはやテーマを変えるしかないんじゃないかと。
そんな中、以前より素敵なサイトデザインだなと思っていた「Fatherlog」というサイトを見ていたところ、Fatherlogが「ハミングバード」で制作されているという記事を発見して、俄然興味が沸き起こってきました。
いざ調べてみると、すごい流行ってるんですね。このテンプレート。
あのサイトもこのサイトも「ハミングバード」。いたるところでハチドリがブンブンいっています。
しかもブロガーに絶賛されている模様。それなりのお値段だし、あんまり絶賛されているとかなり胡散臭さを感じるのですが、確かにデモサイトを見ていると美しい。
STINGER5を私が選んだ理由も、たくさん利用者いた方が色々とカスタマイズのノウハウや困ったことが共有できて便利！というところだったので、日本に利用者が多い方がありがたい！！
Themeforestで世界に通じる斬新なテーマを探してやろう、へへへ…とか考えていた時期もありましたが、WEB関連知識に不勉強な私が英語表記の本格派WordPressテーマにしても開始２秒で挫折すること請け合いだったので、大人しく日本語対応のハミングバードにすることにしました。
ハミングバードを使ってみての感想
うーん、正直言って、変えてよかった点と困った点と、不満だなと思う点があります。
良かった点：デフォルトで付いている機能が便利＋オシャレ
これに尽きます。今まではプラグインやcssをいじって実装していたいろんな機能が最初から組み込まれています。
特に私が興味を持った機能は、
- Googleアドセンスのカスタマイザ内実装
- 広告のカスタマイザ内実装
- ヘッダー下にレコメンド記事をスライド表示可能
- メニューに英語併記が可能
- SNSのシェアボタン標準装備
- 吹き出しや注意事項など便利なショートコード標準装備
STINGER5ではどう実装したらいいかわからないような細かいデザインも最初からなされていて、そこに惹かれました。
吹き出しのショートコードや参考記事のショートコードなんかもあって、こういうのあったらいいけど、わざわざ設定するの面倒くさいなあと思っている部分をしっかりフォローしてもらえます。
一番グッときたのがこれ。メニューの英語併記ってカッコよくない？？デザインもすっきりしていていうことなし。
プラグイン探すのもダルいし、cssをがっつりいじる実力もない。そもそもそんなにWordPressのカスタマイズに興味ないけど、パッと見シャレオツなサイトにしたい！っていう人にとっては最高のテンプレートなのではないでしょうか。
困った点：テンプレ変えると記事の細部を修正しないといけない
当たり前なのですが、STINGER5で独自に設定していたあらゆる設定が消えてしまいますので、色々修正しないといけません。
テンプレを変えたことにより前のテンプレで使っていた写真、ショートコード、記事内広告、記事下の一言とかが対応しなくなってしまいました。。
記事内に貼っていた写真やショートコードは一つずつ記事ごとに直していかないといけないので手間。
サイトの骨格部分をいじるのは楽しいですが、記事ごとの表記を変えていくのはちょっとだるいなあ。。しかも過去記事読んでいると修正したくなるのが性。これでは時間がいくらあっても足りない。
仕方ないので、隙間時間で徐々にこなしていきます。
不満な点：カスタマイズが難しい
なんでもかんでもカスタマイザ内で設定したり変更出来たりするのは便利なんですが、逆に言えばカスタマイザ内の設定の優先度が高いので、cssをいじっても思ったように変わってくれない。これは面倒！
ハミングバードはSTINGERよりもcssがぎっしり設定されているから、不勉強な人だといじる場所を探すのも一苦労。
本文のフォントサイズを変えるのにも四苦八苦しなくちゃいけない。
STINGERは出来がすごく良くて、カスタムネタがそこら中に落ちているから大抵の事はすぐに解決出来るけど、ハミングバードはカスタムネタが巷にあんまりないところも不便さを助長しているかも。
そもそもcssでいじらなくてもオシャレになるように制作されているテーマなので当たり前かもしれませんが、公式サイトに載っているカスタマイズの情報もh2,h3タグの変更くらいであんまり充実していません。
あと気になったのは意外と最初に設定すること多くて、まんま初期設定だとそこそこダサいこと。
もちろん小一時間いじればそれなりのサイトにはなるので、そのまま使い続けても何とかなります。
でも、デモサイトのような美しさを出すには結構いじる必要がある気がする。
ハミングバードのデザインに合うロゴなり、フォントなりをいじらないとなんかごたごたした感じになってしまう。
そういう意味では、ハミングバードのコンセプトに合致する人としては、なんにもいじろうと思わない全くの初心者と、なんでもいじれる上級者なのでは。
なんでも思い通りにならなくていいけど、こだわりたい部分はいじり倒したい！みたいな自称・中級者みたいな人にとっては不便な部分があるかも。
お金払ってるのにこんなに自分で調べて、手を入れないといけないのかよ！みたいな気持ちになります。
私がカスタマイズした点
そんなわけで自分のサイトも初期設定から色々といじってみました。
以前のサイトデザインに近くなるように頑張ってみましたので、ご参考まで、変更した内容を載せておきます。初心者で調べながらやったため、些細な変更に見えると思いますが、意外と時間がかかりました。。。
１．ロゴマークの設定
これはカスタマイザ内で簡単に出来ますが、画像のロゴをそのまま使用すると小さく表示されてしまいます。
”max-height”で画像サイズを調整していきます。
「style.css」内の『#logo img{max-height: サイズ指定px;}』の部分のいじって調整しましょう。
２．cssの変更
テーマカスタマイザだけだと変更できない部分はcssをいじりました。
具体的には、
- h1,h2,h3,h4タグの修正
- widgetの見出しタグの修正
- シェアボタンの修正
- 本文のフォントサイズの調整
これらを変えるにもどのclassがどこに対応しているか探すのに一苦労。
テーマカスタマイザで設定した色が様々な部分に適用されてしまい、思ったように細かく色がいじれなかったので、カスタマイザ関連の記載をある程度削除しました。
STINGERはfunctions.phpにカスタマイザ関連の記載がありましたが、ハミングバードはcustomizer.phpに記載がありますので注意。
３．メニューにアイコンの追記ヘッダーに背景画像設定
青い空の壁紙が気にいっているので、新しいサイトにも採用。
壁紙を載せると、記事部分やウィジェット部分も透けて壁紙の色になってしまうので白地を追加。
壁紙を載せたい場合は、アルバトロスのテーマの方が綺麗にいくかもしれませんね！！
４．アニメーションの削除
開発者が売りにしているアニメーション機能ですが、ちょっとやかましいし、重たいので消しました。
これはカスタマイザ内の、「外観＞カスタマイズ＞その他オプション」から変えられます。
５．サムネイルの写真サイズを変更
携帯とかならいいんですが、PCで見るとこれまでのサムネイル画像だと写真サイズが足りなくて黒縁の部分が大量に発生しました。
これの解決方法については公式サイトに記載があります。Regenerate Thumbnailsというプラグインを使うんだね。きれいに埋まっているととても美しいです。
６．記事下の「一言ボックス」を追加
意外と便利なひとことボックス。これまでokutani氏の記事を参考に作成していましたが、せっかくハミングバードに吹き出しのショートコードがあったので、そちらを活用できるようにしました。
需要がありそうだったらいつか記事にするかもしれません。
最後に！！
以上、なんだかんだ言ってきましたが、全然ハミングバード使いこなせてないので色々試してみたいと思います。使っているうちに不満なくなってくるかもしれないし。読み込み速度が異常に遅いので、不必要な部分を削って軽くなるようにしていこうと思います。
でも、シンプルなSTINGERのサイトから多少情報量が多い風のサイトになったんじゃないかと思います。少しでも直帰率が減るといいなあ。まあ、そんなこと言っている暇あったら楽しい記事書けっていう話ですが。
まとめると、ハミングバードのデモサイトが気に入ったならオススメだけど、そこからカスタムして自分好みにしようと思えばそれなりに苦労するよっていう話！！
以上だよ。
