ブログ

    はてなブログのカスタマイズ集!すべてコピペでOK

    はてなブログのカスタマイズ集!すべてコピペでOK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    グローバルメニューの設置

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

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

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

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

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

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

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

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

    SNSボタンをおしゃれにカスタマイズ

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

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

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

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

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

    個人的に必要だと思いませんが、簡単に設置できるし軽いので入れてもいいかなと思います。

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

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

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

     

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

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

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

    上に戻るボタンを設置

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

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

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

    目次のカスタマイズ

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

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

    見出しのカスタマイズ

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

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

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

    リンクを目立たせる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    吹き出しのカスタマイズ

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

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

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

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

    表(テーブル)の設定

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

    シンプルなものから色付きまで、いろいろと紹介しています。

    はてなブログ高速化

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

    カスタムURLの使い方

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

    あえて日本語表記でもいいですが、URLは英語で書けたらそれが一番いいですね。

    ページ内リンク

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

    最後に

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

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

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