ひつじの雑記帳

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

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

f:id:codomisu:20170607215906p:plain

最終更新:2017年6月7日

当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えた。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PV・収益2万円を達成した。頂いたはてブの数も2000を超えた。

もちろん記事の質には意識してきたつもりだが、ここまで大きく成長できたのは「スマホデザイン」のお陰だと思っている。

ブログ運営・ウェブマーケティングにおいて大切なのは文章で、見た目・デザインは2の次だとよく言われるが私は決してそうだとは思わない。

Webデザインは文章の質を最大限に引き上げることもできるし、0にすることさえできると思っている。サイトの信頼度まであげることができるとも思っている。

はてなブログでは見た目・デザインの点でWordPressに劣ると言われがちだが、そんなのはただの錯覚か迷信だ。それに関してはこのブログが体現していると自分でも思っている。

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

 

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

今のデザインに満足している方も、これを機に一度自分のスマホデザインも見直してほしいと思う。

 

デザイン完成図

f:id:codomisu:20170506080225p:plain

f:id:codomisu:20170506080241p:plain

f:id:codomisu:20170506080246p:plain

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

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

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

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

ヘッダー

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

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

フッター

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

スポンサードリンク

 

コードをみる

最後に

時間があまりとれず急いで書いたため見づらい点や、日本語がおかしな点・コードの記載ミスなどがあるかもしれない。その際は適時コメントをしてくださると非常に助かる。
コピペしても上手く動かない場合や分からない点がある場合は、こどみす(@codomisu)までお願いします。

+ このデザインを採用する際は記事にして紹介してくれると嬉しいな♪

自力でカスタマイズできるようになるために

はてなブログでもWordPressでもテーマ作りは別として、カスタマイズ程度ならちょっとしたHTML・CSSの知識を持っておくだけで誰でも簡単にできるようになる。

自力でカスタマイズができる程度のHTML・CSSの知識をつけるならこの書籍がおすすめだ。

HTML5&CSS3レッスンブック

ブログ・サイト運営者には是非読んでいただきたい一冊。

 

 関連記事

コピペで簡単!アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術 - ひつじの雑記帳

 

追記情報

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