・はてなブログのブログカスタマイズ方法が分かる！
・カスタマイズすべきポイントが分かる！
・カスタマイズするメリットが分かる！
はてなブログを４年程使っているので、色々とアドバイスできるかなと思います。
というわけで、本題について見ていきましょう。
はてなブログをカスタマイズしよう！見やすいブログでアクセス数爆伸び！
はてなブログのカスタマイズしておくべきポイントについて解説していきます。5分ぐらいで読めます。
カスタマイズしておいたほうがいいポイント全リスト
まずは、カスタマイズしておいたほうがいい重要ポイントからとお話ししていきます。
いくつかカスタマイズしますので全てできると僕のブログのように、お洒落で見やすいブログに仕上げることができます。
画像はガサガサしてて見にくいですが、そこは勘弁ください笑。お洒落で見やすいブログに必ず仕上がるはずですよ。
というわけで、一番から五番まで順に画像付きでお話ししていきますので、頑張っておいついてきてくださいね！
① はてなヘッダーのカスタマイズ
② はてなフッターのカスタマイズ
③ サイドバーのカラーカスタマイズ
④ サイドバーをお洒落画像に変える
⑤ トップページの記事をカード化する
① ヘッダーのカスタマイズ
まずは、一番のはてなヘッダーからお洒落にカスタマイズしていきましょう。
はじめに、カスタマイズするためにデザインのカスタマイズのヘッダー画像を開きます。
赤枠の画像だけ表示にまるをして、画像をアップロードからヘッダーにしたい画像を指定します。
ヘッダー画像を指定する際は、下記注意点を満たせているか確認しておくようにしましょう。
・画像の種類が JPEG 又は PNG であること
・画像の縦サイズが 1000px であること
・画像の横サイズが 200px であること
準備ができましたら、画像を指定して今どのように見えているのか確認するようにしましょう。
パソコン画面（赤枠）では綺麗に見えますが、携帯画面（青枠）では画像がはみ出てて見えるかなと思います。
というわけで、携帯画面の見栄えを整えるために、まず赤枠のスマートフォンアイコンの詳細設定のレスポンシブデザインにチェックをします。
最後に、画像上下の余白コードとヘッダー対策コードを先ほどのカスタマイズにあるデザインCSS に添付すれば完了です。
/* タイトル画像上下の余白 */
#blog-title {
margin: 0 auto;
padding: 0;
}
/* ヘッダー対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}
② フッターのカスタマイズ
では、二番のトップページ最下部にあるフッターのカスタマイズもこなしていきましょう。
まずは、はてなブログのデフォルトフッターを消していきます。下記のフッター削除コードを赤枠のカスタマイズの デザインCSS に添付します。
/* footerを消す */
#footer {
display: none;
}
続けて、オリジナルのフッターを設定するためにオリジナルコードをカスタマイズのフッターに添付します。
<div id="copyright">©ここに好きな文字を入力する</div>
最後に、オリジナルコードの文字の大きさや文字色を調整するコードを赤枠のカスタマイズの デザインCSS に添付すれば完了です。
/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: #000000;/*背景色*/
font-size: 10px;
color:#ffffff;/*文字の色*/
}
③ トプペのサイドバーカラー
トップページのサイドバーもシンプルすぎて見にくいのですきな色にカスタマイズしてしまいましょう。
カスタマイズは本当簡単でして下記コードをカスタマイズの デザインCSS に添付するだけです。
/* サイドバータイトル */
.hatena-module-title {
position: relative;
color: #000000;/* 文字色 */
font-size: 120%;/* 文字サイズ */
font-weight: bold;/* 太字 */
margin-bottom: 15px;/* 下余白 */
padding: .25em 0 .25em 0;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;/* フォント指定 */
border-bottom: 1px solid #63e0cd;/* 下線 */
}
④ トプぺのサイドバーを画像化
サイドバーを画像化できるとよりお洒落です。四番みたいになり当ブログでも取り入れています。
というわけで、サイドバーの画像化もお話ししていきます。まずは、サイドバーにしたい画像（縦200px・横650px）を何もない新しい記事上に添付します。
飛ばしたいサイトの URL をコピーします。当ブログではブログのサイトに飛ばしたいので赤枠の URL をコピーしました。
先ほどの記事を開いて、①画像をクリックして②リンクアイコンをクリックします。
①コピーした URL を添付して②プレビューをクリック③選択範囲にチェック④選択した形式でリンクを挿入します。
挿入できたら HTML 編集の赤枠のリンクをまるごとコピーします。
デザインのカスタマイズのサイドバーのモジュールの追加をクリックします。
最後に、①HTMLをクリック②サイドバーのタイトルを付ける③まるごとコピーしたリンクを添付④適用をクリック⑤変更を保存すれば完了です。
⑤ トプペの記事をカード化する
最後に、五番の記事をカード化する方法についてお話ししていきます。
本当は有料版の はてなPro に課金すれば、下記ページで簡単にカード化にできるのですが、無課金の場合はできないので今回は無課金でのカスタマイズ方法についてお話ししていきます。
というわけで、まずはブログのトップページリンクとアーカイブページリンクを自分のリンクに置き換えてまるまるコピーします。
<script type="text/javascript"> if(location.href === "/*ブログのトップページのリンク*/") { location.href = "/*ブログのアーカイブページのリンク*/" } </script>
最後に、設定の詳細設定の head要素にメタデータを追加 に先ほどのコードを添付すれば完了です。お疲れ様でした。
ブログのカスタマイズに関するよくある質問！徹底調査してきました！
ブログのカスタマイズに関するよくある質問について解説していきます。5分ぐらいで読めます。
a
a
a
ブログをカスタマイズするメリットって一体なに？
ブログをカスタマイズするメリットってあるの？逆効果なんじゃないの？と思う方もいるでしょう。
というわけで、カスタマイズするメリット・デメリットについて調査してきたので、サクッとお話ししていきます。
カスタマイズするメリット・デメリットは下記のとおりでして、メリットが豊富にあるということが分かるかなと思います。
| ブログカスタマイズ | |
| デメリット | ・ブログの読み込み速度ダウン ・カスタマイズが面倒臭い |
| メリット | ・ブログのモチベーションアップ ・ブログの見やすさアップ ・読者の滞在時間アップ ・読者の好感度アップ |
カスタマイズするのが面倒くさいというデメリットもありますが、これは避けられないので許容するしかないです。
ブログがお洒落になればモチベーションも上がって続けやすくもなりますし、かつ読者の好感度も上げてくれるので一石二鳥なのかなと思います。
場合によっては、読者がファンになってより多く読んでもらえる可能性もあるので、カスタマイズは基本的にしておいたほうがいいでしょう。
はてなの広告をカスタマイズで消すことができる？
はてな無料版を使っているとはてなの広告がデカデカと表示されてカスタマイズで消したいと思う方もいるでしょう。
というわけで、カスタマイズではてなの広告を消すことができるのかについて調査してきたので、サクッとお話ししていきます。
調べた結果は下記のとおりでして、はてなの無料版でも消去できるということが分かりました。
・無料版の広告はカスタマイズで消去できる
・有料版に課金すれば簡単に広告消去できる
・デメリットは読み込み速度が低下する
但し、ブログの読み込み速度が低下するというデメリットがありますので、カスタマイズする際はよく考えなければいけません。
読み込み速度が低下しても問題ないという方は「」のサイトを見れば、カスタマイズする方法が分かるかなと思います。
因みに、読み込み速度が低下すると読者をイラつかせて離脱率を高めてしまうので、当ブログでははてな広告のカスタマイズはしていてません。
ブログで表と図を使うにはどうすればいい？
表（テーブル）や図（グラフ）が使えればブログももっと見やすくなると思う方もいるでしょう。
というわけで、表と図の使い方について調査してきたので、詳しくお話ししていきます。
調べた結果は下記のとおりでして、これからお話しするツールを使えば簡単に作成＆ブログに添付できるということが分かりました。
・図はグーグルスプレッドシートで作成可能
・表はテーブル作成ツールで作成可能
・ブログに図表を添付すれば完成
グーグルスプレッドシートとテーブル作成ツールは無料で使うことができるので、おすすめのツールです。
ツールの使い方については「【最新版】はてなブログの表（テーブル）と図をサクッと作成・挿入する方法を解説！」にて、詳しくお話ししていますので是非参考にしてみてください。
因みに、図と表をブログに添付すると下記のように見えます。とてもお洒落ですね！
まとめ
最後に！簡単まとめ。
・やっておくべきはてなカスタマイズは5つ！10分で理解できる！
・ブログ記事をカード化できるとお洒落！
・無料広告を消すなら Pro がおすすめ！
…ですね！
ブログをお洒落にカスタマイズできれば、興味を持ってくれる読者さんが増えていきますのでカスタマイズは必ずこなしておいたほうがいいでしょう。
ということで、今回は以上です。お役に立てると嬉しいです。