はてなブログ初心者専用!カスタマイズやデザイン方法 まとめ

f:id:TomoG:20190214171244j:plain

自分のはてなブログのデザインも落ち着いてきたので、今まではてなブログをカスタマイズやデザインでお世話になったサイトをご紹介していきたいと思います。

そのため全部を網羅しているわけではなく、自分が便利そうだと思ったものを紹介しているのでご了承ください。

今回ご紹介していくのは

・はてなブログ自体のデザインのカスタマイズ

・はてなブログの本文のデザイン

・はてなブログのシステムに関するカスタマイズ

の3点となっています。はてなブログのみを書いているため、他のブログサービスは考慮していませんので、ご注意ください。

初心者の方はまずこちらをご覧ください。

                                                                                                                      

はてなブログのカスタマイズ

f:id:TomoG:20181207214902j:plain
まずははてなブログで記事を書く前に、自分好みにはてなブログのデザインを変更したいと思います。これによって、はてなブログに限らずブログ更新のモチベーションが大きく変わります。

とりあえず見るところ

www.yukihy.com

はてなブログのデザインで困ったなということがあれば、このサイトを見ればほとんど解決します。それくらい丁寧かつ分かりやすくまとめられたサイトです。

またコードをコピペするだけで動くので、手軽にはてなブログのデザイン変更ができるというのも魅力の1つです。

このサイトのカスタマイズ方法を私のブログでも多いに使用しているので、みなさんも使ってみてください。

目次に戻る

Twitter関係

pea-nut.hatenablog.com

pea-nut.hatenablog.com

Twitter関係のカスタマイズはこの方の記事が大変参考になります。

訪問者を増やすために、SNSとりわけTwitterはとても拡散力があるので、必須と言える機能かもしれません。

目次に戻る

グローバルメニューの付け方

www.simonsnote.com

clrmemory.com

タイトルの下にカテゴリーメニューのことを、グローバルメニューやヘッダメニューと呼ぶらしいです!

これはデザインによって、内容が少しずつ違うので自分のブログにあったデザインを見つけるのが一番かと思います。

【はてなブログ タイトル下 カテゴリ】や【はてなブログ グローバルメニュー】と検索窓に打ち込めば、たくさんの種類のカスタマイズを紹介するサイトが見つかると思います。

目次に戻る

カテゴリのー階層化

blog.wackwack.net

ややこしくなったブログのカテゴリー欄がこれで小さくなります。1つのカテゴリしか書かないという人には不要ですが、大部分の人が必要になると思いますので入れておくといいと思います。

目次に戻る

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

iitaikotoha.hatenablog.com

こちらは、無料のはてなブログを利用している人限定です。ただしサイトにも書かれていますが、SEO的にもどうかという話があるので、導入する際は自己責任で導入してください。

目次に戻る

サイドメニューのカスタマイズ

blog.minimal-green.com

細かな箇所ではありますが、はてなブログのサイドメニューのタイトル等をオシャレにするカスタマイズがここのサイトにまとまっています。

目次に戻る

フッターのカスタマイズ

oretopi.hatenablog.jp

ブログの一番下のフッター部分のカスタマイズは皆忘れがちですが、つけておいた方がいいと思います。

主に技術系ブログの場合は、ここにプライバシーポリシーなんかを入れておくといいかもしれません。

目次に戻る

Aboutページのカスタマイズ

oretopi.hatenablog.jp

またオークニズムさんの記事になりますが、About記事のカスタマイズになります。

ちなみに私のAboutページはこちら

基本的にこのAboutページははてなブログなら全員見れます。ブログのトップページの後ろに/aboutというURLを追加するだけで見ることができます。

はてなブログをしっかり見てくれる人は見る箇所なので、ブロガーを目指す人は絶対にカスタマイズしておいてほしい部分です。

目次に戻る

トップへ戻るボタンの追加

hatebumaru.hatenablog.com

はてなブログで一番下までいった後、またトップまで戻ってサイドバーを見ようかなと思った時にスライドバーを一々動かすの読者としては非常に面倒。

そこでサイドバーを画面についてくるようにするか、このトップへ戻るボタンを追加するかどちらかで対処することになります。

はてなブログでどのような記事を書きたいかにもよりますが、サイドバーを追従させてしまうとスマホだと見にくくなってしまう場合もあるので、基本的にはトップへ戻るボタンでいいと思います。

特に初心者の方は分からないうちは、この方法の方が安全かも?

目次に戻る

更新日時を記載

www.tomomore.com

はてなブログに限らず記事を更新したら、それで終了という人は少ないと思います。基本的にはリライト・編集すると思います。

そのリライト・編集したとき編集日時を付けている人は、上記のリンクのようなおしゃれな更新日と編集日を表示させてみてはいかがでしょうか。

目次に戻る

読了時間の自動追加

seo-cafe.com

この記事は何分で読むことができるのかを自動で追加するカスタマイズ方法となります。これは離脱率を下げるようなので、ブログで稼ごうと思っている方は重要だと思います。 

目次に戻る

スマホに固定ボトムナビゲーションの付け方

www.bambi.pro

スマホで表示している時、画面の下に追随してくるメニューがあったら便利だと思ったことはありませんか?

上記の記事では、そのようなときに役に立つボトムナビゲーションの付け方についてのカスタマイズとなっています。

目次に戻る

Googleアドセンスの自動貼り付け

www.love-wife-life.com

はてなブログでGoogleアドセンスを利用している方も多いと思います。

その時、全ての記事に手作業で広告を貼り付けるのは非常に面倒な作業なので、上記の記事を参考に自動でGoogleアドセンスの広告を貼り付けてみてください。

目次に戻る

本文のカスタマイズ方法

f:id:TomoG:20200508143412j:plain

ブログのデザインが決まったところで、本文のデザインを決めていきます。

本文のデザインとは、例えば本記事でもある見出しのデザインとかの事を指しています。そんな本文のデザインについてご紹介していきます。

見出し・本文背景関係

www.yukihy.com

先ほども出てきたこのサイトです。

見出しについての記事はこちら

www.yukihy.com

記事本文の背景の記事はこちら

www.yukihy.com

目次に戻る

目次

mshitech.hatenablog.com

上記の記事はアニメーション付きで結構使いやすかった目次カスタマイズです(本ブログではバグるので見送り(泣))

目次に戻る

ページ内リンク

www.snow0303.com

こちらの記事が分かりやすく書かれています。

本記事でも使用しているように、記事を一部読み飛ばしたい時などにあったら便利なので、いれておくといいかもしれません。

ただし、ページ内リンクを使うとURLの最後が変わるのが少し気になるところではあります。

目次に戻る

吹き出し追加

www.notitle-weblog.com

これがあれば、読者の疑問等を質問のようにすることで共感を得られやすくなり、滞在時間が増える可能性もあります。

目次に戻る

合わせて読みたい!の追加

www.notitle-weblog.com

はてなブログだと埋め込みリンクでも見やすいのですが、更に見やすくなるようにカスタマイズするものです。

以下が例

目次に戻る

リンクのボタン風カスタマイズ

www.colmin.xyz

前節の合わせて読みたい以外にもボタン式のリンクにしたい場合、上記のサイズのカスタマイズがオススメとなります。

目次に戻る

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

rough-log.com

カエレバ・ヨメレバはブログでアフィリエイトをする上で、とても便利なツールとなっています。

本家様は下記リンク

本家様のデザインでも十分オシャレなんですが、より一層オシャレにカスタマイズする方法がまとめられています。

はてなブログでカエレバ・ヨメレバを使おうと思っている方は下記の記事を参考にしてみてください。

目次に戻る

引用部分のカスタマイズ

www.bambi.red

何かしらの情報を他のサイトから引用している人が多いと思います。その引用部分のカスタマイズ方法を書いてくださっているサイト様です。

目次に戻る

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

hituji-affiliate.com

スマホのアプリを紹介するときにとても便利なアプリーチのカスタマイズ方法をまとめて下さっているサイトです。

アプリーチ本家は下記リンク

目次に戻る

システム関係

f:id:TomoG:20200508143600j:plain

次にブログのデザインには関係がありませんが、様々な対策を裏でとる必要があります。そんなシステム関係のカスタマイズ方法について本章でご紹介します。

注意点として、システム関係を変更するため変更するときは自己責任となります。ご注意ください。

オフスクリーン画像の読み込み遅延

www.gipsyjazznyumon.com

オフスクリーン画像の読み込み遅延とは、ページの表示を早くするため画面外の画像読み込みを後にする方法となります。

読み込み速度が速いと読者も嬉しいため、SEO的にもよくなるため複雑ですが導入しようと思う方は導入してみてください。

目次に戻る

検索結果に表示させない記事

www.marorika.com

お問い合わせやプライパシーポリシーのページなど、ページとしての価値は非常に薄くても必要なページがあると思います。そのようなとき検索結果に表示させないことで、SEOに悪影響を与えません。

上記の記事はそのような記事に、個別に検索結果を表示させないようカスタマイズする方法をご紹介しています。

目次に戻る


その他、自分ではてなブログをカスタマイズしたい方は、ネットで調べるか本で学ぶかのどちらかで作っていくのが一番だと思います。