TomoGのごちゃまぜ倉庫

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

f:id:TomoG:20190214171244j:plain

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

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

 

今回ご紹介していくのは

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

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

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

 

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

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

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

とりあえず見るところ

www.yukihy.com

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

 

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

 

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

目次に戻る

Twitter関係

pea-nut.hatenablog.com

pea-nut.hatenablog.com

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

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

目次に戻る

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

www.simonsnote.com

www.sawalemontea.com

www.clrmemory.com

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

 

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

 

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

目次に戻る

カテゴリのー階層化

blog.wackwack.net

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

目次に戻る

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

iitaikotoha.hatenablog.com

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

目次に戻る

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

blog.minimal-green.com

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

目次に戻る

フッターのカスタマイズ

www.okuni.me

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

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

目次に戻る

Aboutページのカスタマイズ

www.okuni.me

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

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

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

 

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

目次に戻る

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

hatebumaru.hatenablog.com

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

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

 

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

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

目次に戻る

その他

www.marorika.com

SEO対策にブログ記事をnoindexにする方法があります。

 

その他の細かなカスタマイズは、ほとんどの場合【はてなブログ (導入したい機能)】と検索窓に入れれば、出てくるのでその都度導入してくのがいいと思います。

 

ただし、あまり多くのカスタマイズを導入すると、干渉して正常に描画されなくなったり、ページの読み込み速度が遅くなるなどのデメリットもあるので、ほどほどにした方がいいかと思います。

目次に戻る

本文のカスタマイズ方法

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

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

見出し・本文背景関係

www.yukihy.com

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

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

www.yukihy.com

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

www.yukihy.com

目次に戻る

目次

mshitech.hatenablog.com

kimix.hatenablog.com

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

2個目は主に女性向けのかわいい目次のカスタマイズ方法を紹介しているサイトです。

目次に戻る

ページ内リンク

www.snow0303.com

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

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

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

目次に戻る

吹き出し追加

www.notitle-weblog.com

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

目次に戻る

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

www.notitle-weblog.com

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

以下が例

目次に戻る

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

rough-log.com

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

https://kaereba.com/

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

目次に戻る

引用部分のカスタマイズ

www.bambi.red

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

目次に戻る

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

hituji-affiliate.com

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

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

アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

目次に戻る

 

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

2018/11/29 情報追加

2018/11/30 情報追加

2018/12/02 情報追加

2018/12/03 情報追加

2018/12/05 情報追加

2019/01/26 ページ全体修正・情報追加

2019/03/29 情報追加