※記事更新から1年以上が経っているため情報が古い可能性があります
当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。
投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。
そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。
当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。
デザイン完成図
使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢献してくれたりもします。
はてなブログ・スマホデザインの最強カスタマイズ集
さて、ここからは当ブログで実践している「はてなブログのスマホデザインを超おしゃれにする最強のカスタマイズ」を淡々と紹介していく。これから紹介する全てのコードはもちろんコピペOK。
ただ全部そのまま使うとこのブログと全く同じデザインになってしまうのでそこは注意です。
まず初めに
これから紹介するカスタマイズを適用する前に、FontAwesomeをブログに導入しましょう。
FontAwesomeを正しく導入しなければアイコンが正しく表示されません。
はてなブログにおけるFontAwesomeの導入方法については以下のサイトで分かりやすく紹介されているので、以下のサイトを参考に導入しましょう。
はてなブログでFont Awesomeを使う - MogHouse
ヘッダー
今回実装していくパーツで一番おしゃれで特徴的なのがこのヘッダー部分かもしれないですね。
コードを挿入する場所
ヘッダー部分のコードは全て デザイン→スマートフォン→ヘッダ→タイトル下に挿入していく。紹介する順番通りに下に追記していけば間違いないと思います。
タイトル・ロゴ部分
背景色を変える際は24・41・55行目のカラーコードを変更すればOK。ロゴ画像が用意できない場合は5行目のimgタグを消してブログ名を記入すれば良いです。ただの文字でもそれなりの整った見た目になるようにしてあります。
スライドメニュー部分
WordPressのテーマでもよく見る横スクロール型のナビゲーション。
ただ、これだけではスライドできるのかどうか分からない人もいるのでページ更新時に自動ですこしだけスクロールさせて、気づかせるようにした。
トグルメニュー部分
タイトルの左のボタンを押すとメニューが開くようになっています。よくある横並びのメニューを採用しているのでスッキリとまとまった見た目になっているかと思います。
※メニューの数は偶数個でないと表示が崩れます。
細いおすすめ記事ラベル
メニュー下の細いラベル。おすすめの記事へのリンクやLINE@へのリンクを貼ったりするのに丁度いいです。
スライダー部分
よく教えてほしいと依頼がくるスライダー。実はこのスライダーは「bxSlider」というjQueryプラグインを使えば簡単に実装ができます。このブログではおすすめ記事の紹介ゾーンとして使っています。
もちろん下のコードをコピペするだけでも使えるが、その他、オプションによっていろいろ機能を設定ことができるので興味がある人はやってみるといいかもしれません。オプションについてはこちらの記事が参考になります。
記事一覧（トップページ）
ヘッダー部分はここまでで、お次は記事一覧(トップページ)のカスタマイズ。タイトル・日付・サムネ・概要の文字の大きさや余白等を見やすいように最適化しています。
記事ページ
コードを挿入する場所
ここから紹介するコードは、デザイン→スマートフォン→記事→記事上(下)にコピペしていく。記事上に追加するか記事下に追加するかは適時指定していく。
タイトル周りの各種調整
デフォルトではタイトルの行間や文字の大きさがいまいちなので見やすいように調整する。
フラットなシェアボタン
フラットでシンプルなシェアボタン。LINEやGooglePlusのボタンも設置しているブログが多くあるが、それらのサービスに共有する場面は滅多にないので必要最低限のボタンのみにした。
※今のご時世fontタグなんて使う奴いるのかと自分でも思っているが面倒くさかったから使った。許して。
下記のコードを記事下+任意で記事上に挿入する。
下記のシェア数取得用スクリプトを記事下に挿入する。(必須)
見出し3種
お次は記事中の見出し。見出しデザインに関してもコピペするのは問題ありませんが、このサイトでたくさんの種類が見やすく紹介されているのでここで自分の好みにあった見出しデザインを探してみるのもいいかもしれません。
目次部分
フッター
コードを挿入する場所
ここから紹介するコードは、デザイン→スマートフォン→フッタ→ページャ下 に挿入していく。また、ヘッダーと同じように紹介する順番にコピペ(下に追加)していきます。
不要な要素を全て非表示
デフォルトの状態ではフッターにはてなへのリンクやダッシュボードなど不要なものがあるのでそれらを一気に非表示にする。今回はプロフィールの下にフォローボタンを入れたいのでプロフィールも消しておきます。
フッターの見出し部分
プロフィール・フォローボタン部分
デフォルトではプロフィールははてなの設定でしか弄れないが、ここではHTMLコードを後から追記しているので、名前も説明も自由に変更することができる。
フォローボタンは、フラットでちょっとオシャレに仕上げてみた。コピペする際には、コード中のリンク等はしっかりと記入してから使うことに注意です。
検索ボックス部分
検索ボックスの外枠の色を若干変えて太くする謎のこだわり。
注目記事部分
コードを挿入する場所
最後のフッターに関しては、デザイン→スマートフォン→フッタ→フッタに挿入する。
上へ戻るボタン&フッター
上へ戻るボタンは追尾のものを使っているブログをよく見るが、個人的にはこれで十分だと思っている。
フッターは背景色を変えて全体のデザインに合わせたスッキリとした見た目に。
最後に
時間があまりとれず急いで書いたため見づらい点や、日本語がおかしな点・コードの記載ミスなどがあるかもしれないませんが。その際は適時コメントをしてくださると非常に助かります。
おわり。
追記情報
2017/05/05 23:55
- スライドメニュー部分の記述ミス・フォローボタン部分の記述し忘れを修正・追加しました。
- ブログタイトルを文字にした場合に文字色が変わってしまう現象を修正しました。
- トグルメニューを紹介する順序が間違っていたために、上手くメニューが開かないという現象が起きていました。トグルメニューはスライドメニュー(横スクロールのナビゲーション)のコードの後に追加するようにお願いします。
- トグルメニューのCSSコードに関して記述し忘れにより、文字が中央寄せされていなかったためコードを追加しました。
2017/05/06 1:43
- 目次の左に余白ができてしまう問題について修正コードを追記しました。