はいどうも。
某所の新装開店みたいですが（笑）、ブログをリノベーションし、レスポンシブデザインにしてみました。
理由は、「スマホファースト」時代に対応するためであり、スライダーの新設、見出し・目次・囲み枠も一新しました。
はてなのカスタマイズは自由度が低く骨が折れますが、はまると綺麗に見えますね（笑）。
レスポンシブデザイン
実は、一年前のリニューアル時にrokuzeudonさんがお作りになった「Undershirt*1」に変更済みでした。
しかし、スマホ版は以前のままで、カスタマイズの自由度の低さや直帰率の高さなど限界を感じていました。
そこで、流行のレスポンシブデザインに変更して、スマホからの直帰率改善を目指しました。
【図解】レスポンシブデザインとは？定義、特徴、メリットとデメリットを解説｜ネットECの基本｜通販・ECの決済代行サービス｜ヤマトフィナンシャル
カスタマイズ
殆どMinimal Greenさんの記事を参考に、コピペさせて頂いただけなのですが、備忘録を兼ねて記録として残しておきます（多謝！）。
お洒落なデザインかつ平易な文章で書かれたブログは必見です。
スライダーの新設
改装の目玉の「スライダー」ですが、Minimal Greenさん氏の記事をコピペさせて頂きました（笑）。
flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ - Minimal Green
まずはPC版ですが、PV数が多い順に左から順番に並べていき、合計6個設置しました。
また、スマホ版も一見同じですが、右にスーッとスライドするようになっています（誰も気づいていない？）
グローバルメニュー
一時廃止したのですが、ヘッダーが殺風景になったため、再配置しました。
見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり） - Minimal Green
ドロップダウンが出て、カテゴリーが表示されます。
見出し/囲み枠/目次
見出しや目次のない手抜き記事はめっきり減りましたが、スマホからのアクセスを考えると欠かせませんね。
かわいい系のガーリーなデザインの見出しのCSS はてなブログへコピペで使えます。 - Minimal Green
黒板調の囲み枠はかなり目立ち、スマホからの視認率も良く気に入っています。
黒板風囲み枠CSSでブログの解説記事をまとめよう - Minimal Green
また、タイトル付き囲み枠も、文章にアクセントをつけるには良さそうです。
それと、目次はなかなかしっくり来る物がなかったのですが、ステッチ風を導入しました。
はてなブログの目次のデザインカスタマイズ集 - Minimal Green
ボトムナビ
はてなブログ界では、著名なバンビさんという方が書かれたCSSとHTMLを利用させて頂きました。
左からホーム/カテゴリー/はてな読者/Facebook/上に戻るボタンを設置。
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP！ - Bambi's BLOG @ hatena
サイドバー
訪問済みの国は一つの目安になるので、下記サイトを利用して設置してみました。
Interactive Visited Countries Map | amCharts
また、PC版のみ表示される自己紹介には縦長の画像を設置して目立つようにしています。
理由は、サイドバーは記事下に長々と表示されるので、下記を打ち込んで非表示にしております。
@media(max-width: 767px){ #box2 { display: none; } }
文尾には「プロフィールカード」を設置し、自己紹介・はてな読者・FBのリンクを張っています。
はてなブログの記事下にプロフィールカードを表示するカスタマイズ - Minimal Green
興味がないブログ村のバナーも貼っていますが、さる方から勧められた「ドメイン強化」の一環です。
ブログ村登録直後からグーグルに取り上げられる事が増えました（笑）。
タイトル
下記記事を参考にして、タイトルのフォント及び文字の大きさを変えてみました。
はてなブログのタイトルのフォントを変更する方法 日本語対応 - ミニマム コラム
カテゴリー
マリさんの記事を参考に、記事一覧のスターマーク廃止/カテゴリー一つだけ/左上に固定とスマホからの見栄えを重視。
レスポンシブにすると、カテゴリーがごちゃごちゃしたので、すっきりした（笑）。
ブログデザインをリニューアルしました！カスタマイズまとめ。 | Migaru-Days
吹き出し形式の会話
有名なSHIROMAさんの記事を参考にして、画像URLを張り付けて利用していますが、面倒臭いのが難点（苦笑）。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG
検索BOX
検索BOXを右上TOPの位置に固定し、スマホからの検索はやり易くなった？
はてなブログの検索窓をタイトル下に置く - tomi_kun’s diary
リンクの色
リンクの色をデフォルトの黒⇒青に変えてみました。
地味に効いているようで、踏んでくれる確率が上がったようです。
はてなブログでリンクの色などを変えるのでR | なるへそゴマのすけのなるへそな教室
完成
というわけで、二週間かけてようやくカスタマイズが、ほぼ完成しました。
スマホ版はかなり変わったと思いますが、皆さんはどのようにお感じになられましたか？
編集後記
はてなに移行後丸二年経過しましたが、凄腕ブロガーさん達にようやく追い付けたかなと（ホッ）。
特典航空券の知識には自信があるのですが、CSSやHTMLの知識はさっぱりで、今回も多くの先人たちの英知に学ばせて頂きました。
一方で、ブログは多くの方にご覧頂いてなんぼですが、搭乗記や宿泊記など誰でも書ける記事ばかりでは退屈するので、自分にしか出来ない何かを模索し続けたいと思います。
ブログは、趣味の一環そして「自己表現の場」でもあるので、今後ともご指導ご鞭撻の程よろしくお願いします。
