【カスタマイズ記事】はてなブログのデザインテーマをレスポンシブ対応の「Brooklyn」に変えてみた

スポンサーリンク

さてと、今回はワケアリで「はてなブログのデザインテーマ」をレスポンシブ対応の「Brooklyn」に変えてみました。

ほぼ毎月デザインテーマが変わっている気がしますが、まぁ良しとしましょう。おそらく、これからは「Brooklyn」を安定して使っていくと思います。※2016年11月現在は安定して「blank」です……。

カスタマイズに時間はかかったものの、以前よりシンプルで使い易いブログにはなったのではないでしょうか。何せブログカスタマイズ初心者なもので、線一本消すのに何時間もかかります(ぇ。

そのほとんどをコピペで済ませているわけですが、「頑張れば初心者でもこのぐらいはカスタマイズできますよ」というご報告です。

デザインテーマを変えたキッカケ

スマホで検索結果が正しく表示されない

先日、「ブログ名でGoogle検索してみても、タイトルが『はてなid』で表示されてしまう」というお話をさせていただきました。

なんとかブログ名を変更することでこの現象は回避できたのですが……。どうやら、まだ終わっていなかったようです。

すっかり、「スマホ」の存在を忘れておりました。

パソコンで自分のブログキーワードを検索すると、きちんと自分のブログが「正しいブログ名」で表示されています。
しかし、スマートフォンの方で同じキーワードで検索してみるとまたしても「はてなid」で表示されてしまっていたんですね。

↓Yahoo、Googleともに「はてなid」で表示されてしまう

f:id:afrokanchan:20160306011124j:plain

↓ここまで入力してやっと自分のブログ名が表示される

f:id:afrokanchan:20160306011320p:plain

困りました。一体何が原因なのか分かりません。キャッシュを削除してみても、ブラウザを変えてみても、検索エンジンを変えてみても一向に解決しません。

この現象について調べてみても全く見つからないんですよね。本当に僕だけなのでしょうか。

デザインテーマが原因?

そこで一つ思い当たることがありました。

ズバリ、デザインテーマです。

僕は今まで、パソコンとスマートフォン、別々のデザインでカスタマイズをしておりました。パソコンとスマートフォンで違う点といえばこのぐらいのものです。

「パソコンとスマホのデザインが違う」ことで、検索結果に何らかの影響が出ているのではないかと考えました。

そこで「デザインテーマを変更する」ことに決定。 とりあえずやってみればいいんです。これで変化がなくとも、別に困りません。やってダメでもやらないでダメよりかは遥かに良いですからね。

2016/11/2追記:おそらく、ただのGoogleのアルゴリズムの問題だったと思われます。現在は改善されています。

レスポンシブ対応の「Brooklyn」

というわけで、デザインテーマをレスポンシブ対応の「Brooklyn」に変更しました。

テーマストア - Brooklyn –

レスポンシブデザインとは、自動でウィンドウサイズを合わせて、ページデザインを最適化してくれる技術のことです。

通常、はてなブログはパソコンとスマホ、2つのデザインを考えなくてはなりません。
しかし、このレスポンシブ対応のデザインテーマにすることによって、パソコン側の管理だけでスマホの方も最適化できてしまうんですね。

細かく言えば、それぞれのデザインをそれぞれきちんと作り込めば良いのでしょうけど、僕のような素人にはハードルが高すぎます。

レスポンシブデザインのメリットについては他にも多くありますが、ここでは割愛させていただきます。

関連:レスポンシブウェブのメリット・デメリット | BiNDクラウドのblogより

「Brooklyn」のカスタマイズ方法については以下の記事から。

関連:はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE

このデザインテーマの作者様であられるシロマティさん(id:shiromatakumi)の記事には、ブログ開設初期から大変お世話になっております。
まだPVが2ケタぐらいのときに記事内で言及させていただいたのですが、わざわざお礼を書きにこのブログに来てくださったんですよね。今でも強く覚えています。素敵でしたわー。

Before & After画像(PC & スマホ)

まず初めに、PCとスマホ、それぞれのBefore & After画像を。

PC版Before & After

Before

f:id:afrokanchan:20160306012310p:plain

Brooklyn適用

f:id:afrokanchan:20160306012402p:plain

After

f:id:afrokanchan:20160306012427p:plain

大きく変わったところはグローバルメニューでしょうか。分かりやすく、カテゴリー名の前にアイコンをつけました。

スマホ版Before & After

Before

f:id:afrokanchan:20160306012630p:plain

After

f:id:afrokanchan:20160306012658p:plain

右上のアイコンをタッチすることでメニューを開くことができます。

メニューを開いた状態

f:id:afrokanchan:20160306012731p:plain

デザインテーマを「Brooklyn」に変更してからやったことまとめ

デザインテーマを「Brooklyn」に変えてカスタマイズしたことをまとめていきます。ここで出ていないカスタマイズ等は、この次の項目でまとめて記載させていただきます。

スマホ表示をレスポンシブ対応にする

レスポンシブ対応のテーマに変更するだけでは、スマートフォンでレスポンシブデザインの表示を有効にすることはできません。簡単な処理だけで良いのでサクッと終わらせましょう。

1.「Responsive; yes」とCSSに記述する

上記のタグをはてなブログのダッシュボードから「デザイン」→「スパナアイコン」→「デザインCSS」に記述します。

f:id:afrokanchan:20160306014130p:plain

2. レスポンシブデザインを有効にする

次に、同じくはてなブログダッシュボートに行き、「デザイン」→「スマホアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックをすれば完了です。

f:id:afrokanchan:20160306014558p:plain

こちらの記事を参考にさせていただきました。

はてなブログ 3STEPでレスポンシブデザインに!やり方を解説♪ – イロイロひとりごと。

グローバルメニューの設置

続いて、グローバルメニューの設置です。よく、ホームページの上部にカテゴリ別に分かれているアレのことですね。

もうすっかりお馴染みですが、こちらの記事を参考にさせていただきました。ゆきひー (id:ftmaccho)さんです。

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ – Yukihy Life

パソコンでは通常のグローバルメニュー、そして、スマホの方ではトグルメニューを設置したかったのでこちらにしました。

トグルメニューのアイコンを変更(スマホ)

まず、記事内に公開されているコード1のHTMLを書き換えていきます。
僕はMENUの表示が必要なかったので、一行目のコードから「MENU」の文字を削除しました。

はてなブログダッシュボード→「スパナマーク」→「ヘッダ」→「タイトル下」から変更できます。

続いて、i class=”blogicon-reorder lg”の部分を自分の好きなアイコンに変更。アイコンは以下のページから探しました。太字の部分に好きなアイコンのクラス名を入れてあげるだけです。

このタグはカテゴリー名の前に書いてあげればOK。スペースを使って間隔調整しました。

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ – しろかい!

アイコンの大きさ等についてはこちらの記事を参考にしました。

// fa は fontawesome のクラスを表す必須記述
// fa-twitter はアイコン名 ここに使いたいアイコン名を入れて使う
// fa-lg はアイコンのサイズ指定 サイズは以下の中から指定可能

なし :100%
fa-lg : 133%
fa-2x : 200%
fa-3x : 300%
fa-4x : 400%
fa-5x : 500%

同じようにしてSNSアイコン、グローバルメニューのアイコンも自分の好きなものを選んでいきます。

追記:2016/3/9

僕の場合、トグルメニュー及びグローバルメニューのアイコンはfa-2xを採用。SNSのアイコンにはfa-4xを指定しています。
13インチの画面で確認したところ、表示がズレていたのでSNSのアイコンも2xに変更しました。

↓SNSアイコン

f:id:afrokanchan:20160306020832p:plain

日付の背景色を変更(PC & スマホ)

記事のタイトル上付近に表示される日付の背景色を変更しました。こちらの記事を参考にさせていただきました。

【はてなブログ】日付の背景色を変更するには – カスタマイズ日和

はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – Literally

僕は背景色を変更したのち、枠に少し丸みを帯びさせました。

以下、僕が弄ってみたものです。変更した部分などにはアンダーラインを引いております。

ヘッダー下の黒い線を白に(PC & スマホ)

なぜか、ヘッダーの下、グローバルメニューの上に黒い線が入ってしまいました。

f:id:afrokanchan:20160306024123p:plain

白になりました。

f:id:afrokanchan:20160306024253j:plain

「Google Publisher Toolbar」の導入

じょーじ(id:george-gogo)さんの記事をキッカケに「Google Publisher Toolbar」を導入してみました。
緑色のフィルターがかけられるので、自分で間違ってリンクを踏んでしまうということも防げますね。便利な拡張機能です。

関連:ブロガーなら絶対に導入するべきAdSenseツール『Google Publisher Toolbar』 – 急がば 急いでまわれ!

僕が過去にやったカスタマイズまとめ

まとめ

少しは見やすいブログになった気がします。4時間ほど時間をかけた甲斐がありました。本当に時間かかりすぎですね。

それと、僕はWebカスタマイズについては素人です。極力ミスがないように、正確な情報を伝えられるように努力しておりますが、間違いや不要なコードが含まれている可能性があります。

その点はご了承ください。「これはマズいでしょ……」や「ちょっとこれはダメだよ」など、おかしい部分がありましたらご指摘いただけると嬉しいです。

これで、スマホの方の検索結果も良い方向へ行くと良いのですが……。もともとこれが目的だったはずが、いつの間にかブログカスタマイズに熱中してしまっておりました。

腰がとても痛いです。

関連記事

スポンサーリンク

Twitterで「あめのは」を

スマホ料金を断捨離!
自宅で格安SIM「mineo」にMNPできたよ!

自宅でサクッと「mineo」に変えちゃいましょう。SIMロック解除ができないau iPhone6でも、mineoなら大丈夫。スマホ料金を5分の1にまで節約できちゃいました。

ブログ初心者におすすめ!
WordPressテーマ「STORK(ストーク)」

販売価格 ¥10,800(税込)

当ブログも使っている、WordPressテーマ「STORK」。デザインの良さはもちろん、使いやすさ・読みやすさにも徹底的にこだわり抜いた究極のモバイルファーストWPテーマです。スマートフォンでの使用感は抜群!