読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

当ブログで行ってきたはてなブログデザインカスタマイズまとめ!

Web制作
スポンサーリンク

PR:はてなブログのテーマ「Naked」を作成しました!デフォルトでもカスタマイズもしやすいテーマです。よろしければご利用ください!↓

www.yukihy.com

今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです!

数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。

新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。

 

カスタマイズ記事まとめ

見出しのデザイン

www.yukihy.com

見出しを変えるとブログの印象がかなり変わりますよね。上の記事では無機質なデザインに限定しているので、他人と被るなどの心配はご無用です(良い言い方)。

SNSシェアボタン関係

旧バージョン

www.yukihy.com

表示も早くなるということで、かなり多くの人に使っていただいています。ありがとうございます。

最重要なシェア数表示部分は、「寝ログ」運営者のわいひらさんのおかげであり、僕はそれをはてなブログでも使えるようにいじっただけなのですが、褒めてください笑。

 

新バージョン

注:上の記事は、古いものになっています。今後は、3Dボタンこちら

www.yukihy.com

 

フラットボタンはこちら

www.yukihy.com

 

からお願いします!

 

SNSフォローボタン 

www.yukihy.com

ついでにフォローボタンのも作りました。ボタンは「はてな購読」「Twitter」「Feedly」の3つです。何も考えずにやったので、フォントサイズがシェアボタンと合ってないですね…。近々修正するかもしれません。→修正しました!

 

メニュー関係

スマホ版のみ

www.yukihy.com

スマホ版は、下に改良版を作ったのでそちらをお使いください。

スマホ版でグローバルメニューのボタンがせまい(&足りない)と感じている方は、トグルメニューにすると多くのカテゴリを表示させることができます。

ボタンの反応が文字だけでなく横幅いっぱいになってしまっているので、近々修正します。→修正しました!

 

www.yukihy.com

上のトグルメニューですと、タイトル下に広告を入れたときに背景に色がついてしまうという欠点がありました。

その部分を修正したので、これからの方はこちらを使っていただけたらと思います。お手数おかけします。

 

グローバルメニューと両立してレスポンシブ対応にする

www.yukihy.com

ブラウザサイズが広いときはグローバルメニューで、ブラウザサイズが狭くなったら自動でトグルメニューに変わるというカスタマイズです。他のと比べてちょっと難易度は高め。

はてなブログは優秀なレスポンシブテーマが多いのですが、あんまりレスポンシブにしたブログを見ません。その理由の一つにグローバルメニューの扱いがやっかいだからというのがあるのではないかと勝手に思っています。

 

グローバルメニュー(ドロップダウン)&トグルメニューのレスポンシブ対応

www.yukihy.com

上のグローバル&トグルメニューのレスポンシブスタイルに、子カテゴリをつけれるようにドロップダウンメニューにしました。子カテゴリを使っている方は、こちらを使っていただくと美しく分かりやすくつくれると思います。

コピペで簡単につくれます。

 

グローバルメニュー(ドロップダウン)&スライドメニューのレスポンシブ対応 

www.yukihy.com

同じく子カテゴリをいれられるドロップダウンメニューと、横からのスライドメニューを組み合わせました。トグルメニューとは好みの問題でしかありませんが笑。

 

レスポンシブ対応な横スクロールメニュー

www.yukihy.com

最近ときどき見かける、スマホで見たときに横スクロールするメニューです。

 

スマホ版の下にいろんな固定ボタンをつける 

www.yukihy.com

 はてなブログのスマホ版のみ、下に各種ボタンをつけるカスタマイズです。具体的にコピペでできるのは

  • SNSシェアボタン
  • あとで読む系ボタン+TOPに戻るボタン
  • あとで読む系ボタン+Feedlyボタン+TOPに戻るボタン

の3つです。ある程度HTMLなどが分かる方はもっと応用できると思います。

 

スマホ版の下に回遊率を高める人気記事を含めた固定メニューバー

www.yukihy.com

 はてなブログのスマホ画面は、人気記事がなかなか見辛いところにあります。上の記事では、

  • HOME
  • 人気記事
  • カテゴリ
  • トップへ戻る

ボタンを固定メニューバーとしました。人気記事とカテゴリはスライドで表示するようにしています。

上に書いたトグルメニューの応用版といったところで、回遊率アップが狙えるかもしれません。

 

記事内で一部隠しておいてスライドで表示させる

www.yukihy.com

言葉にするのが難しいのですが、下のようなものです。ボタンを押してみてください。

押して!

こんな感じで、あらかじめ隠しておいて、ボタンを押したら表示させるというものです。

一旦CSSとjQueryを入れておけば、使いたい部分にほんのちょっとのコードを加えるだけでどこでもできるようになります。

 

サイドバーモジュールを組み合わせてタブメニューをつくる 

www.yukihy.com

サイドバーの情報量を多くしたいなと思ったのですが、あまりに詰め込むと長くなるのも嫌でした。

タブメニューにすると同じスペースでも多くの情報を詰め込めます!

 

はてなブログ公式目次機能をさらに使いやすく

www.yukihy.com

はてなブログには公式の目次を自動で入れてくれる機能があるのですが、普通のリストになってしまったり、若干使いづらい面があります。

ちょっとコードを足すだけでかなり使いやすくなるので、普段目次を使っている方はおすすめです。 

 

カエレバ・ヨメレバのカスタマイズ

www.yukihy.com

アマゾン商品だけでなく、楽天やヤフーショッピングにも簡単に商品リンクを貼ることができるヨメレバ・カエレバのデザインを改良するカスタマイズです。

はてなブログ以外の方でも使えるカスタマイズになります。

 

アプリーチのカスタマイズ

www.yukihy.com

ヨメレバ・カエレバのように統一感のある感じにしました。

アプリーチのおかげでアプリ紹介もすんなりできます。本当、サービスを作ってくださった方々に感謝です!

 

アドセンス中央配置

www.yukihy.com

 記事の中でアドセンスを中央に配置するという、それだけのものです。センタータグを入れるだけですし、このセンタータグもよくよく調べてみると、あんまり好ましくないらしいです^^;。

一応貼っておきますが非推奨。

 

スマホのヘッダーにちょっとした個性 

www.yukihy.com

簡単さだけを売りにしたコピペ一発カスタマイズ。後々見るとあんまりオシャレではないかも…。

 

記事中に背景をつけて見やすくする

www.yukihy.com

ブログに多くの画像を入れて目の休憩所みたいにしている方は多いですが、できることなら画像はあんまり入れたくないところ。

自分が強調したいところに色をつけたりするだけで、見易さは格段にアップするのではないかと思います。

 

Milliard関連記事プラグイン関係

関連記事表記にMilliard関連記事プラグインというものを使わせていただいています。その関係です。

 

サイドバーに固定する

www.yukihy.com

これは関連記事プラグインをサイドバーに入れ、スクロールしている間、サイドバーに固定されるというカスタマイズです。WordPressっぽくなります。

 

記事下に二列にする

www.yukihy.com

プラグインをリスト表記にしたとき、スペースが広く開いているのが気になりました。

2列にしたほうが良いなと思ったのでやってみたら、結構おさまりが良くなった気がします。

 

今の記事と同じカテゴリの記事を表示して関連記事っぽくする

www.yukihy.com

Milliard関連記事プラグインでのPage Speed Insightの計測結果が遅くなるのと、表示したい関連記事をある程度コントロールしたかったので、自分で作ってみました。

仕様は今開いているページの1つ目のカテゴリを含む記事を、ランダムに表示をするというものです。

 

Googleフォントを使ってみる

www.yukihy.com

タイトルなどの一部にGoogleフォントを使うと、同じ雰囲気になりがちなはてなブログを一気に印象を変えることができます。

やりすぎるとブログの読み込みが遅くなるので、ちょっと変えるのがポイントだと思います。

 

その他いろいろなカスタマイズ

www.yukihy.com

その他いろんなカスタマイズです。細々としているのでまとめました。できることは、

  • フォントの変更
  • トップ画面のみのフッターを消去する
  • 画像をセンタリングして線でくくる
  • サイドバーの見出しのデザイン
  • タイトル付近の色関係
  • リンクの色を青にする
  • 「続きを読む」の横幅を変える
  • サイドバーが下に回り込んだときに、2列になるようにする
  • レスポンシブ採用時の余白・文字の大きさの調整

などです。特にリンク色は青か他の色かで、クリック率が違うようなデータがあったような気がします。特にこだわりがないのであれば、やっておいたほうが良いような気がします。

 

 構成図

初めてGoogleディベロッパーツールを触ったときに、見方を練習するついでにはてなブログの構成図を作りました。ある程度デザインができる人向けで、全てを書いているわけではないですが。一応貼っておきます。

 

配置関係

www.yukihy.com

 文字関係

www.yukihy.com

 色の変更なんかはこれを見てやれば、あまり知識がなくてもできると思います。

 

行ってきた勉強法

HTML&CSS

www.yukihy.com

当然、本業の方に比べればなんてことのないものですが、何もできない人からすると大きな一歩だったりします。ブログをカスタマイズしていく過程でHTML、CSSの知識をつけることができました。

自分でできるようになると楽しいので、ぜひ参考になればと思います。 

 

jQuery

www.yukihy.com

jQueryに関してもてこずりながらやってみました。難易度は跳ね上がるような気がします。

これからやろうという方の参考になればと思います。

 

www.yukihy.com

4月の終わりぐらいに「Progate」というサービスを使い始めたのがきっかででした。本当におすすめです。

f:id:ftmaccho:20150804000319j:plain

8/3現在レベルはこんな感じです。いつになったら頭抱えるのやめるんだろう。

 

まとめ

以上でカスタマイズ終了です。また新しいカスタマイズをやり次第、この記事も更新していく予定です。

不具合や助言などがありましたら、教えてくださると助かります!