【コピペ簡単】はてなブログ無料のカスタマイズ７つ【初心者おすすめ】
【2021年7月3日更新】
ブログサポート６０の石黒です。
こんなご質問をいただきました。
【ご質問】
はてなブログを開設しました。
今は、はてなブログの初期のデザインのままで、ブログの見栄えがあまり良くありません。
ブログ初心者にもかかわらず、図々しくカスタマイズをしたいと思っています。
でも、「初心者には、はてなブログのカスタマイズって面倒くさそう……。」と感じています
初心者でも簡単にできる、はてなブログの無料カスタマイズについて教えていただけないでしょうか？
【答え】
はてなブログに手を加える作業は、まったく難しくないですよ。
基本的に、はてなブログの「デザインCSS」というところに、コードをコピーして貼り付けるだけでOKです。
そのコピペ作業も、極力少なくやる方法をお伝えしますね。
時間短縮！無料で超かんたんにできる「初心者むけ最低限の無料カスタマイズ」だけを載せました。
ブログに手を加える作業で時間がかかってしまうより、文章を書いてほしいからです。
１回だけパソコンから、簡単な無料カスタマイズをやってしまえば終わりです。
あとは、スマホから、はてなブログを書いても大丈夫です。
スマホアプリから更新してもカスタマイズは、しっかりと反映されます。
はてなブログに手を加える作業は、この７つだけでいい。
- ヘッダ画像のカスタマイズ
- サイドバーのカスタマイズ
- 見出しのカスタマイズ
- 目次の無料カスタマイズ
- グローバルメニューバーのカスタマイズ
- 吹き出し風のカスタマイズ
- アフィリエイトリンクのカスタマイズ
面倒な作業は、簡単にサクッと終わらせてしまいましょう。
はてなブログの手を加える作業を、短時間で終わらせて、文章を書くことにチカラを入れるといいですね。
この記事では初心者が、ブログに手を加えるときに注意する点も書いています。
目次
- 1 【無料】はてなブログ！おすすめ７つのカスタマイズのやり方
- 1.1 【はてなブログの無料カスタマイズ１】ヘッダー画像のカスタマイズ（テーマ：Minimalism）
- 1.2 【はてなブログの無料カスタマイズ２】サイドバー
- 1.3 【はてなブログの無料カスタマイズ３】見出し
- 1.4 【はてなブログの無料カスタマイズ４】目次の無料カスタマイズ
- 1.5 【はてなブログの無料カスタマイズ５】グローバルメニューバーの無料カスタマイズ（Minimalism）
- 1.6 【はてなブログの無料カスタマイズ６】吹き出し風の無料カスタマイズは難しい！でも簡単にできる方法
- 1.7 【はてなブログの無料カスタマイズ７】アフィリエイトの商品リンクの無料カスタマイズ
- 1.8 はてなブログののその他のカスタマイズ
- 2 はてなブログの無料カスタマイズ7つの注意点
【無料】はてなブログ！おすすめ７つのカスタマイズのやり方
※無料カスタマイズの前に、デザインテーマを決めてしまいましょう。
カスタマイズをした後で、デザインを変えようした場合に、修正がはいってしまう可能性があるからです。
「カスタマイズは、無難にいきたい！」「失敗したくない。」という人は、はてなブログのテーマを１番人気のMinimalismにしておきましょう。
たくさんのブロガーが使用しています。
「カスタマイズしやすい！」ので、初心者にもおすすめです。
無料のカスタマイズしやすいということは、修正もしやすいということ。
面倒な作業が少なくなります。
Minimalismは、ホームページのようなグローバルメニューの設置もかんたんなのでおすすめです。
人気のあるデザインなので、みんな似たようなデザインに感じになるデメリットもありますが…。
はてなブログのデザインテーマの選び方については、こちらの記事をお読みください。
必ずこちらの記事を読んで、デザインテーマを決めてください。
そして、レスポンシブ対応にする作業をしておいてください。
【はてなブログの無料カスタマイズ１】ヘッダー画像のカスタマイズ（テーマ：Minimalism）
ヘッダ画像を無料カスタマイズしましょう。
画像のサイズは、とりあえず横幅４００×縦幅２００くらいにしておくことをおすすめします。
スマホとパソコンから見た時に、ちょうど良いサイズだからです。
（※これはレスポンシブデザイン対応の時のお話です。）
横幅４００×縦幅２００にしておくと、スマホから見たときに画像の両サイドが切れないのです。
パソコンから見たときは、こんな感じになります。
↑ヘッダー画像に文字を入れる場合は、「メインタイトル」の文字が白くなります。
メインタイトルの文字が見えにくくなってしまう可能性があります。
画像の背景画像の色にも注意しないといけません。
上下に空白がありますが、そこまで気にならないと思います。
スマホから見たとき↓
色々な画像をテストでアップロードしてみて、きちんとメインタイトルが見えるかどうかを確認しておいてください。
画像だけにして、メインタイトルの文字を画像に入れないこともできます。
その場合は、画像にあらかじめ「メインタイトル名」を入れておくなどしておきましょう。
ヘッダー画像の設定は、はてなブログの管理画面の「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル画像」から設定をします。
ヘッダ画像の設定が難しいようであれば、画像の設定はしないで大丈夫です。
トップにメインタイトルだけがシンプルに表示されます。
１０００✕２００のヘッダー画像のサイズでうまく表示させたい方はこちら
CANVAを使うと、キレイなヘッダー画像をプロのように作れます。
【はてなブログの無料カスタマイズ２】サイドバー
はてなブログのサイドバーを無料カスタマイズせずに、初期のままにしている初心者の方が多いです。
非常にもったいない。
サイドバーの変更を何もしないと「はてなブログの宣伝の表示」がされてしまうからです。
サイドバーの無料カスタマイズをすることによって、このはてなブログの宣伝を消すことができます。
「はてなブログの宣伝」をするよりは、自分の関連記事などを紹介してあげましょう。
サイドバーには以下の項目を入れておくことをおすすめします。
- 注目記事
- プロフィール
- カテゴリ
- 検索バー
注目記事にはサムネイル画像を入れるとクリック率が上がります。
※サイドバーのアイキャッチ画像は正方形にするか、文字を真ん中に持ってくると上手に作成できます。
サイドバーの無料カスタマイズのやり方は、こちらの動画をご覧ください。
【はてなブログの無料カスタマイズ３】見出し
見出しの無料カスタマイズは、必ずやっておきましょう。
圧倒的にブログが見やすくなります。
レスポンシブデザインにすれば、見出しが勝手に無料カスタマイズされるテーマもあります。
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」の１番下の空いているスペースに貼り付け（コピペ）をします。
見出しの色は下記を参考に変えられます。動画でやり方を解説しています。
HTMLカラーチャートから、好きな色を選択しましょう。
一緒に太字にマーカー線を引く無料カスタマイズもしておくと、簡単にきれいなブログを作ることができます。
太字にマーカーを引く以下のコードを、はてなブログのデザインCSSに貼り付けるだけです。
↓
/*太文字strongをマーカー線引く*/
.entry-content strong {
background: linear-gradient(transparent 90%, #ff99cc 40%);
}
動画で太字マーカーの無料カスタマイズのやり方を見たい方はこちら
【はてなブログの無料カスタマイズ４】目次の無料カスタマイズ
はてなブログは、見出しが目次になる仕組みもあります。
下の画像の赤枠の目次には、各見出しが表示されます。
目次があると読者はあなたの記事に「どんなことが書いてあるのか？」を事前に知ることができます。
レスポンシブデザインにすれば、勝手に「目次」が無料カスタマイズされるテーマが多いです。
わざわざ作業をすることは何もありません。
はてなブログに手を加える作業を減らすためにも、レスポンシブデザインにしておくことをおすすめします。
初心者のかたが、文章を書くことに専念できます。
【はてなブログの無料カスタマイズ５】グローバルメニューバーの無料カスタマイズ（Minimalism）
「Minimalism」のデザインテーマの無料カスタマイズの動画を作りました。
Brooklynのテーマの無料カスタマイズ動画も作りました。
※画像解析のほうは、はてなブログのデザインで１番人気の「Minimalism」のテーマのやり方になります。
グローバルメニューは下の画像の、赤枠のようなバーです。
メニューバーの設置は、読者が特定のカテゴリーの記事へアクセスしやすくするためにあります。
メニューバーの無料カスタマイズは、ある程度記事が増えてきてから、やるようにしましょう。
（カテゴリが少ないうちにやっても、あとで「やり直し」になってしまう可能性が高いです）
グローバルメニューには、基本的にカテゴリーの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カスタマイズ→ヘッダ→タイトル下に、上記のコードを追加します。
こんな感じで無印良品のカテゴリーページへのメニューバーが設置されます。↓
【はてなブログの無料カスタマイズ６】吹き出し風の無料カスタマイズは難しい！でも簡単にできる方法
上の画像のような、LINEの会話風のブログに憧れることってありませんか?
吹き出しは初心者の方には難しい。
いろいろなコードを、はてなブログの設定画面に貼り付けて、はじめてできるようになります。
そんなことに時間をかけていたら、ブログが苦痛になってしまいます。
それよりは、はじめは文章をかいてほしい。
ある程度アクセスが集まってから、中級者向けのはてなブログのカスタマイズに進むことをおすすめします。
「じゃあ、あの吹き出し風のカスタマイズを、諦めるということでしょうか?」
こんなご質問をしたいあなたへ。
かんたんにできる方法があります。
こんな感じです。↓↓
会話風になっています。話している感じを出すことができます。
まったく問題なく吹き出し風にできます。
簡単です。
やり方は、「小さい顔の画像を貼り付ける」だけです。
そして、顔の画像の下の会話文には「」かっこをつけるだけで、会話風にすることができます。
大きい画像を貼り付けても、かんたんに小さくすることが可能です。
はてなブログの記事を書く画面（パソコン操作時）で、画像をクリックして、赤枠矢印のところからサイズの調整ができます。
会話風に無料カスタマイズすることに時間をかけるよりは、記事を書きましょう！
※はてなブログ定型文機能を使うと、LINE風の吹き出しも簡単にできるようになりました。
こちらの記事内の動画を見ていただくと、はてなブログでかんたんに吹き出しの無料カスタマイズができるようになります。
はてなブログの画像貼り付けに時間がかかっている方は、こちらの記事もお読みください。
【はてなブログの無料カスタマイズ７】アフィリエイトの商品リンクの無料カスタマイズ
商品リンクを貼り付けるときに、キレイに表示させたいですよね。
クリック率もあがり、収入もあがります。
例えば、こんな感じAmazonや楽天の商品を紹介できてしまうんです。
初心者の方にも簡単に貼り付けができるようになっています。
もしもアフィリエイトのかんたんリンクを使って「はてなブログ」に貼ると、こんな感じになります。
とっても簡単にできます。やり方はこちらを参照してください。
カエレバを使った、はてなブログへのアフィリエイトの貼り方はこちら
【はてなブログ】カエレバとかんたんリンクの使い方！メリットデメリット
はてなブログののその他のカスタマイズ
はてなブログに「トップに戻る」というボタンを設置する無料カスタマイズです。
意外と簡単にできるので試してみてください。
はてなブログのサイドバーの記事タイトルの文字の大きさを変更するカスタマイズです。
はてなブログの無料カスタマイズ7つの注意点
はてなブログに手を加える作業は、ブログのレイアウトなどを崩してしまったりリスクがあります。
そのリスクを事前に回避するためにも、注意点をご説明します。
【注意点１】人気のデザインテーマを選ぶ。
はてなブログの人気のテーマを選びましょう！
なぜなら、ブロガーが発信している無料カスタマイズの情報がたくさん出てくるからです。
無料カスタマイズ情報を載せている記事をさがして、紹介されているコードをコピーして貼り付けたりするだけです。
簡単に無料で変更ができます。
人気のないテーマだとブロガーが発信している無料カスタマイズの情報が少ないです。
調べるのに時間がかかってしまいます。有料でココナラなどでカスタマイズをしてもらわなければいけなくなります。
時間短縮のためにも、人気のデザインテーマを選んでください。
【注意点２】レスポンシブデザインを選ぶ
レスポンシブ対応とは、「パソコンから見たレイアウトとスマートフォンから見たレイアウトを自動的に合わせてくれる」ものです。
はてなブログは、レスポンシブデザインに変更をしてほしい。
なぜなら、レスポンシブデザインにすれば、手を加える作業が少なくて済むからです。
パソコンとスマホからみたときの無料カスタマイズを、それぞれしなくても良くなります。
スマートフォンからの無料カスタマイズは、パソコンと同じになります。
つまり、スマートフォンの無料カスタマイズをわざわざしなくていいということです。
に手を加える作業が作業が減るということです。
人気のデザインテーマは、だいたいレスポンシブデザインの対応になっています。
【注意点３】プレビューで確認する
無料カスタマイズをしたあとは、「保存をする」前にプレビューで確認することをおすすめします。
間違った無料カスタマイズを、ブログへ反映させてしまうことを回避できるからです。
プレビューして「違うな……。」と思えば、保存をしなければいい。
はてなブログに、その作業は反映されません。
【注意点４】テスト用のブログを作って、事前にテストをする。
はてなブログは、無料版であれば３つ。
有料版であれば１０のブログを作ることができます。
事前にテスト用のブログを一つ作っておいて、そちらで無料カスタマイズを試すのもおすすめです。
間違った無料カスタマイズを、ブログへ反映させてしまうことを回避できるからです。
テスト用のブログは、非公開の設定にしておきましょう。
非公開の設定は、こちらからできます。
「設定」→「公開設定」→「自分のみ」
テスト用のブログは「自分のみ閲覧」にチェックをいれましょう。
テスト用ブログで試してから、メインのブログにカスタマイズを当てはめてあげると、失敗が少なくて済みます。
はてなブログのcss設定の部分にコードを入れて、いじるときはブログ全体に影響します。
記事が多いと、ダメージも大きいです。
テスト用ブログを使って、慎重に手を加える作業をしたほうが無難です。
【注意点５】カスタマイズのやりすぎは逆効果
カスタマイズによっては、ブログが見やすくなることもあります。
逆に、カスタマイズしすぎると、ブログが見にくくなってしまう可能性もあります。
無料カスタマイズのやりすぎは、ブログの表示速度に影響してくるということを忘れないでください。
ブログが表示される速度が遅くなると、読者の離脱率が高くなってしまいます。
カスタマイズのやりすぎには注意をしてください。
【注意点６】無料カスタマイズしても反映されないときの対処法
「デザインCSSにカスタマイズのコードをコピーして貼り付けたんだけど、変更されない……」
こんな場合は、デザインCSSに貼り付けたコードを一番上に貼り直してください。
これだけで改善して、きちんと反映されることがあります。
以前貼り付けたCSSコードが、カスタマイズの邪魔をしている可能性があります。
【注意点７】カスタマイズに時間をかけすぎない
はてなブログに手を加える作業は、最低限にしましょう。
文章を書く時間がなくなってしまうからです。
わたしも、あっという間に時間がなくなってしまったことがあります。
そういうときは「もっと文章を書けばよかった……。」と、いつも後悔します。
カスタマイズに時間がかかりすぎて、寝不足になってしまったこともあります。
無料カスタマイズは、最低限でいい。
読者が見やすければいいのです。
文章に時間をかけることは、たしかに楽しい。
でも、読者は「あなたのオリジナルの読みやすい文章」を求めています。
まとめ（はてなブログ７つの無料カスタマイズまとめ）
はじめに、サクッとはてなブログの無料カスタマイズを終わらせてしまいましょう。
今回説明したカスタマイズだけで、読みやすいブログになります。
カスタマイズは楽しいですが、ブログで稼ぐためには文章が一番大切です。
（※稼ぐよりも、カスタマイズを楽しみたいという方はガッツリやってください！）
設定からも、ブログのかんたんなカスタマイズができます。
例えば、はてなブログに表示される「上部のバー」を消したり、記事の下に「関連記事」を表示させたりなどです。
こちらの記事を見て、設定をきちんとやっておきましょう。
最新記事 by 石黒敬太 (全て見る)
- 【はてなブログ】Microsoft Clarityの設置方法（ヒートマップ） - 2023年1月29日
- YouTubeでAmazonのアフィリエイト広告を貼る（もしもアフィリエイト） - 2021年12月30日
- 日記が毎日２００アクセスの記事に！ - 2021年11月19日
