はてなブログコピペカスタマイズのまとめ

当サイトは広告、アフィリエイトを含みます

私はInnocentを使っているのですが、そのまま使っても結構かっこいいですよね。

私はあまりカスタマイズに時間を掛けたくない方なので、あまりやっていませんが、それでもちょっとは付け加えたいところがあるんですよね。

また、アドセンスの広告位置を変えて収益アップを狙ったり・・・

今日は、私がやってきたカスタマイズのすべてを紹介します。

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

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

せっかく自分のブログを持っているので、理想のサイトにしたいですよね。

まぁやりすぎは良くないですが、ある程度はカスタマイズしないとユーザビリティが悪いと、離脱者が多くなるので是非やっておきましょう。

私はInnocentを使っているので(このブログはWordpressです)そこまで過激にカスタマイズしなくても良かったですが、テーマによっては結構カスタマイズが必要かもしれないですね。

各種設定が面倒だし、分からないという人は、こちらの「1発コピペで完了!はてなブログInnocentのカスタマイズテンプレート」を使えば2分でサイトをかっこよくできます。

その他の手作業が必要はカスタマイズは、下記を参考にしてください。

トップページをカード型にカスタマイズ

はてなブログのトップページをカード型にする カスタマイズ

TOPページをカード型にするとちょっとwordpressっぽくなりますよね。こちらトップページをカード型にしてwordpressっぽく見せる方法をどうぞ。

はてなブログのオリジナルはすっっごくシンプルなので、カード型にした方が見やすいし、wordpressのサイトはほぼ全てこのスタイルなのでおしゃれです。

ブログタイトルのカスタマイズ

ブログタイトルのカスタマイズ

一番重要と言っても過言でないブログのタイトルです。一番初めに読者の目に留まるし、ロゴ的な意味合いもあるので、おしゃれにしたりインパクトがあるものにすると覚えてもらいやすいですね。

こちら、ブログタイトルのカスタマイズ・コピペで簡単にできる!を参考にどうぞ。

グローバルメニューのカスタマイズ

はてなブログ Innocent グローバルメニューを中央に寄せる方法

グローバルメニューはナビゲーションバーなどと呼ばれることもあります。ページ上部にメニューがあると読者も読みたい記事を探しやすいし、回遊率、滞在時間も増えるので、絶対入れておきたいですね。

こちらInnocentにグローバルメニューをコピペで設置する方法にほぼコピペで出来る方法を紹介しています。

変更する点は、リンク先やカテゴリ名を自分にものにするくらいです。

ヘッダーにおすすめ記事を設置

はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える

ヘッダーにおすすめ記事を入れるとwordpressっぽいですね。収益化ページなどのキラーページや、特に呼んでほしい記事を入れておくとクリックされやすいです。

ページ上部にあるので、画像は出来るだけ圧縮した方が読み込み速度も落ちにくくなります。

はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法

SNSボタンのカスタマイズ

はてなブログのSNSボタンは重いし目立たないので、カスタマイズする人が多いですね。こちらも簡単にコピペで出来るので、是非設置しておきましょう。

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

はてなブログのSNSボタンをおしゃれにカスタマイズする方法 

はてなブログ シェアボタンのカスタマイズ カウント付き

次はカウント付きのボタンです。上で紹介したモノよりも重くなるので、どうしても数字を表示したい人はこちらをやってもいいと思います。

カウント付きシェアボタンのカスタマイズ

読了時間を表示するカスタマイズ

はてなブログに読了時間を表示するカスタマイズ

個人的に必要だと思いませんが、簡単に設置できるし軽いので入れてもいいかなと思います。一時期多く人が読了時間を表示していましたが、ここ最近はそこまで多くないですね。

アイキャッチ画像の設定とカスタマイズ

はてなブログ アイキャッチ画像のカスタマイズ

Canvaという編集サイトを使います。私は有料プランですが、無料でも全然使えます。有料だとより多くの画像が使えたり、圧縮もできたり、画像のサイズ変更などできるようになります。

アイキャッチを設定すると、SNSで拡散されやすくなるし、トップページの記事一覧にも画像が表示されるので読者を惹きつけやすいです。

記事タイトルのカスタマイズ

はてなブログ 記事タイトルのカスタマイズ6

記事のタイトルがださい・・・という人は、記事タイトルのカスタマイズを参考にカスタマイズしてみて下さい。テーマによってはデフォルトでも問題ないですが、テーマによってはちょっとカッコ悪い感じですよね。

上に戻るボタンを設置

はてなブログ 上に戻るボタン カスタマイズ

これ、必須ですよね。このボタンがないと上に戻る時スクロールしないといけません。それって、面倒くさいですよね。

コピペで簡単にできるので、数分で設置できます。

はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法 

目次のカスタマイズ

はてなブログ・目次のカスタマイズ2

はてなブログの目次は、良い言い方をしたらシンプルですよね。別の言葉で言うとダサい・・・。いくつかの種類を用意しているので、コピペでやっちゃいましょう。

見出しのカスタマイズ

はてなブログ 見出しのカスタマイズ3

流し読みをする人もいるので、見出しをかっこよくしていたら目に留まりやすく。滞在時間も上がりますね。

色々な種類の見出しを紹介しているので、コピペしてください。

リンクを目立たせる

はてなブログ リンクを枠で囲って目立たせるカスタマイズ

参考画像は「関連記事」ですが、「あわせて読みたい」など文を自由に変えることが出来ます。もちろん色も変えれます。

回遊率がアップするので是非導入しましょう。

サイドバーに画像付きリンクを貼る方法

はてなブログのサイドバーに画像付きリンクを貼る方法

サイドバーに画像を貼って、リンクの設定をする方法です。目立たせたい記事を載せたら、PVも上がりますね。

サイドバーに広告を貼る方法

はてなブログのサイドバーにバナー広告を貼る方法

バナー広告やアドセンス広告などをサイドバーに貼り付ける方法です。簡単にできますよ。

サイドバーの追従カスタマイズ

任意のサイドバーを追従する方法です。読者がページ下部に行くと、サイドバーって表示されないですよね?これを常に表示させる方法です。

サイドバーのカスタマイズ

はてなブログ サイドバーカスタマイズ<左がデフォルトで右がカスタマイズ後です>

線を入れたり、文字色を変えたりするカスタマイズです。

プライバシーポリシーをフッターに入れる方法です。

はてなブログ プライバシーポリシー設置 カスタマイズ

プライバシーポリシーは必須項目なので。必ずやりましょう。

吹き出しのカスタマイズ

はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

画像を用意したりとちょっと時間がかかるカスタマイズですが、一度設定したら簡単に吹き出しが使えるようになります。

吹き出しを使うと読みやすいし、読者もマンガっぽく読めるので滞在時間も上がると思います。

蛍光マーカーで文字を装飾する

線の大きさや色も変更できます。一度設定したら次はボタン(クリック)一つで使えるので、わざわざHTML編集で記述する必要はありません。

表(テーブル)の設定

はてなブログで表(テーブル)を使う方法

シンプルなものから色付きまで、いろいろと紹介しています。表は意外に使う機会が多いので、是非設定しておきましょう。

はてなブログ高速化

はてなブログは遅いですが、やりようによってはそこそこ早くなります。ページが重いと読者が離脱しやすくなるので、必ず対応しておきましょう。

カスタムURLの使い方

はてなブログ カスタムURLの設定方法

あえて日本語表記でもいいですが、URLは英語で書けたらそれが一番いいですね。グーグル、読者、そして自分が分かりやすいURLにすればSEO的にプラスです。

ページ内リンク

ページ上部から下部へ、下部から上部へなどのページの中をクリック一つで移動するカスタマイズです。

最後に

今後も記事が増えたら追加していくので、ブックマークにでも入れて時々このページをのぞいてみて下さい。

はてなブログ収益化方法のまとめも一緒にどうぞ!

ちなみにCSSやHTMLを学びたい人は、こちらを参考にどうぞ。有名ブロガーもおすすめしている教科書です。