はてなブログの無料簡単カスタマイズ6つ!初心者おすすめ


ブログサポート60の石黒です。

こんなご質問をいただきました。

ご質問
はてなブログを開設しました。

今は、はてなブログの初期のデザインのままで、ブログの見栄えがあまり良くありません。

ブログ初心者にもかかわらず、図々しくカスタマイズをしたいと思っています。

でも、「初心者には、はてなブログのカスタマイズって面倒くさそう……。」と感じています

初心者でも簡単にできる、はてなブログの無料カスタマイズについて教えていただけないでしょうか?

 

答え

はてなブログに手を加える作業は、まったく難しくないですよ。

基本的に、はてなブログの「デザインCSS」というところに、コードをコピーして貼り付けるだけでOKです。

そのコピペ作業も、極力少なくやる方法をお伝えしますね。

時間短縮!無料で超かんたんにできる「初心者むけ最低限のカスタマイズ」だけを載せました。

ブログに手を加える作業で時間がかかってしまうより、文章を書いてほしいからです。

1回だけパソコンから、簡単なカスタマイズをやってしまえば終わりです。

あとは、スマホから、はてなブログを書いても大丈夫です。

スマホアプリから更新してもカスタマイズは、しっかりと反映されます。

 

はてなブログに手を加える作業は、この6つだけでいい。

  1. ヘッダ画像のカスタマイズ
  2. サイドバーのカスタマイズ
  3. 見出しのカスタマイズ
  4. 目次のカスタマイズ
  5. グローバルメニューバーのカスタマイズ
  6. 吹き出し風のカスタマイズ

面倒な作業は、簡単にサクッと終わらせてしまいましょう。

はてなブログの手を加える作業を、短時間で終わらせて、文章を書くことにチカラを入れるといいですね。

この記事では初心者が、ブログに手を加えるときに注意する点も書いています。

 

【無料】はてなブログ!おすすめ6つのカスタマイズのやり方

スマホPCタブレットのイラストに文字のせ

※6つのカスタマイズの前に、デザインテーマを決めてしまいましょう。

カスタマイズをした後で、デザインを変えようした場合に、修正がはいってしまう可能性があるからです。

「カスタマイズは、無難にいきたい!」「失敗したくない。」という人は、はてなブログのテーマを1番人気のMinimalismにしておきましょう。

たくさんのブロガーが使用しています。

「カスタマイズしやすい!」ので、初心者にもおすすめです。

カスタマイズしやすいということは、修正もしやすいということ。

面倒な作業が少なくなります。

 

Minimalismは、ホームページのようなグローバルメニューの設置もかんたんなのでおすすめです。

人気のあるデザインなので、みんな似たようなデザインに感じになるデメリットもありますが…。

はてなブログのデザインテーマの選び方については、こちらの記事をお読みください。

必ずこちらの記事を読んで、デザインテーマを決めてください。

そして、レスポンシブ対応にする作業をしておいてください。

 

【カスタマイズ1】ヘッダ画像のカスタマイズ

ヘッダ画像のカスタマイズをしましょう。

画像のサイズは、とりあえず横幅400×縦幅200くらいにしておくことをおすすめします。
スマホとパソコンから見た時に、ちょうど良いサイズだからです。
(※これはレスポンシブデザイン対応の時のお話です。)

横幅400×縦幅200にしておくと、スマホから見たときに画像の両サイドが切れないのです。

パソコンから見たときは、こんな感じになります。
パソコンから見たときのヘッダー画像の説明

↑ヘッダー画像に文字を入れる場合は、「メインタイトル」の文字が白くなります。
メインタイトルの文字が見えにくくなってしまう可能性があります。

画像の背景画像の色にも注意しないといけません。

上下に空白がありますが、そこまで気にならないと思います。

スマホから見たとき↓
スマホから見たときのヘッダ画像

色々な画像をテストでアップロードしてみて、きちんとメインタイトルが見えるかどうかを確認しておいてください。

画像だけにして、メインタイトルの文字を画像に入れないこともできます。

その場合は、画像にあらかじめ「メインタイトル名」を入れておくなどしておきましょう。

ヘッダー画像の設定は、はてなブログの管理画面の「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル画像」から設定をします。
ヘッダー画像の設定のやり方の説明

ヘッダ画像の設定が難しいようであれば、画像の設定はしないで大丈夫です。

トップにメインタイトルだけがシンプルに表示されます。

 

【カスタマイズ2】サイドバー

はてなブログのサイドバーをカスタマイズせずに、初期のままにしている初心者の方が多いです。
非常にもったいない。

サイドバーの変更を何もしないと「はてなブログの宣伝の表示」がされてしまうからです。
サイドバーのリンクの説明画像

サイドバーのカスタマイズをすることによって、このはてなブログの宣伝を消すことができます。

「はてなブログの宣伝」をするよりは、自分の関連記事などを紹介してあげましょう。

サイドバーには以下の項目を入れておくことをおすすめします。

  • 注目記事
  • プロフィール
  • カテゴリ
  • 検索バー

注目記事にはサムネイル画像を入れるとクリック率が上がります。
サムネイル画像の説明画像

サイドバーのカスタマイズのやり方は、こちらの動画をご覧ください。

 

【カスタマイズ3】見出し

見出しのカスタマイズは、必ずやっておきましょう。
圧倒的にブログが見やすくなります。

レスポンシブデザインにすれば、勝手にカスタマイズされるテーマもあります。

Brooklynという人気のデザインテーマです。

初心者におすすめです。

なぜなら、Brooklynをインストールすれば、「見出し」も「目次」も勝手に変更してくれます。
Brooklynというデザインテーマの見出しと目次のキャプチャ

お気に入りのデザインテーマにしたら、見出しと目次を入れて記事を書いてみましょう。

事前にカスタマイズされているかどうかを確認しておきます。

(デザインテーマのデモ用サイトがある場合は、インストール前に「見出しのカスタマイズがされているかどうか?」がわかります)

 

はてなブログの書き方(見出しの付け方)の記事はこちらから。

見出しのカスタマイズのやり方は動画で撮りました。(見出しがカスタマイズされないデザインテーマを使用のみ作業しましょう)

(デザインCSSにコピペするだけで、簡単に見出しのカスタマイズができてしまいます)

 

大見出しのカスタマイズのhtmlコード

.entry-content h3{
    color: #444444;
    background: #f3f3f3;
    padding: 10px 15px; 
    border-left: 10px solid #6f112a;
    }

中見出しのカスタマイズのhtmlコード

.entry-content h4 {
  padding: 4px 10px;
  color: #111;
  border-top: 2px solid #2d70a4;
  border-bottom: 2px solid #2d70a4;
}

こちらのコードを、「ダッシュボード」→「設定」→「パソコン版のカスタマイズ」→「デザインCSS」の1番下の空いているスペースに貼り付け(コピペ)をします。
デザインCSSの場所

見出しの色は下記を参考に変えられます。動画でやり方を解説しています。

HTMLカラーチャートから、好きな色を選択しましょう。

 

【カスタマイズ4】目次のカスタマイズ

はてなブログは、見出しが目次になる仕組みもあります。

下の画像の赤枠の目次には、各見出しが表示されます。
目次の説明画像

目次があると読者はあなたの記事に「どんなことが書いてあるのか?」を事前に知ることができます。

レスポンシブデザインにすれば、勝手に「目次」がカスタマイズされるテーマが多いです。

わざわざ作業をすることは何もありません。

はてなブログに手を加える作業を減らすためにも、レスポンシブデザインにしておくことをおすすめします。

初心者のかたが、文章を書くことに専念できます。

 

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

※はてなブログのデザイン「Minimalism」のテーマのやり方になります。

グローバルメニューは下の画像の、赤枠のようなバーです。
グローバルメニューの説明画像

メニューバーの設置は、読者が特定のカテゴリーの記事へアクセスしやすくするためにあります。

メニューバーのカスタマイズは、ある程度記事が増えてきてから、やるようにしましょう。

 

グローバルメニューには、基本的にカテゴリーのURLをいれてあげます。
カテゴリーURLの説明画像

例えば、無印良品関係のブログをやっていれば、無印良品の記事一覧(カテゴリーページ)を表示させるボタンを設置してあげます。

クリックすると、そのカテゴリーページへ飛びます。

グローバルメニューのカスタマイズのやり方です。
まずは、こちらのコードをコピーして、パソコンの「メモ帳」などに貼り付けます。


<nav id="gnav">
	<div class="gnav-inner" id="menu-scroll">
		<div class="menu"><a href="URL"> HOME</a></div>
    <div class="menu"><a href="URL"> ABOUT</a></div>
    <div class="menu"><a href="URL"> TIPS</a></div>
    <div class="menu"><a href="URL"> STUDY</a></div>
    <div class="menu"><a href="URL"> DESIGN</a></div>
    <div class="menu"><a href="URL"> CONTACT</a></div>
	</div>
</nav>

上記コードの一部を抜粋して説明します。

下記コードの部分を見てください。
<div class=”menu”><a href=”URL“> ABOUT</a></div>

  • URLの部分に、カテゴリーのURLをいれます。
  • ABOUTの部分に、表示させたいカテゴリー名を入れます。

 

例えば、無印良品のカテゴリーを設置する場合は、以下のようになります。

<div class=”menu”><a href=”http://www.muji-nobita.com/archive/category/%E7%84%A1%E5%8D%B0%E8%89%AF%E5%93%81“> 無印良品</a></div>

この作業をそれぞれの項目でやります。

そうすると以下のような感じで、はてなブログのトップページに表示されます。
メニューバーの説明画像

 

デザイン→PCカスタマイズ→ヘッダ→タイトル下に、上記のコードを追加します。
コードを貼る場所の説明

 

こんな感じで無印良品のカテゴリーページへのメニューバーが設置されます。↓
例、無印良品のメニューバー

 

【カスタマイズ6】吹き出し風のカスタマイズは難しい!でも簡単にできる方法

吹き出し風の画像

上の画像のような、LINEの会話風のブログに憧れることってありませんか?

吹き出しは初心者の方には難しい。

いろいろなコードを、はてなブログの設定画面に貼り付けて、はじめてできるようになります。

そんなことに時間をかけていたら、ブログが苦痛になってしまいます。

それよりは、はじめは文章をかいてほしい。

ある程度アクセスが集まってから、中級者向けのはてなブログのカスタマイズに進むことをおすすめします。

じゃあ、あの吹き出し風のカスタマイズを、諦めるということでしょうか?

こんなご質問をしたいあなたへ。

かんたんにできる方法があります。

こんな感じです。↓↓
記事を会話風にする方法のキャプチャ画像

会話風になっています。話している感じを出すことができます。

まったく問題なく吹き出し風にできます。
簡単です。

やり方は、「小さい顔の画像を貼り付ける」だけです。
そして、顔の画像の下の会話文には「」かっこをつけるだけで、会話風にすることができます。

大きい画像を貼り付けても、かんたんに小さくすることが可能です。

はてなブログの記事を書く画面(パソコン操作時)で、画像をクリックして、赤枠矢印のところからサイズの調整ができます。
画像のサイズの調節方法の説明画像

会話風にカスタマイズすることに時間をかけるよりは、記事を書きましょう!

 

はてなブログ!カスタマイズの7つの注意点

はてなブログに手を加える作業は、ブログのレイアウトなどを崩してしまったりリスクがあります。

そのリスクを事前に回避するためにも、注意点をご説明します。

 

【注意点1】人気のデザインテーマを選ぶ。

はてなブログの人気のテーマを選びましょう!

なぜなら、ブロガーが発信しているカスタマイズの情報がたくさん出てくるからです。

カスタマイズ情報を載せている記事をさがして、紹介されているコードをコピーして貼り付けたりするだけです。

簡単に変更ができます。

人気のないテーマだとブロガーが発信しているカスタマイズの情報が少ないです。

調べるのに時間がかかってしまいます

時間短縮のためにも、人気のデザインテーマを選んでください。

 

【注意点2】レスポンシブデザインを選ぶ

レスポンシブ対応とは、「パソコンから見たレイアウトとスマートフォンから見たレイアウトを自動的に合わせてくれる」ものです。

はてなブログは、レスポンシブデザインに変更をしてほしい。

なぜなら、レスポンシブデザインにすれば、手を加える作業が少なくて済むからです。

パソコンとスマホからみたときのカスタマイズを、それぞれしなくても良くなります。

スマートフォンからのカスタマイズは、パソコンと同じになります。

つまり、スマートフォンのカスタマイズをわざわざしなくていいということです。

に手を加える作業が作業が減るということです。

人気のデザインテーマは、だいたいレスポンシブデザインの対応になっています。

 

【注意点3】プレビューで確認する

カスタマイズをしたあとは、「保存をする」前にプレビューで確認することをおすすめします。

間違ったカスタマイズを、ブログへ反映させてしまうことを回避できるからです。

プレビューして「違うな……。」と思えば、保存をしなければいい。

はてなブログに、その作業は反映されません。

 

【注意点4】テスト用のブログを作って、事前にテストをする。

はてなブログは、無料版であれば3つ。

有料版であれば10のブログを作ることができます。

事前にテスト用のブログを一つ作っておいて、そちらでカスタマイズを試すのもおすすめです。

間違ったカスタマイズを、ブログへ反映させてしまうことを回避できるからです。

 

テスト用のブログは、非公開の設定にしておきましょう。

非公開の設定は、こちらからできます。
「設定」→「公開設定」→「自分のみ」

テスト用のブログは「自分のみ閲覧」にチェックをいれましょう。

テスト用ブログで試してから、メインのブログにカスタマイズを当てはめてあげると、失敗が少なくて済みます。

はてなブログのcss設定の部分にコードを入れて、いじるときはブログ全体に影響します。

記事が多いと、ダメージも大きいです。

テスト用ブログを使って、慎重に手を加える作業をしたほうが無難です。

 

【注意点5】カスタマイズのやりすぎは逆効果

カスタマイズによっては、ブログが見やすくなることもあります。

逆に、カスタマイズしすぎると、ブログが見にくくなってしまう可能性もあります。

カスタマイズのやりすぎは、ブログの表示速度に影響してくるということを忘れないでください。

ブログが表示される速度が遅くなると、読者の離脱率が高くなってしまいます。

カスタマイズのやりすぎには注意をしてください。

 

【注意点6】カスタマイズしても反映されないときの対処法

「デザインCSSにカスタマイズのコードをコピーして貼り付けたんだけど、変更されない……」

こんな場合は、デザインCSSに貼り付けたコードを一番上に貼り直してください。

これだけで改善して、きちんと反映されることがあります。

以前貼り付けたCSSコードが、カスタマイズの邪魔をしている可能性があります。

 

【注意点7】カスタマイズに時間をかけすぎない

はてなブログに手を加える作業は、最低限にしましょう。

文章を書く時間がなくなってしまうからです。

わたしも、あっという間に時間がなくなってしまったことがあります。

そういうときは「もっと文章を書けばよかった……。」と、いつも後悔します。

カスタマイズに時間がかかりすぎて、寝不足になってしまったこともあります。

カスタマイズは、最低限でいい。
読者が見やすければいいのです。

文章に時間をかけることは、たしかに楽しい。
でも、読者は「あなたのオリジナルの読みやすい文章」を求めています。

 

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

画像に赤いテキストで「まとめ」

はじめに、サクッとはてなブログのカスタマイズを終わらせてしまいましょう。
今回説明したカスタマイズだけで、読みやすいブログになります。

カスタマイズは楽しいですが、ブログで稼ぐためには文章が一番大切です。
(※稼ぐよりも、カスタマイズを楽しみたいという方はガッツリやってください!)

設定からも、ブログのかんたんなカスタマイズができます。

例えば、はてなブログに表示される「上部のバー」を消したり、記事の下に「関連記事」を表示させたりなどです。

こちらの記事を見て、設定をきちんとやっておきましょう。