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