ひつじの雑記帳

身近な豆知識ネタからちょっとギークなプログラミングネタまで

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集

f:id:codomisu:20170607215906p:plain

※記事更新から1年以上が経っているため情報が古い可能性があります

当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。

 

 

投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。

そこで今回は、当ブログひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。

 

当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。

 

 

デザイン完成図

f:id:codomisu:20170506080225p:plain

f:id:codomisu:20170506080241p:plain

f:id:codomisu:20170506080246p:plain

使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢献してくれたりもします。

はてなブログ・スマホデザインの最強カスタマイズ集

さて、ここからは当ブログで実践している「はてなブログのスマホデザインを超おしゃれにする最強のカスタマイズ」を淡々と紹介していく。これから紹介する全てのコードはもちろんコピペOK

ただ全部そのまま使うとこのブログと全く同じデザインになってしまうのでそこは注意です。

まず初めに

これから紹介するカスタマイズを適用する前に、FontAwesomeをブログに導入しましょう。

FontAwesomeを正しく導入しなければアイコンが正しく表示されません。

はてなブログにおけるFontAwesomeの導入方法については以下のサイトで分かりやすく紹介されているので、以下のサイトを参考に導入しましょう。

はてなブログでFont Awesomeを使う - MogHouse

ヘッダー

f:id:codomisu:20170506080252p:plain

今回実装していくパーツで一番おしゃれで特徴的なのがこのヘッダー部分かもしれないですね。

コードを挿入する場所

ヘッダー部分のコードは全て デザイン→スマートフォン→ヘッダ→タイトル下に挿入していく。紹介する順番通りに下に追記していけば間違いないと思います。

f:id:codomisu:20170506080300p:plain

スポンサードリンク

 

 

タイトル・ロゴ部分

タイトル・ロゴ

コードをみる

背景色を変える際は24・41・55行目のカラーコードを変更すればOK。ロゴ画像が用意できない場合は5行目のimgタグを消してブログ名を記入すれば良いです。ただの文字でもそれなりの整った見た目になるようにしてあります。

 

スライドメニュー部分

スライドメニュー

WordPressのテーマでもよく見る横スクロール型のナビゲーション。

ただ、これだけではスライドできるのかどうか分からない人もいるのでページ更新時に自動ですこしだけスクロールさせて、気づかせるようにした。

横スクロールナビゲーション

コードをみる

 

トグルメニュー部分

タイトルの左のボタンを押すとメニューが開くようになっています。よくある横並びのメニューを採用しているのでスッキリとまとまった見た目になっているかと思います。
※メニューの数は偶数個でないと表示が崩れます。

トグルメニュー

コードをみる

 

細いおすすめ記事ラベル

おすすめ記事ラベル

メニュー下の細いラベル。おすすめの記事へのリンクやLINE@へのリンクを貼ったりするのに丁度いいです。

コードをみる

 

スライダー部分

スライダー部分

よく教えてほしいと依頼がくるスライダー。実はこのスライダーは「bxSlider」というjQueryプラグインを使えば簡単に実装ができます。このブログではおすすめ記事の紹介ゾーンとして使っています。
もちろん下のコードをコピペするだけでも使えるが、その他、オプションによっていろいろ機能を設定ことができるので興味がある人はやってみるといいかもしれません。オプションについてはこちらの記事が参考になります。

スポンサードリンク

 

コードをみる

記事一覧(トップページ)

記事一覧

ヘッダー部分はここまでで、お次は記事一覧(トップページ)のカスタマイズ。タイトル・日付・サムネ・概要の文字の大きさや余白等を見やすいように最適化しています。

コードをみる

記事ページ

記事ページ

コードを挿入する場所

コード挿入場所

ここから紹介するコードは、デザイン→スマートフォン→記事→記事上(下)にコピペしていく。記事上に追加するか記事下に追加するかは適時指定していく。

 

タイトル周りの各種調整

各種調整

デフォルトではタイトルの行間や文字の大きさがいまいちなので見やすいように調整する。

コードをみる

 

フラットなシェアボタン

シェアボタン

フラットでシンプルなシェアボタン。LINEやGooglePlusのボタンも設置しているブログが多くあるが、それらのサービスに共有する場面は滅多にないので必要最低限のボタンのみにした。

※今のご時世fontタグなんて使う奴いるのかと自分でも思っているが面倒くさかったから使った。許して。

下記のコードを記事下+任意で記事上に挿入する。

コードをみる

下記のシェア数取得用スクリプトを記事下に挿入する。(必須)

コードを見る

 

見出し3種

記事中の見出し

お次は記事中の見出し。見出しデザインに関してもコピペするのは問題ありませんが、このサイトでたくさんの種類が見やすく紹介されているのでここで自分の好みにあった見出しデザインを探してみるのもいいかもしれません。

コードをみる
目次部分

目次

コードをみる

 

フッター

f:id:codomisu:20170506080521p:plain

コードを挿入する場所

コード挿入場所

ここから紹介するコードは、デザイン→スマートフォン→フッタ→ページャ下 に挿入していく。また、ヘッダーと同じように紹介する順番にコピペ(下に追加)していきます。

不要な要素を全て非表示

デフォルトの状態ではフッターにはてなへのリンクやダッシュボードなど不要なものがあるのでそれらを一気に非表示にする。今回はプロフィールの下にフォローボタンを入れたいのでプロフィールも消しておきます。

コードをみる

 

フッターの見出し部分

フッターの見出し

コードをみる

 

プロフィール・フォローボタン部分

フォローボタン

デフォルトではプロフィールははてなの設定でしか弄れないが、ここではHTMLコードを後から追記しているので、名前も説明も自由に変更することができる。
フォローボタンは、フラットでちょっとオシャレに仕上げてみた。コピペする際には、コード中のリンク等はしっかりと記入してから使うことに注意です。

コードをみる

 

検索ボックス部分

検索ボックス

検索ボックスの外枠の色を若干変えて太くする謎のこだわり。

コードをみる

 

注目記事部分

注目記事

コードをみる

 

コードを挿入する場所

最後のフッターに関しては、デザイン→スマートフォン→フッタ→フッタに挿入する。

f:id:codomisu:20170506080622p:plain

上へ戻るボタン&フッター

フッター

上へ戻るボタンは追尾のものを使っているブログをよく見るが、個人的にはこれで十分だと思っている。
フッターは背景色を変えて全体のデザインに合わせたスッキリとした見た目に。

スポンサードリンク

 

コードをみる

最後に

時間があまりとれず急いで書いたため見づらい点や、日本語がおかしな点・コードの記載ミスなどがあるかもしれないませんが。その際は適時コメントをしてくださると非常に助かります。

 

おわり。

 

 

追記情報

2017/05/05 23:55
  • スライドメニュー部分の記述ミス・フォローボタン部分の記述し忘れを修正・追加しました。
  • ブログタイトルを文字にした場合に文字色が変わってしまう現象を修正しました。
  • トグルメニューを紹介する順序が間違っていたために、上手くメニューが開かないという現象が起きていました。トグルメニューはスライドメニュー(横スクロールのナビゲーション)のコードのに追加するようにお願いします。
  • トグルメニューのCSSコードに関して記述し忘れにより、文字が中央寄せされていなかったためコードを追加しました。
2017/05/06 1:43
  • 目次の左に余白ができてしまう問題について修正コードを追記しました。