ブログ初心者こそ使って欲しいテーマです。
ハミングバード
は無料テーマと違って、デフォルトのままでも美しく表示されるんです。
だからテーマをハミングバードに変えてからやったことと言えば、ほぼ「設定」のみです。
設定のみで、今の僕くらいのサイトになるので有料テーマ、というかハミングバード恐るべしだわ|д゚)
目次
テーマをハミングバードに変更した経緯
僕はブログを始めた当初から無料テーマの「simplicity」を使ってきました。
参考:ブログ初心者だった僕がsimplicityでカスタマイズした13のこと【コピペでOK!!】
simplicityは無料なのに、サポートが厚いしデザインも自由にカスタマイズできるのですごく気に入っていたんですよね。
でも僕はCSSとかもいまだによく理解してない人間なんです|д゚)
だからsimplicityを使ってブログを綺麗に見せることに限界を感じていたんですよね。
そこで良いテーマないかな~?とネットを漁っていたら、見つけたんですよ。
この「ハミングバード」を!!
いやもうめちゃくちゃ綺麗!
しかもPCからでもモバイルからでも、トップページのタイトル下におすすめ記事を並べられるなんてめっちゃ玄人みたいやん!
さらに値段もめちゃくちゃお手頃価格なんです。
基本的な有料テーマの平均的な価格帯は2万円前後なんですけど、この「ハミングバード」はなんと7980円!
このデザインで、この価格!コスパ抜群やん!!
ということで迷うこと1か月、遂にハミングバードを購入することにしました。
※無料テーマが良いという方は、Simplicityが圧倒的におすすめです。
ハミングバードを売り出している「OPEN CAGE」について
ハミングバードはOPEN CAGEというサイトから出されています。
OPEN CAGEのコンセプトとしては、ブロガーが「書くことだけに集中」できる環境をつくること。
オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。 オープンケージという名前は「扉の空いたケージ(鳥かご)」を意味しています。 扉の空いた鳥かごから中の鳥が大空に羽ばたくように、当テーマを利用してインターネットの大空に飛び立ち世界に向けて新たな可能性を発信してほしいという思いから命名しました。
全てモバイルファーストでつくられているので、スマホで見た時のデザインは抜群です。
サイトからの抜粋ですが、モバイルファーストで作られていることは本当にありがたいです。
本ブログ・ゆたとりの場合、モバイルからの流入が70%を超えているので、モバイル端末から見やすいサイト作りが欠かせないんですよね。
無料テーマもモバイル端末からの閲覧を見やすくしてくれていますが、まだまだなんですよ。
OPEN CAGEからはハミングバードの他にも2種類のテーマが出されています。
1つ目は「アルバトロス」(7980円)。
これは多くのブロガーが使っているので見たことがある人も多いと思います。
2つ目は「ストーク」(10800円)。
やぎろぐにも使われているテーマです。
どちらもOPEN CAGEらしく、スタイリッシュで設定も簡単のですが、僕はハミングバードにどうしても惚れてしまったので泣く泣く購入を見送りました。
ハミングバードの機能一例
僕が便利だな!と感じた機能を少しだけ紹介していきます!
他にも様々な機能があるので、ぜひ公式ページで確認してくださいね。
参考:ハミングバードの使い方
ボタンがたくさん選べる!
リンクを紹介するときにボタン化することで目立たせることができます。
とするよりかも、
他にも様々なボタンがあって、たとえばこんな感じにできます
参考:ショートコードの使い方
シェアボタンがデフォルトで置ける
TwitterやFacebookなどのシェアボタンがデフォルトで置いてあります。
シェアボタンはプラグインなどで置く方法もあるのですが、デザインがいまいちなんですよね。
その点、ハミングバードなら綺麗なシェアボタンに仕上がっています。
僕はSNSで拡散されたことはありませんが|д゚)、それでもいつかは拡散されたい!と思っているので、この機能はかなりありがたいです。
アクセスアップを狙うブロガー必見ですね!
おすすめ記事一覧をトップページに表示できる
自分で任意に選ぶことができる記事を一覧にして、トップページ上部にスライドさせることができます。
ここからアクセスがあるのかは今のところわかりませんが、ブログのデザイン的にはかなりかっこいいですよね!
クリックしてくれなかったとしても、「このブログはこんなこと書いているんだな」と読者の人に理解してもらえるきっかけになると思いますよ。
僕の場合は書いている記事のジャンルが雑多すぎて、「は?これなんのブログだよ(-“-)」と思われてしまう可能性が大きいですがねw
ハミングバードなら超簡単設定!
デフォルトの状態が綺麗なので、ブログの記事執筆に力を注げます。
僕も3時間くらい楽しみながらいじってたら、今みなさんが見ているようなデザインにすることができました!(ちなみに無料テーマを使っていた時は1週間くらいかかった気がしますw)
正直、このレベルのデザインに無料テーマをカスタマイズしてしようとしたら、僕だったら1年は勉強漬けの日々でしょうw
でもハミングバードなら、たったの3時間で満足のいくデザインにすることができます!
ちなみにカスタマイズしたところは、『えむ氏のログ』を参考にしたカエレバとヨメレバのCSSくらいです。あとは「設定」からなんとかできます。
●カエレバ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.kaerebalink-box{text-align:left; padding-bottom:20px; font-size:small; zoom: 1; overflow: hidden; } .kaerebalink-image{float:left; margin:0 15px 10px 0; } .kaerebalink-info{line-height:120%; zoom: 1; overflow: hidden; } .kaerebalink-name{margin-bottom:10px; line-height:120%; font-size:16px; } .kaerebalink-powered-date{font-size:11px; margin-top:5px; font-family:verdana; line-height:120%; } .kaerebalink-detail{margin-bottom:5px;} .kaerebalink-link1{margin-top:10px;} .kaerebalink-box div.shoplinkamazon{display:inline; margin-right:5px; padding: 10px 0px 10px 0px; white-space: nowrap; background:#000; } .kaerebalink-box div.shoplinkrakuten{display:inline; margin-right:5px; padding: 10px 0px 10px 0px; white-space: nowrap; background:#CC0000; } .kaerebalink-box div.shoplinkamazon a{color:#FFFFFF; text-decoration:none; display:inline-block; padding: 0.9em 3em; } .kaerebalink-box div.shoplinkrakuten a{color:#FFFFFF; text-decoration:none; display:inline-block; padding: 0.9em 2.5em; } .kaerebalink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;} .kaerebalink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;} .booklink-footer{clear: left;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.booklink-box{text-align:left; padding-bottom:20px; font-size:small; zoom: 1; overflow: hidden; } .booklink-image{float:left; margin:0 15px 10px 0; } .booklink-info{line-height:120%; zoom: 1; overflow: hidden; } .booklink-name{margin-bottom:10px; line-height:120%; font-size:16px; } .booklink-powered-date{font-size:11px; margin-top:5px; font-family:verdana; line-height:120%; } .booklink-detail{margin-bottom:5px;} .booklink-link2{margin-top:10px;} .booklink-box div.shoplinkamazon{display:inline; margin-right:5px; padding: 10px 0px 10px 0px; white-space: nowrap; background:#000; } .booklink-box div.shoplinkkindle{display:inline; margin-right:5px; padding: 10px 0px 10px 0px; white-space: nowrap; background:#ff8000; } .booklink-box div.shoplinkrakuten{display:inline; margin-right:5px; padding: 10px 0px 10px 0px; white-space: nowrap; background:#CC0000; } .booklink-box div.shoplinkamazon a, .booklink-box div.shoplinkkindle a{color:#FFFFFF; text-decoration:none; display:inline-block; padding: 0.9em 3em; } .booklink-box div.shoplinkrakuten a{color:#FFFFFF; text-decoration:none; display:inline-block; padding: 0.9em 1.5em; } .booklink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;} .booklink-box div.shoplinkkindle a:hover{color:#FFFFFF; background:#ffd5aa;} .booklink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;} .booklink-footer{clear:left;} |
楽に綺麗にしたいならハミングバード!
ハミングバードを導入すれば、僕みたいな素人でも3時間くらい時間をかければ、自分の満足の行くデザインに「簡単に」することができます。
ハミングバードを使うとどのようにサイトにすることができるんだろうと気になる方は、以下の人達のブログを参考にしてみてください。
正直言ってもう無料テーマには戻れません|д゚)
無料テーマをカスタマイズしたおかげで、ブログに関する知識が増えたという点もありますが、カスタマイズに使った労力を考えると、ねぇ。。
有料テーマ「ハミングバード」はブログ初心者にも上級者にもおすすめできる優良テーマですよ!
是非是非公式ホームページでDEMOサイトなどをチェックしてみてくださいね!