さてと、今回はワケアリで「はてなブログのデザインテーマ」をレスポンシブ対応の「Brooklyn」に変えてみました。
ほぼ毎月デザインテーマが変わっている気がしますが、まぁ良しとしましょう。おそらく、これからは「Brooklyn」を安定して使っていくと思います。
カスタマイズに時間はかかったものの、以前よりシンプルで使い易いブログにはなったのではないでしょうか。何せカスタマイズ初心者なもので、線一本消すのに何時間もかかります。
そのほとんどをコピペで済ませているわけですが、「頑張れば初心者でもこのぐらいはカスタマイズできますよ」というご報告です。
- デザインテーマを変えたキッカケ
- レスポンシブ対応の「Brooklyn」
- Before & After画像(PC & スマホ)
- デザインテーマを「Brooklyn」に変更してからやったことまとめ
- 私が過去にやったカスタマイズまとめ
- まとめ
デザインテーマを変えたキッカケ
スマホで検索結果が正しく表示されない
先日、「ブログ名でGoogle検索してみても、タイトルが『はてなid』で表示されてしまう」というお話をさせていただきました。
なんとかブログ名を変更することでこの現象は回避できたのですが……。どうやら、まだ終わっていなかったようです。
すっかり、「スマホ」の存在を忘れておりました。
パソコンで自分のブログキーワードを検索すると、きちんと自分のブログがブログ名が表示されます。
しかし、スマートフォンの方で同じキーワードで検索してみるとまたしても「はてなid」で表示されてしまったんですね。
↓Yahoo、Googleともに「はてなid」で表示されてしまう
↓ここまで入力してやっと自分のブログ名が表示される
困りました。一体何が原因なのか分かりません。
キャッシュを削除してみても、ブラウザを変えてみても、検索エンジンを変えてみても一向に解決しません。
この現象について調べてみても全く見つからないんですよね。本当に私だけなのでしょうか。
デザインテーマが原因？
そこで一つ思い当たることがありました。
ズバリ、デザインテーマです。
私は今まで、パソコンとスマートフォン、別々のデザインをしておりました。パソコンとスマートフォンで違うことといえばこのぐらいのものです。
「パソコンとスマホのデザインが違う」ことで、検索結果に何らかの影響が出ているのではないかと考えました。
そこで「デザインテーマを変更する」ことに決定。
とりあえずやってみればいいんです。これで変化がなくとも、別に困りません。やってダメでもやらないでダメよりかは遥かに良いですからね。
レスポンシブ対応の「Brooklyn」
というわけで、デザインテーマをレスポンシブ対応の「Brooklyn」に変更しました。
テーマストア - Brooklyn -
http://blog.hatena.ne.jp/-/store/theme/6653586347155924442
レスポンシブデザインとは、自動でウィンドウサイズを合わせて、ページデザインを最適化してくれる技術のことです。
通常、はてなブログはパソコンとスマホ、2つのデザインを考えなくてはなりません。
しかし、このレスポンシブ対応のデザインテーマにすることによって、パソコン側の管理だけでスマホの方も最適化できてしまうんですね。
細かく言えば、それぞれのデザインをそれぞれきちんと作り込めば良いのでしょうけど、私のような素人にはハードルが高すぎます。
レスポンシブデザインのメリットについては他にも多くありますが、ここでは割愛させていただきます。
「Brooklyn」のカスタマイズ方法については以下の記事から。
このデザインテーマの作者様であられるシロマティさん(id:shiromatakumi)の記事には、ブログ開設初期から大変お世話になっております。
まだPVが2ケタぐらいのときに記事内で言及させていただいたのですが、わざわざお礼を書きにこのブログに来てくださったんですよね。今でも強く覚えています。
Before & After画像(PC & スマホ)
まず初めに、PCとスマホ、それぞれのBefore & After画像を張っておきます。
PC版Before & After
Before
Brooklyn適用
After
大きく変わったところはグローバルメニューでしょうか。分かりやすく、カテゴリー名の前にアイコンをつけました。
スマホ版Before & After
Before
After
右上のアイコンをタッチすることでメニューを開くことができます。
メニューを開いた状態
デザインテーマを「Brooklyn」に変更してからやったことまとめ
デザインテーマを「Brooklyn」に変えてカスタマイズしたことをまとめていきます。ここで出ていないカスタマイズ等は、この次の項目でまとめて記載させていただきます。
スマホ表示をレスポンシブ対応にする
レスポンシブ対応のテーマに変更するだけでは、スマートフォンでレスポンシブデザインの表示を有効にすることはできません。簡単な処理だけで良いのでサクッと終わらせましょう。
1. 「Responsive; yes」とCSSに記述する
/* Responsive; yes */
上記のタグをはてなブログのダッシュボードから「デザイン」→「スパナアイコン」→「デザインCSS」に記述します。
2. レスポンシブデザインを有効にする
次に、同じくはてなブログダッシュボートに行き、「デザイン」→「スマホアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックをすれば完了です。
こちらの記事を参考にさせていただきました。
happylife-tsubuyaki.hatenablog.com
グローバルメニューの設置
続いて、グローバルメニューの設置です。よく、ホームページの上部にカテゴリ別に分かれているアレのことですね。
もうすっかりお馴染みですが、こちらの記事を参考にさせていただきました。ゆきひー (id:ftmaccho)さんです。
パソコンでは通常のグローバルメニュー、そして、スマホの方ではトグルメニューを設置したかったのでこちらにしました。
私がやったことまとめ
・トグルメニューのアイコンを変更(スマホ)
まず、記事内に公開されているコード１のHTMLを書き換えていきます。
私はMENUの表示が必要なかったので、一行目のコードから「MENU」の文字を削除しました。
<span class=\"menu-toggle\"><i class=\"blogicon-reorder lg\"></i>MENU</span>
はてなブログダッシュボード→「スパナマーク」→「ヘッダ」→「タイトル下」から変更できます。
続いて、i class="blogicon-reorder lg"の部分を自分の好きなアイコンに変更。アイコンは以下のページから探しました。太字の部分に好きなアイコンのクラス名を入れてあげるだけです。
このタグはカテゴリー名の前に書いてあげればOK。スペースを使って間隔調整しました。
アイコンの大きさ等についてはこちらの記事を参考にしました。
// fa は fontawesome のクラスを表す必須記述
// fa-twitter はアイコン名 ここに使いたいアイコン名を入れて使う
// fa-lg はアイコンのサイズ指定 サイズは以下の中から指定可能なし ：100%
fa-lg : 133%
fa-2x : 200%
fa-3x : 300%
fa-4x : 400%
fa-5x : 500%
同じようにしてSNSアイコン、グローバルメニューのアイコンも自分の好きなものを選んでいきます。
私の場合、トグルメニュー及びグローバルメニューのアイコンはfa-2xを採用。SNSのアイコンにはfa-4xを指定しています。
↓SNSアイコン
・日付の背景色を変更(PC & スマホ)
記事のタイトル上付近に表示される日付の背景色を変更しました。
こちらの記事を参考にさせていただきました。
私は背景色を変更したのち、枠に少し丸みを帯びさせました。
.date a {
background: #好きな色のコード;
border-radius: 3px; /* 角の丸み* /
}
以下、私が弄ってみたものです。変更した部分などにはアンダーラインを引いております。
#menu {
position: relative;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;/*ヘッダーとグローバルメニューの間にある↓*/
margin-top: 0px;/*↑空白を消す*/
height: 40px;
background: #1ABC9C;/*グローバルメニュー背景色*/
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;/*センター揃えに*/
width: 12.5%;/*100÷リンクの個数*/
}
#menu li a {
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 75%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #1ABC9C;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;
}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #1ABC9C;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
position: fixed;/*こ*/
top: 0;/*て*/
z-index: 10;/*い*/
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 0px 8px;/*トグルメニューアイコン位置微調整*/
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
height: 45px;/*カテゴリー同士の間隔調整？*/
width: 50%;/*2分割*/
list-style-type: none;
background: #1ABC9C;/*リスト文字の背景色*/
margin: 0 auto;
text-align: center;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #ffffff;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
#blog-title{
margin-top: 30px;/*こ て い のバランス調整*/
}
}
ヘッダー下の黒い線を白に(PC & スマホ)
なぜか、ヘッダーの下、グローバルメニューの上に黒い線が入ってしまいました。
#blog-title {
border-bottom: 1px solid #ffffff;
}
白になりました。
「Google Publisher Toolbar」の導入
じょーじ(id:george-gogo)さんの記事をキッカケに「Google Publisher Toolbar」を導入してみました。
緑色のフィルターがかけられるので、自分で間違ってリンクを踏んでしまうということも防げますね。便利な拡張機能です。
私が過去にやったカスタマイズまとめ
まとめ
少しは見やすいブログになった気がします。4時間ほど時間をかけた甲斐がありました。本当に時間かかりすぎですね。
それと、私はWebカスタマイズについては素人です。極力ミスがないように、正確な情報を伝えられるように努力しておりますが、間違いや不要なコードが含まれている可能性があります。
その点はご了承ください。「これはマズいでしょ……」や「ちょっとこれはダメだよ」など、おかしい部分がありましたらご指摘いただけると嬉しいです。
これで、スマホの方の検索結果も良い方向へ行くと良いのですが……。もともとこれが目的だったはずが、いつの間にかブログカスタマイズに熱中してしまっておりました。
腰がとても痛いです。