saimonblog

はてなブログをカスタマイズしよう!見やすいブログでアクセス爆伸び!

f:id:retirerich:20220402181625j:plain

f:id:retirerich:20210125222531j:plain

はてなブログを始めたけれどブログの見栄えがシンプルすぎて困っています。どうすればお洒落で見やすいブログにカスタマイズしていくのでしょうか。できれば、カスタマイズしておいたほうがいいポイントやカスタマイズするメリットとかも教えてもらえると助かります。
こういった悩みに答えます。

 

 

この記事を読むメリット

 

はてなブログのブログカスタマイズ方法が分かる!

・カスタマイズすべきポイントが分かる!

・カスタマイズするメリットが分かる!

 

はてなブログを4年程使っているので、色々とアドバイスできるかなと思います。

というわけで、本題について見ていきましょう。

 
 

 

はてなブログをカスタマイズしよう!見やすいブログでアクセス数爆伸び!

f:id:retirerich:20211218205342j:plain

はてなブログのカスタマイズしておくべきポイントについて解説していきます。5分ぐらいで読めます。

20210620142719
はじめまして、ハテオです。まずは、カスタマイズしておくべきポイントとメリットからお話ししていきます。

 

カスタマイズしておいたほうがいいポイント全リスト

まずは、カスタマイズしておいたほうがいい重要ポイントからとお話ししていきます。

いくつかカスタマイズしますので全てできると僕のブログのように、お洒落で見やすいブログに仕上げることができます。

f:id:retirerich:20220402231656j:plain

画像はガサガサしてて見にくいですが、そこは勘弁ください笑。お洒落で見やすいブログに必ず仕上がるはずですよ

というわけで、一番から五番まで順に画像付きでお話ししていきますので、頑張っておいついてきてくださいね!

はてなヘッダーのカスタマイズ

はてなフッターのカスタマイズ

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

④ サイドバーをお洒落画像に変える

⑤ トップページの記事をカード化する

20210620142719
どれも面倒くさい作業となりますがブログのためだと思って、少しずつカスタマイズしていきましょう。では、詳しく見ていきましょう。

 

① ヘッダーのカスタマイズ

まずは、一番のはてなヘッダーからお洒落にカスタマイズしていきましょう。

f:id:retirerich:20220402233619j:plain

はじめに、カスタマイズするためにデザインのカスタマイズのヘッダー画像を開きます。

f:id:retirerich:20220403144502j:plain

赤枠の画像だけ表示にまるをして、画像をアップロードからヘッダーにしたい画像を指定します。

f:id:retirerich:20220403145502j:plain

ヘッダー画像を指定する際は、下記注意点を満たせているか確認しておくようにしましょう。

・画像の種類が JPEG 又は PNG であること

・画像の縦サイズが 1000px であること

・画像の横サイズが 200px であること

準備ができましたら、画像を指定して今どのように見えているのか確認するようにしましょう。

パソコン画面(赤枠)では綺麗に見えますが、携帯画面(青枠)では画像がはみ出てて見えるかなと思います。

f:id:retirerich:20220403152321j:plain

というわけで、携帯画面の見栄えを整えるために、まず赤枠のスマートフォンアイコンの詳細設定のレスポンシブデザインにチェックをします。

f:id:retirerich:20220403154214j:plain

最後に、画像上下の余白コードとヘッダー対策コードを先ほどのカスタマイズにあるデザイン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;
}
}

 

② フッターのカスタマイズ

では、二番のトップページ最下部にあるフッターのカスタマイズもこなしていきましょう。

f:id:retirerich:20220403161557j:plain

まずは、はてなブログのデフォルトフッターを消していきます。下記のフッター削除コードを赤枠のカスタマイズの デザインCSS に添付します。

/* footerを消す */
#footer {
  display: none;
}

f:id:retirerich:20220403163522j:plain

続けて、オリジナルのフッターを設定するためにオリジナルコードをカスタマイズのフッターに添付します。

<div id="copyright">©ここに好きな文字を入力する</div>

f:id:retirerich:20220403164937j:plain

最後に、オリジナルコードの文字の大きさや文字色を調整するコードを赤枠のカスタマイズの デザインCSS に添付すれば完了です。

/*コピーライト*/
#copyright {
 padding: 20px;
 text-align: center;
 background: #000000;/*背景色*/
 font-size: 10px;
 color:#ffffff;/*文字の色*/
}

f:id:retirerich:20220403163522j:plain

 

③ トプペのサイドバーカラー

トップページのサイドバーもシンプルすぎて見にくいのですきな色にカスタマイズしてしまいましょう。

f:id:retirerich:20220403170743j:plain

カスタマイズは本当簡単でして下記コードをカスタマイズの デザイン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;/* 下線 */
}

f:id:retirerich:20220403163522j:plain

20210620142719
当ブログでは黒色水色を使っていますので、サイドバーの色を変更したい方は文字色コードの数値をいじればおけです。お疲れ様でした!

 

④ トプぺのサイドバーを画像化

サイドバーを画像化できるとよりお洒落です。四番みたいになり当ブログでも取り入れています。

f:id:retirerich:20220403173004j:plain

というわけで、サイドバーの画像化もお話ししていきます。まずは、サイドバーにしたい画像(縦200px・横650px)を何もない新しい記事上に添付します。

f:id:retirerich:20220403222338j:plain

飛ばしたいサイトの URL をコピーします。当ブログではブログのサイトに飛ばしたいので赤枠の URL をコピーしました。

f:id:retirerich:20220403224325j:plain

先ほどの記事を開いて、①画像をクリックして②リンクアイコンをクリックします。

f:id:retirerich:20220403225711j:plain

①コピーした URL を添付して②プレビューをクリック③選択範囲にチェック④選択した形式でリンクを挿入します。

f:id:retirerich:20220403230309j:plain

挿入できたら HTML 編集の赤枠のリンクをまるごとコピーします。

f:id:retirerich:20220403230723j:plain

デザインのカスタマイズのサイドバーのモジュールの追加をクリックします。

f:id:retirerich:20220403231146j:plain

最後に、①HTMLをクリック②サイドバーのタイトルを付ける③まるごとコピーしたリンクを添付④適用をクリック⑤変更を保存すれば完了です。

f:id:retirerich:20220403231721j:plain

20210620142719
お疲れ様でした。選択範囲のところですこし苦戦すると思いますが、何回かリンク挿入していれば選択範囲が出てくるので諦めずに何回かリンク挿入してみてください。

 

⑤ トプペの記事をカード化する

最後に、五番の記事をカード化する方法についてお話ししていきます。

f:id:retirerich:20220405080213j:plain

本当は有料版の はてなPro に課金すれば、下記ページで簡単にカード化にできるのですが、無課金の場合はできないので今回は無課金でのカスタマイズ方法についてお話ししていきます。

f:id:retirerich:20220405081545j:plain

というわけで、まずはブログのトップページリンクとアーカイブページリンクを自分のリンクに置き換えてまるまるコピーします。

<script type="text/javascript"> if(location.href === "/*ブログのトップページのリンク*/") { location.href = "/*ブログのアーカイブページのリンク*/" } </script>

最後に、設定の詳細設定の head要素にメタデータを追加 に先ほどのコードを添付すれば完了です。お疲れ様でした。

f:id:retirerich:20220407213724j:plain

20210620142719
カスタマイズ本当にお疲れ様でした。すこしブログが綺麗になりましたでしょうか?最後に、カスタマイズに関する質問について調査してきましたので自由に活用していってください。

 

ブログのカスタマイズに関するよくある質問!徹底調査してきました!

f:id:retirerich:20211222213517j:plain

ブログのカスタマイズに関するよくある質問について解説していきます。5分ぐらいで読めます。

a

a

a

ブログをカスタマイズするメリットって一体なに?

ブログをカスタマイズするメリットってあるの?逆効果なんじゃないの?と思う方もいるでしょう。

というわけで、カスタマイズするメリット・デメリットについて調査してきたので、サクッとお話ししていきます。

カスタマイズするメリット・デメリットは下記のとおりでして、メリットが豊富にあるということが分かるかなと思います

  ブログカスタマイズ
デメリット ・ブログの読み込み速度ダウン
・カスタマイズが面倒臭い
メリット ・ブログのモチベーションアップ
・ブログの見やすさアップ
・読者の滞在時間アップ
・読者の好感度アップ

カスタマイズするのが面倒くさいというデメリットもありますが、これは避けられないので許容するしかないです。

ブログがお洒落になればモチベーションも上がって続けやすくもなりますし、かつ読者の好感度も上げてくれるので一石二鳥なのかなと思います。

場合によっては、読者がファンになってより多く読んでもらえる可能性もあるので、カスタマイズは基本的にしておいたほうがいいでしょう。

20210620142719
ブログが読みやすければ最後まで読んでもらえる可能性が高くなります。なので、ブログのカスタマイズはおすすめなのですが、サイトが重くなりすぎるくらいのカスタマイズは逆効果になりますので注意するようにしましょう。

 

はてなの広告をカスタマイズで消すことができる?

はてな無料版を使っているとはてなの広告がデカデカと表示されてカスタマイズで消したいと思う方もいるでしょう。

というわけで、カスタマイズではてなの広告を消すことができるのかについて調査してきたので、サクッとお話ししていきます。

調べた結果は下記のとおりでして、はてなの無料版でも消去できるということが分かりました。

・無料版の広告はカスタマイズで消去できる

・有料版に課金すれば簡単に広告消去できる

・デメリットは読み込み速度が低下する

但し、ブログの読み込み速度が低下するというデメリットがありますので、カスタマイズする際はよく考えなければいけません。

読み込み速度が低下しても問題ないという方は「」のサイトを見れば、カスタマイズする方法が分かるかなと思います。

因みに、読み込み速度が低下すると読者をイラつかせて離脱率を高めてしまうので、当ブログでははてな広告のカスタマイズはしていてません。

20210620142719
一番いい方法は Pro に課金することですが、資金が求められますので貯金できるまでは広告ありで頑張るしかないですね!

 

ブログで表と図を使うにはどうすればいい?

表(テーブル)や図(グラフ)が使えればブログももっと見やすくなると思う方もいるでしょう。

というわけで、表と図の使い方について調査してきたので、詳しくお話ししていきます。

調べた結果は下記のとおりでして、これからお話しするツールを使えば簡単に作成&ブログに添付できるということが分かりました。

・図はグーグルスプレッドシートで作成可能

・表はテーブル作成ツールで作成可能

・ブログに図表を添付すれば完成

グーグルスプレッドシートとテーブル作成ツールは無料で使うことができるので、おすすめのツールです。

ツールの使い方については「【最新版】はてなブログの表(テーブル)と図をサクッと作成・挿入する方法を解説!」にて、詳しくお話ししていますので是非参考にしてみてください。

因みに、図と表をブログに添付すると下記のように見えます。とてもお洒落ですね!

f:id:retirerich:20220410113248j:plain

20210620142719
情報を整理して強調したい部分を伝えたいときに図表が役立ちますので、基本的に使ったほうがいいでしょう。

 

まとめ

f:id:retirerich:20210307202357j:plain

最後に!簡単まとめ。

まとめ

・やっておくべきはてなカスタマイズは5つ!10分で理解できる!

・ブログ記事をカード化できるとお洒落!

・無料広告を消すなら Pro がおすすめ!

…ですね!

ブログをお洒落にカスタマイズできれば、興味を持ってくれる読者さんが増えていきますのでカスタマイズは必ずこなしておいたほうがいいでしょう。

ということで、今回は以上です。お役に立てると嬉しいです。