はてなブログでブログを運営していて、
■ワードプレスのブログのようなカスタマイズをしてみたい
■もっと記事を読みやすくしたい
■ブログ内での回遊率を上げたい
こんな思いはありませんか？
私ははてなブログの短所と言われる「カスタマイズに限界がある」を克服すべく、はてなブログで色々なカスタマイズに挑戦してきました。
この記事に書いてあるカスタマイズを上から順番に全てやっていけば、ワードプレスにも負けない見やすくておしゃれなブログが完成しますよ！
基本はコードをコピペすればOKなので、初心者でも簡単にできます。
「自分でやるのは面倒！」「時間がないので早く済ませたい！」というあなたは記事を読まなくて大丈夫。
はてなブログのカスタマイズをお手伝いします 初心者歓迎！カスタマイズより記事の執筆に時間をかけませんか？
▼この記事を読んでわかること
- HTMLとCSSの基本中の基本
- はてなブログのヘッダー部分をカスタマイズするノウハウ
- はてなブログの記事内をおしゃれにカスタマイズするノウハウ
- プロフィールページの作り方
- おしゃれなアイキャッチ画像の作り方
- はてなブログカスタマイズに必要なHTMLとCSSの基礎知識
- はてなブログのヘッダー部分をカスタマイズする方法
- はてなブログの記事内をおしゃれにカスタマイズする方法
- aboutページを使ってプロフィールページを作成する方法
- おしゃれなアイキャッチ作成に必要なツールは3つだけ！
- はてなブログのカスタマイズは初心者でもコピペでできる！
カスタマイズを始める前に、はてなブログの無料版を使っている方は有料版のはてなブログProにすることをおすすめします！
記事内のキーワードリンクを消せる
カスタマイズの幅が広がる（記事を一覧表示にできるなど）
独自ドメインが使える（＝Googleアドセンスに申請できる）
ひとつのブログを複数人で管理できる（＝設定代行を依頼できる）
はてなによる広告やキーワードリンクを消せることは、読者が記事に集中しやすくなる＝ページからの離脱率を下げコンバージョン率を上げることにつながります。
はてなブログProの価格設定は3種類。長期契約にするほど割安になってお得です。
| 2年コース | 1年コース | 1ヶ月コース |
|---|---|---|
| ¥14,400 | ¥8,434 | ¥1,008 |
| 600円/月 | 703円/月 |
ワードプレス（WordPress）でのブログ運営にはサーバーのレンタル（月額500円～1200円程度）が必要なので、その分だと考えるとこの価格は良心的。
ワードプレスのような面倒なインストール作業や設定が要らず、すぐに収益化を目指したブログを始められるのがはてなブログProのメリットですね。
はてなブログカスタマイズに必要なHTMLとCSSの基礎知識
はてなブログのカスタマイズを語る上で避けては通れないのが、HTMLとCSSのこと。
そうそう。それがなんなのかサッパリわからなくて挫折したんだよね…。
難しそうに聞こえますが、最低限の知識さえあればカスタマイズはできますよ！
「調べてもよくわからない！」という方のために、プログラミング素人の私がわかりやすく説明します。
HTMLとCSSってざっくり言うとこういうこと！
【目的】ウェブサイトの構造を指示する
【形式】< 〇〇>と</〇〇>で囲む
「見たまま」モードの「HTML編集」タブにすると、どういうときにどんなHTMLが入力されているかがわかりますよ！
【目的】ウェブサイトのデザインを指示する
【形式】（どこに） {（どんな指示を）:（どのぐらいorどんな風に）;}
【メモ】/*と*/で囲まれた部分は反映されないので、メモしたいときに使う
「どこに」の部分に名前をつけてHTMLで呼び出すと、その名前の部分にだけデザインを適用させることができます。
HTMLとCSSはどこにコピペすればいい？
HTMLとCSSのことがざっくりわかったら、次はそれをどう使うか見ていきましょう。
はてなブログでHTMLを記述できる場所は全部で6つ。
- ① 記事内（「はてな記法」がおすすめ！）
- ② デザイン→カスタマイズ→ヘッダ→タイトル下
- ③ デザイン→カスタマイズ→記事→記事上
- ④ デザイン→カスタマイズ→記事→記事下
- ⑤ デザイン→カスタマイズ→フッタ
- ⑥ 設定→詳細設定→headに要素を追加
この中から、目的に合わせて貼り付ける場所を選びます。
その他はてなブログProならスマホ用のカスタマイズでもHTMLを記述することができますが、当ブログはレスポンシブデザイン（＝スマホ対応）のテーマを使用しているため割愛します。
はてなブログでCSSをコピペする場所は、デザイン→カスタマイズ（スパナマーク）→デザインCSSの部分。
ここに“こういうときはこんなデザインで”という指示を書いておくことで、HTMLを記述したときに指示通りのデザインが現れるという仕組みです。
“CSSは必ずHTMLとセット”と覚えておきましょう。
テーマを変更するとき・CSSを追記するときは、元のCSSのバックアップを取っておくのを忘れずに！
色の指定はどうやるの？
デザインを自分の好きな色に変えたいときってどうしたらいいの？
カラーコードの調べ方さえ知っておけばやり方は簡単です！
HTML・CSSで色を指定するときには、「#（シャープ）+カラーコード」を使います。
例えば、#000000→黒・#ff0000→赤のようにアルファベットと数字の組み合わせ6ケタで表現されるのですが、それらを全て覚えるのは無理！
私は、WEB色見本 原色大辞典 - HTMLカラーコードで自分の理想の色を探して、そのコードをコピペしています。
同じ“青”でも色の数は無数にあるので、自分のサイトのテーマカラーをいくつか決めてコードをメモしておくといいですよ！
はてなブログのヘッダー部分をカスタマイズする方法
ヘッダーとは、ブログの上部に表示される「ブログの顔」となる部分のことです。
ここでははてなブログのヘッダー部分のカスタマイズについて、優先的にやった方がよいものをいくつかご紹介します。
ヘッダー画像のサイズをスマホ向けに調整する
はてなブログのヘッダーにおすすめの画像サイズは1000ピクセル×200ピクセル。
ヘッダー画像は自作でももちろんOKですが、ココナラでプロに頼めば簡単にハイクオリティなヘッダーを手に入れられます。
ヘッダー画像の設定はデザイン→カスタマイズ（スパナマーク）→ヘッダ→「ファイルを選択」ボタンからおこなってください。
でもレスポンシブデザインの場合、このままだとスマホではうまく表示されませんよね？
以下のCSSを貼り付けることで、スマホでもヘッダー画像全体が表示され、上下の余白もなくすことができます。
うまくいかない場合は、
background-size: cover;
height: 75px;
の部分を70px～80pxの間で微調整してみましょう！
ヘッダー下にグローバルメニューを設定する
グローバルメニューというのは、サイトのトップにあるこのようなメニュー表示です。
はてなブログの人気テーマは、ほとんどがオプションとしてこのグローバルメニュー（ナビゲーションメニュー）のカスタマイズを用意してくれています。
テーマを変更した際に元となるCSSはすでに組み込まれた状態なので、あとは表示されるよう指示するだけ。
②デザイン→カスタマイズ（スパナマーク）→ヘッダ→タイトル下に貼り付ける
③URLとカテゴリー名を自分のブログのものに書き換える
カテゴリーごとのURLは管理画面の「カテゴリー」からそれぞれのカテゴリーを選択したときのもの（ブログURL/archive/category/カテゴリー名）をコピーしてメモ帳にまとめておきます。
コピーするHTMLはテーマごとに違うので、各テーマのカスタマイズページを参照してください。
テーマ別参照ページ
◆ Minimalism シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
◆ Haruni グローバルメニューの設置方法 訂正あり - Haruni
◆ Brooklyn はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
◆ ZENO-TEAL カスタマイズ2：タイトル下にグローバルナビゲーションバーを表示 - ZENO-TEAL
◆ Naked 【子カテゴリなし】レスポンシブなナビゲーションの作り方 - Theme Naked Blog
この他のテーマでもインストールページ下部にカスタマイズ用記事へのリンクが貼られているはずなので、その指示に従って設定してください。
グローバルメニューには絵文字のようなアイコン（ など）を使うことが多いので、あらかじめFont Awesomeというツールを使えるようにしておくと便利です。
Font Awesomeについてはこちらのページがわかりやすくておすすめ！
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
ヘッダー下におすすめ記事欄を作成する
ワードプレスのブログでよく見かける、ヘッダー下の「おすすめ記事欄」。
ヘッダー下にアイキャッチを並べて表示することで、ブログを訪問してくれた人に最新記事以外のおすすめ記事を紹介することができます。
②HTMLをデザイン→カスタマイズ（スパナマーク）→ヘッダ→タイトル下にコピペ
③おすすめ記事用の画像を用意する
④画像をはてなフォトライフにアップロード→画像URLをコピー
⑤HTMLの記事URL・画像URL・記事タイトル部分を変更する
CSSはテーマZENO-TEALの作者様が配布してくださっているものを使わせていただいています。
ZENO-TEAL以外のテーマをお使いの方は、まずは以下のCSSをコピペしてください。
HTMLはZENO-TEAL使用の場合であってもコピペが必要です。
おすすめ記事は5個すべて埋めないと表示が崩れてしまうので、必ず5個設定してください。
画像をアップロードするはてなフォトライフへは記事作成画面右側の「+写真を投稿」ボタン下のマークから飛べます。
画像URLは必ず画像を大きく表示させた状態でコピーしてください。
元のCSSではおすすめ記事欄がトップページ以外の記事ページ上部にも表示されてしまうので、トップのみに表示させたい場合は以下のCSSを追記すればOK！
当ブログはテーマMinimalismを使用しているため、デザインに合うようコードを少しいじって正方形（タイトルなし）にカスタマイズしています。
さらにトップページに来た読者が最初に読む記事を迷わないよう、ヘッダー画像下にキラーページ（収益が発生しやすい記事）への誘導リンクを貼ってみました。
正方形カスタム・キラーページバー設置をご希望の方は、ココナラからご依頼ください。
パンくずリストを設定する
パンくずリストとは、読者が“今サイト内のどの位置にいるのか”を視覚的にわかりやすくするためのものです。
はてなブログでは、記事の上に「トップ＞カテゴリー名＞記事名」と表示されます。
この設定にはHTMLもCSSも必要ありません。
②「変更を保存する」ボタンを押す
パンくずリストを設定しておくことで、同じカテゴリの他の記事を見てもらえたり、トップに飛んでもらいやすくなります。
すぐ設定できるものなので必ずやっておきましょう！
はてなブログの記事内をおしゃれにカスタマイズする方法
ここまではブログ全体の見栄えをよくするためのカスタマイズを紹介してきました。
でも、ブログで一番大切なのは＜記事＞ですよね？検索からたどり着いた読者はトップページを見ずに離脱することがほとんどです。
ここからは、記事を読みやすくしたり、商品を買ってもらいやすくするためのカスタマイズを紹介していきます。
見出しのデザインを変更する
見出しデザインはブログ記事のイメージを大きく左右する要素です。
例えば、当ブログではこのようなデザインを使用しています。
②カラーコードの部分を任意のものに変更する
はてなブログの編集画面を使うと、見出しタグは<h3>が大見出し・<h4>が中見出し・<h5>が小見出しです。
CSSをあらかじめ記述しておけば、いつもと同じ見出しの付け方で自動的にデザインが呼び起されるようになります。
手動で<h2>タグを入力している人は<h2>のデザイン設定も忘れずに！
ちなみに、編集画面のアイコンからで挿入できる「目次」にはこの見出しタグを使ったものが反映されます。
記事の冒頭部分に目次があると、読者が読みたい項目にパッと飛べるので便利です。
見出しデザインは「見出し CSS」等で検索すればたくさん出てくるので、好みのものを見つけてくださいね！
私のおすすめはこのページ
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
吹き出しの会話形式表示を導入する
こういう会話形式の表示ってどうやるの？
CSSとHTMLだけで簡単にできますよ！
吹き出しで会話形式の表示をすると、記事の本文にメリハリがついて読みやすくなります。
②画像をはてなフォトライフにアップロード→画像URLをコピー
③CSSをコピペ
④アイコン名・画像URL部分を書き換える
⑤記事の本文中にHTMLをコピペ
※はてなフォトライフへのアップロード方法についてはヘッダー下におすすめ記事欄を作成するで解説しています。
コードの一番最後の部分を任意のものに打ち換えます。
アイコン名には自分がわかりやすい名前（例：boy1・woman・meなど）をつけましょう。
HTMLのアイコン名のところには先ほどCSSに入れた名前を打ち込みます。
r-fukiを使うと右側に吹き出しが出て
l-fukiを使うと左側に吹き出しが出ますよ！
参考ページ
【はてなブログ】コピペで簡単！吹き出しを使って会話形式にするカスタマイズ方法を試してみたよ！ - アラフォーママの雑記ブログ
※参考ページのものはアイコンが大きめだったので、少しいじって掲載しています。
文中にラインマーカー風の下線をつける
ラインマーカー（蛍光ペン）でアンダーラインを引いたような強調表示ってよく見かけますよね？
同じ強調表示の中でも、太字より読者の目を引いてページも華やかになります。
やり方はたくさんあるのですが、ここでは私が見た中で1番簡単な方法をご紹介しますね！
②強調したい部分を<strong> </strong>タグで挟む
囲み枠を挿入する
記事内に囲み枠を入れてポイントなどをまとめると、長い記事でも読みやすくなります。
②カラーコードの部分を任意のものに変更する
③指定のHTMLを本文中にコピペ
④タイトル・中身を打ち換える
公開されているデザインから選んでCSSをコピペ→そのCSSを呼び出すHTMLをメモしておく→使うたびに本文に貼り付けるというのが基本的な手順になります。
デザインは「囲み枠 CSS」等で検索すればたくさん出てくるので、好みのものを見つけてくださいね！
私のおすすめはこのページ
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
カエレバで商品リンクを作成する
カエレバは、以下のように楽天・Amazon・Yahoo!などの商品リンクをまとめて作成してくれる無料ツールです。
はてなブログの編集画面からでもリンク作成はできますが、こちらの方が目立ってクリックされやすい上に取りこぼしの心配もありません。
Amazonアソシエイトや楽天アフィリエイトにそれぞれ登録してIDを紐づけることもできますが、おすすめは「もしもアフィリエイト」で提携申請すること。
少額ずつの発生でもまとめて現金化できるので使い道が限定されず、それぞれのサイトに登録する手間も省けます。
②カエレバのページ下部にある入力欄にサイト名とIDを記入→保存
③CSSをコピペしてデザインをカスタマイズ
各モールのIDの調べ方はカエレバのサイト内に説明があるのでそちらをご覧ください。
もしもアフィリエイトから取得したIDでAmazon・楽天・Yahoo!へのリンクを作成したい場合は、下の画像の赤丸部分に入力します。
一度設定してしまえばキャッシュで覚えていてくれるので、普段使っているPCなら毎回設定する必要はありません。
次にリンクのデザインをボタン風にカスタマイズするCSSをコピペします。
こちらのCSSは、参考ページのコードからカエレバ以外のサービス（トマレバ・ヨメレバ）にのみ必要な部分を削除したものです。
トマレバ・ヨメレバも使いたい場合は、参考ページにある元のCSSをコピペしてください。
ここまで設定できたら、あとは商品リンクを貼りたいときにその都度コードを生成するだけです。
②画像を表示させる商品を選んで「ブログパーツを作る」をクリック
③デザインは「amazlet風-2(cssカスタマイズ用)」を選ぶ
④「rel=」の部分は「nofollow」にしておく
⑤商品名変更やモールの選択など細かな修正→更新
⑥生成されたHTMLコードを記事本文にコピペ
ボタンからのリンク先は商品ページではなく検索結果ページなので、最初の検索ワードはできる限り具体的にするのがコツです。
aboutページを使ってプロフィールページを作成する方法
ブログの筆者がどういう人なのか読者に伝えるためには、プロフィールページが必要です。
記事や固定ページとして作成してもいいのですが、おすすめはaboutページを使うこと。
aboutページへはサイドバーに表示できる「プロフィール」のユーザー名（はてなID）から飛ぶことができます。
▼私のプロフィールページはこちら
blog.kottanmom.com
②設定→基本設定→aboutページ編集→自由記述欄にコピペ
③その他の表示項目（ブログ投稿数や読者一覧など）を選ぶ
④「変更する」ボタンを押す
記事作成を「はてな記法」にしている場合は、貼り付ける前にプルダウンからモードを「はてな記法」にしておきましょう。
プロフィールページができたら、グローバルメニューにも追加しておくと見つけてもらいやすくなります。
おしゃれなアイキャッチ作成に必要なツールは3つだけ！
ブログのアイキャッチ画像はTwitterなどで記事をシェアする際にとても重要です。
■どうやって作ったらいいかわからずいつも写真のみ…
■自分で撮った写真はなんだかイマイチ…
■ペイントで文字を入れてみたけどなんかダサい…
■ワンパターンなデザインしかできない…
そんなあなたもこの3つのツールさえ知っておけば、簡単におしゃれなアイキャッチが作れるようになります。
無料画像検索ツール O-DANo-dan.net
無料画像検索ツール GIRLY DROPgirlydrop.com
今やブロガーなら知らない人はいない！というぐらい有名なCanvaは、無料で使えるデザインツールです。
PC版とスマホアプリ版があり、豊富なテンプレートから簡単におしゃれなアイキャッチ画像が作成できます。
有料会員にアップグレードすれば、使える画像やイラストの種類がさらに増えますよ！
著作権フリーの画像検索サイトは他にもいろいろありますが、おしゃれ度で言うと「O-DAN」と「GIRLY DROP」がダントツ！
「GIRLY DROP」は、特に女性をターゲットにしたブログを書かれている方におすすめです。
O-DAN or GIRLY DROPでイメージ画像を探す→Canvaに貼り付けて文字の挿入や装飾をするという流れがおしゃれアイキャッチへの近道。
当ブログが使用しているMinimalismを始め、いくつかのテーマではトップページの記事一覧のアイキャッチ画像が正方形の表示になります。
文字が見切れてしまわないよう、アイキャッチ画像を作成するときは中央に文字を寄せるなど工夫しましょう！
はてなブログのカスタマイズは初心者でもコピペでできる！
はてなブログのカスタマイズは、HTMLやCSSのことがよくわからない初心者でもコピペでなんとかなることがほとんどです。
やっていくうちにわかってくる部分もあるので、いろいろと試行錯誤しながら理想のブログに近づけていきましょう。