男子大学生のひとりよがりブログ

名前:わたMAN   職業:大学生  時事ネタや自分の趣味などさまざまなジャンルを書くかもしれませんがお許しください。

【ブロガー推奨】はてなブログのデザインカスタマイズで参考にした記事まとめ!

スポンサードリンク

こんにちは!わたMANです!

 

f:id:herawata:20171030060809p:plain

ブログの第一印象は非常に重要であると気づいた!

今までブログのデザインに手を加えたことがほとんどありませんでした。

あくまでも記事をしっかり書いていればアクセスは自然にUPするだろうと思っていたので、記事を書くことに専念していました。

しかしふと考えてみたら、人気ブロガーさんや短期間で結果を出している人のブログをみたら、記事だけではなくデザインもしっかりと凝っているのです。

やはり「人は第一印象で決まる」という言葉があるように、ブログも第一印象が凄く重要なのではないかと思いました。

 

そして、いざデザインのカスタマイズをしてみたら意外と夢中になってしまい、気付いたら丸一日潰してしまいました。

そこで今回は僕がデザインをカスタマイズする際に非常に参考になった記事をいくつか紹介したいと思います。

 

スマホ版カスタマイズ

スマホ版はひつじの雑記帳さんの記事を参考にしながらカスタマイズしました。

一通りのことは載っているので、ほとんどコピペするだけで立派なデザインが完成してしまいます。本当に最強版です。物凄く感謝しています。

 

ですがさすがにコピペだけで終わると、一式デザインが被ってしまうのでフォントや色を変えるなどの工夫は必要だと思います。

hitsuzi.hatenablog.com

スマホ版はひつじさんの記事だけで終わってしまいましたが、その他の細かい所は今後やっていくつもりです。

 

トップページや記事ページ等の設定はこちらを参考に。

www.ituore.com

PC版カスタマイズ

ドロップダウンメニューとトグルメニュー

スマホ版と同じようにドロップダウンメニューとトグルメニューを表示したかったので参考にさせていただきました。

www.yukihy.com

デザインカスタマイズ記事紹介

正直、本記事よりこちらの記事を見た方が良いのではないかと思うほど情報量が多いです。PC版のカスタマイズをする際はぜひ参考にした方がいいです。

www.notitle-weblog.com

読者登録ボタン設置

読者登録ボタンってはてなブログの公式のものだと小さくてあまり目立たないですよね。もっと目立たせたい方はこちらの記事を参考にしてください。

english-apple-diy.hatenablog.com

はてなブログで使えるアイコン一覧

メニューボタンやシェアボタンのアイコンを変更したいとき参考になります。

この記事を見たら、はてなブログで使用できるアイコンが物凄くあることが分かります。もっと有効活用していきたいです。

shirokai.hatenablog.com

ソーシャルボタンのシェア数付き設置

シェアボタンに関する記事はいくつも見てきましたが、こちらの記事のデザインが一番好きだったので参考にさせて頂きました。

多くの方がこのシェアボタンのデザインを採用している印象なので、ぜひ参考にしてみてはいかがでしょうか。

www.yukihy.com

サイドバーの一番下にあるモジュール固定

サイドバーって記事を下の方までスクロールすると見えなくなりますよね。

こちらの記事を参考にすることで、下までスクロールしてもサイドバーの一番下にあるモジュールがずっとついてきます。意外と便利です。

www.no-overtime-day.com

ヘッダー・タイトルの余白を消す方法

ヘッダーの画像はデフォルトで横1000ピクセル✕縦200ピクセルに設定されているそうです。それ以外の解像度の画像を挿入すると、アスペクト比の関係で上下左右に余白ができてしまいます。そんなときに下記の記事を参考にしてください。

sprout-wings.hatenablog.com

関連記事を記事下に表示

はてなブログの公式で記事下に関連記事を表示できるようになりました。

ワンクリックで出来るので、ぜひ参考にしてみてください。

staff.hatenablog.com

関連記事を記事下よりも下に移動

上記のやり方で関連記事を記事下に設定すると、シェアボタンより上に関連記事が来てしまい結構邪魔になります。そんなときはこちらの記事を参考に。

www.notitle-weblog.com

共通カスタマイズ

トップページを記事一覧にする

はてなブログの公式でトップページを記事一覧で表示できます。

一つの記事を全文表示にしている人は一覧表示にした方が回遊率が上がると思うので参考にしてみてください。

staff.hatenablog.com

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

アフィリエイトの広告を綺麗に表示するテクニックとして、カエレバ・ヨメレバというものがあります。

詳しく知りたい方はこちら

【amazon】ついにヨメレバ・カエレバを導入!かつCSSでデザインもカスタマイズしたよ【楽天】 - アンダースタンド!

 

そのヨメレバ・カエレバの表示をオシャレにカスタマイズするためは下記の記事を参考にしてみてください。

www.tsubasa-note.blog

グーグルアドセンスの広告を記事中に自動挿入

ブログで収入を稼ぐのに欠かせないのがグーグルアドセンスですが、アドセンスの広告を記事中に挿入する方法が記載されています。

初めての人でも分かるようかなり丁寧に説明してくれています。

収益がなかなか発生しない人は広告の位置を変更してみるのもいいかもしれません。

www.kanamalu.com

 

まとめ

f:id:herawata:20171030060256p:plain

一日で大分変わった気がします。。。

今回は自分がデザインをカスタマイズする際、参考にさせてもらった記事を紹介しました。まだまだカスタマイズする余地はありますし、他にも参考になる記事があったら紹介していきたいと思います。

 

最後まで読んでくれてありがとうございました。

よかったら読者登録よろしくお願いします。

 

ネットじゃ分かんないという方は本を参考にしてみるのもいいかもしれません。

 

あなただけのお気に入りのブログを作成しましょう

最大の魅力は 《 月額300円(税抜)で 完全広告非表示!》
PC・スマホ・タブレットなど、すべての媒体に対応しています。
ブログサービスでは破格の値段で、広告非表示にすることが可能です。