「はてなブログ」のデザインやレイアウトを整えたいと考えている方へ向けて、今まで私が紹介してきたWebデザインの「ブログカスタマイズ集」をまとめました。
ブログのサイトの見た目は「ユーザーの滞在率」や「直帰率」などにも影響し、SEOの観点からもとても大切です。
「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で色々な設定ができ、コードの内容がわかってくると楽しいものです。
今回ご紹介するカスタマイズ方法はすべて無料で実装可能なカスタマイズです。中でも厳選して、「HTML」「CSS」のプログラミングコードを使用するものを中心にまとめています。
私は大学院時代にはプログラミングで「Fortran」や「C」などを使っていたので、割と抵抗はない方なのですが、プログラミングに抵抗がある人へ向けて、初心者でもコピペでできるようにコードを紹介しています。
- なぜブログの「デザインカスタマイズ」が必要なのか
- 「グローバルメニュー」の追加カスタマイズ
- スマホ画面で「ハンバーガーメニュー」を表示するカスタマイズ
- サイドバーをおしゃれにカスタマイズする方法
- 「お問い合わせフォーム」作成方法
- はてなブログの「アイコンフォント」を使いこなす方法
- ブログでAmazon商品を紹介する「Amazlet」のリンクボタンのカスタマイズ方法
- はてなブログで「吹き出し会話」を設定する方法
- はてなブログで「この記事は〇分で読めます」実装方法
- はてなブログで「記事の更新日」を自動実装するコード
- 「トップに戻るボタン」の実装方法
- ブログの読み込み速さを改善する埋め込み「動画」を軽くする方法
- 長文化したデザイン「CSS」をDropBoxで劇的に編集をラクにする
- デザインカスタマイズを極めるなら「はてなブログPro」がおすすめ
- 収益化におすすめアフィリエイトサイト(ASP)
- WordPressへの移行もブログカスタマイズとして選択肢の一つに
- ココナラなら「ブログデザイン」の依頼もできる！
- まとめ
なぜブログの「デザインカスタマイズ」が必要なのか
今回ご紹介する記事はブログのアクセスをアップしたい人に向けた内容になります。
誤解をうまないように先に付け加えておくと、アクセスアップの目的であれば、最も重要なことはもちろんブログの記事の内容です。
ただし、記事の内容が良くても、見た目が整っていなかったり、読みたい記事にすぐ飛べなかったりと分かりにくいサイトは結果的にはアクセスが伸びにくい傾向があるかと思います。
とくに収益化の観点から「はてなブログ」の欠点として、WordPressと比較して、デザインカスタマイズに弱いという側面があります。
もちろん、はてなブログはWordPressと違って、Pro版でなけば維持費が無料なので仕方ないとは思いますが、アクセスを少しでも増やすためにはその欠点である見やすさを改善する必要があります。
収益化をするにはざっくり言うと「ブログ開設」⇒「記事を書く」⇒「ASPに登録」⇒「広告を掲載する」⇒「成果発生」という流れが必要になります。
収益を伸ばすにはアクセスアップは必要不可欠ですが、読者のニーズを満たしつつ、検索順位を上げる必要があります。
そのためには少しでも離脱率を下げ、滞在率・回遊率をあげるための施策の一つとしてブログのデザイン面のカスタマイズが必要になります。
今回ご紹介するブログカスタマイズ方法で少しでもブログの見た目がよくなり、アクセスアップにもつながれば幸いです。
以下で「はてなブログ」と「WordPress」のメリット・デメリットをまとめています。
「ブログ副業」で収益化したいと考えている人は以下の記事がおすすめです。
「グローバルメニュー」の追加カスタマイズ
上の青字で囲ったメニュー画面のことを「グローバルメニュー」と呼びます。これがあると見る側が見たい記事にすぐにアクセスできるので便利です。
グローバルメニューのメリットとしては、ユーザの回遊率を増やすことができます。例えば、自分がGoogle検索で「ブログ副業の情報」を探していたとして、そのサイトがとても分かりやすく、満足感が得られた場合には他の有益な収益化情報もそのサイトにのっていないか詳しく読み漁るかと思います。
その時に「ブログ運営」などのカテゴリーがそのサイトにあった場合、そのリンクから知りたい情報へすぐにアクセスできると、便利ですよね。
まだ実装していない方は、以下の記事で「コードのコピペ」で簡単に実装できる方法を詳しく解説しているので参考にしてみてください。
スマホ画面で「ハンバーガーメニュー」を表示するカスタマイズ
こちらははてなブログで「グローバルメニュー(グローバルナビゲーション)」をスマホでみるさいに「ハンバーガーメニュー」も表示できるように対応したコードの紹介です。
最近ではパソコンよりスマホでブログを閲覧する人が圧倒的に多いことから、スマホ上でどのように見えるかも意識することが大切です。
ハンバーガーメニューと聞いて「何それうまいの？」と思ったかもしれませんが、食べられません。
ハンバーガーメニューとは、サイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される形式のことを言います。
主にスマートフォンのUIデザインとして用いられています。スマートフォンでは、パソコンと比べて画面サイズに制限があります。
そのため、グローバルナビゲーションなどを表示させると画面上が情報過多になってしまうため、ハンバーガメニューの中に隠すことで情報を整理して見やすくできるメリットがあり多くのブログで採用されています。
以下でコピペ可能なコードを紹介しています。
サイドバーをおしゃれにカスタマイズする方法
サイドバーは初期設定では「少し味気ないな・・」と感じている方も多いのではないでしょうか。ちょっとした工夫の一つでブログの見え方も随分変わってきます。
今回ご紹介する方法はサイドバーの記事内検索の左に「🔍マーク」プロフィールやSNSの左横にそれぞれ「プロフィールマーク,★マーク」をつけ、お洒落な感じにカスタマイズする方法です。カテゴリーや注目記事にも可愛らしいアイコンが付いて見やすくできるのでおすすめです。
Wordpressでは当たり前のようにこの様なデザインが実装されているブログを見かけることが多いですが、はてなブログでは意外と少ないんです。
ぜひ実装をして、ブログデザインを自分なりにカスタマイズしてみましょう。
下記コードを「デザイン」→「カスタマイズ(トルクアイコン)」→デザインCSS
へ貼り付けてください。
下準備：コードをコピーし,headタグにコードを追加しましょう。
<link href="https://use.fontawesome.com/releases/v5.6.1 /css/all.css" rel="stylesheet">
「管理画面」→「設定」→「詳細設定」→「headに要素を追加」
「はてなブログ」の場合
管理画面の「設定」→「詳細設定」→「head要素を追加」でコードに貼り付け
「WordPress」の場合
「ダッシュボード」→「外観」→「テーマエディター」→右バー[header.php]
デザインCSS実装コード
※コピペする際には改行には気を付けて下さいね。
また、必ず実装する前にはバックアップをとるようにしましょう。使用しているブログのテーマによっては反映しない場合もあるので、必ず事前確認が必要です。
コード初心者の方へ向けて、以下でも詳しく解説しています。
>>サイドバーにコードコピペで簡単に実装できるカスタマイズ方法
「お問い合わせフォーム」作成方法
「お問い合わせフォーム」を設置しておくことで、企業からの依頼や個人の方からの問い合わせを受けることが可能になります。レビュー記事作成のきっかけにもなるので、おすすめです。
Googleアドセンスによってブログを収益化したい人は「お問い合わせフォーム」は必須となります。
はてなブログの「アイコンフォント」を使いこなす方法
はてなブログのデフォルトアイコンを使う方法
「はてなブログ」のカスタマイズの第一歩は「アイコンフォント」を使いこなすことではないかと個人的には思っています。「アイコンフォント」は一言でいうと、「絵文字」のようなものです。
「見出し」の色を変えたり、線の種類を変えることも見た目に大きく影響しますので、大切ですが、まずは「はてなブログ」の”デフォルトデザイン”の中から選べばいいと思います。
しかし、「アイコンフォント」の設定は自分自身で設定しなければならないカスタマイズの一つで、見た目のオシャレさに大きく影響します。
実ははてなブログで使えるアイコンフォントは毎年増えており、昨年から「DAZN」など6種類増えて、"合計123種類”になっています。
はてなブログでは足りない「Font Awesome」を活用したアイコンフォント設定方法
はてなブログのアイコンフォントは約100種類程度ですが、「Font Awesome」は何万種類ものアイコンが存在します。 間違いなく、「Font Awesome」は設定しておいた方がいいカスタマイズツールの一つです。
ただし、このフォントアイコンが「はてなブログ」では表示されないことがあります。「はてなブログ」には記述ミス防止のために空タグの自動削除機能がデフォルトで備わっていることが原因です。
WordPress向けに紹介されている手順で記述しても画面にアイコンが表示されなくて困っている方が多いので、こちらの対処方法についても以下の記事で詳しく解説しています。
>>はてなブログでオシャレな「Font Awesome」のアイコンフォントを使う方法
ブログでAmazon商品を紹介する「Amazlet」のリンクボタンのカスタマイズ方法
AmazonアソシエイトIDを持っている方に向けて、Amazonの商品リンクを見やすく貼り付けられる”amazlet”の使い方を紹介します。
Amazletのリンク先を”ボタンリンク”に変更する方法もあわせて紹介します。今回ご紹介する方法は”デザインCSS”を使わずに”HTML”のみで作成できる方法なので万能です。私の”デザインCSS”がうまく働かなかった為に、この方法を考えました。
デザインCSSを使わなくても「無料はてなブログ」でも確実にリンク先を”ボタンアイコン”に変更できます！
<<Amazon商品の紹介で使えるAmazletのリンクボタン作成方法
もしもアフィリエイトを使えばすればさらに便利な商品を紹介できる”リンクボタン”が実装できます。以下で詳しく解説しています。
はてなブログで「吹き出し会話」を設定する方法
Wordpressではカンタンに設定できる「吹き出し会話」。はてなブログでは意外と難しいんですよね。
吹き出し会話のメリットは”文章が読みやすくなる”ことです。 そのためSEO対策として、読者の滞在率アップにもつながります。
実際に有名なブロガーの方々で吹き出し会話を使ってない人はいません。それだけのメリットがあるから設定しているんです。アクセスアップを狙っている方はぜひ導入してみましょう。
はてなブログで「この記事は〇分で読めます」実装方法
こちらは記事の文字数に応じて、”この記事は〇分で読めます”という表示をHTMLを使って自動で設定する方法の紹介です。私の記事にもすべて文字数から”〇分で読めます”という表示が記事の右上に表示されているのがわかるかと思います。
「はてなブログ」でもコードのコピペで即実装できます。もちろん「無料版はてなブログ」でも実装可能です。簡単に実装出来て「SEO対策」としても有効なのでこちらもオススメです。
記事が長い場合はブックマークしておいて家に帰ってからゆっくりパソコンで読むこともできますし、短ければ”さらっと読んでしまおう”と判断する材料にもなります。
私が普段よく閲覧しているYahoo!ニュースでも記事が何分で読めるか表示されているのを目にします。
”記事を読む時間”を設定する実装コード(HTML)
表示イメージとしては,赤枠の右上のように表示されます。私の現状の設定では1分間で600字を読む想定になっています。
<script type="text/javascript"> addEventListener('DOMContentLoaded', function() { var wpm = 600; var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length; var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>'; $('.entry-content').prepend(message); }, false); </script>
・3行目の”var wpm”の数値(600)を変更すれば、1分間に読む時間が変更可能。
・5行目の”font-size”の80%を変更すれば、フォントサイズが変更可能。
・5行目の"color"の#999999を変更すれば色の変更可能。
・5行目の”この記事は約'+ Math.ceil(length/wpm) +'分で読めます。”の箇所をいじれば言い回しは自由に変更可能です。”約'+ Math.ceil(length/wpm) +'分で読めます。”ともう少しシンプルな言い回しにしてもOKです。
コードの貼り付け場所
グローバルメニューやTwitterのフォローボタンのアイコン実装のように個別にURLの設定も不要なので、簡単に実装できます。
また、”CSS”も使わないので、コードの優先度によって表示されないエラーも比較的少ないとも思いますので、オススメです。
”個別のURL設定等も一切不要”なので、コピペで実装可能です！
はてなブログで「記事の更新日」を自動実装するコード
こちらは「はてなブログ」で記事の更新日をHTML,CSSコードで自動表示する方法です。
何か調べものをするときは新しい情報から検索をしますよね。内容やジャンルにもよりますが、私もトレンド情報などタイムリーな最新情報を知りたい場合などは新しい記事から探しています。
そんな時に仮に少し古い記事でも更新日が記載されリライトされている場合は情報がしっかり更新されてるから読んでみようかなという気持ちにもなります。
今回ご紹介する”更新日実装”コードは「無料版」でも可能ですので、是非トライしてみましょう。数分で実装も可能です。
「トップに戻るボタン」の実装方法
こちらは「はてなブログ」でHTML,CSSコードを使って”ページトップへ戻るボタン”を追加する方法です。
Yahoo！のTOPページにも最近はトップに戻るボタンが画面右下に自動設定されています。「SEO対策」としても有効で、記事内の回遊率が増えます。
「無料版はてなブログ」でも設定可能ですので、興味のある方は設定してみましょう。
私のブログにもつい「トップに戻るボタン」を追加(画面右下)していますが、文章を読み返したり、グローバルメニューで他のページを見たい時にとても便利です。
今回、ご紹介するコードも詳しい内容が分からなくても、所定箇所にコード貼り付ければトップボタンの設定が可能です。
はてなブログではデフォルトのデザイン設定によりCSSが効かない不具合もあるので、困っている方も多いようです。CSSが効かない場合の対策方法もあわせて紹介しています。
ブログの読み込み速さを改善する埋め込み「動画」を軽くする方法
こちらはYoutube動画をブログに埋め込むときに動画のデータを軽くし、サイトの読み込みを早くする方法です。
最近、私のブログで音楽を扱った記事が急激に増えているので、たくさんのYoutube動画を埋め込む機会が増えてきました。
動画が簡単に埋め込めるのは便利なのですが、その反面サイトの読み込み速度が更に遅くなってしまいます。
長文化したデザイン「CSS」をDropBoxで劇的に編集をラクにする
冒頭に紹介したブログカスタマイズをすべて採用して頂いた方は次の悩みとして、CSSが長文してしまって編集がしにくい！と感じているのではないでしょうか。
「はてなブログ」である程度の期間ブログ運営していると徐々に「CSS」や「HTML」を使ったカスタマイズが増えてきます。
特に「はてなブログ」ではプログラミングコードの色分けがされておらず行数などもわからず編集がしにくいんですよね。そもそも編集をあまり想定していないようなシステムになっていて、私自身コード変更をする際にストレスでした。
そんな時にオススメしたいのは「DropboxやOnedriveなどの外部共有ファイルを使って、共有フォルダ上でCSSを編集する方法」になります。
この方法を使えば、はてなブログ上で編集するよりは数倍楽にコード変更ができるので、おすすめです。
以下で詳しく解説しています。
デザインカスタマイズを極めるなら「はてなブログPro
」がおすすめ
うえの比較表に示す通り、はてなブログProでは無料版ではできないさまざまな機能を備えています。
さらにワードプレスとは違い、サーバー契約やセキュリティ管理はすべて”はてなブログ運営”が行ってくれます。
色々とブログ運営を一から勉強するのが面倒だけど少しでも本格的にブログ副業をしたいって方へははてなブログProもおすすめです。
はてなブログProでは自動広告を外せる
自動広告の有無の設定についてですが、無料版の場合、自動的に広告がついてしまいます。はてなブログProであればその自動広告を自由に外すことができます。
これはアフィリエイトを本気でしようと考えている方にとっては大変重要なポイントかと思います。
自動更新を外していないと、はてなブログの自動更新の広告にアフィリエイト報酬を取られてしまう可能性があります。
はてなブログProでは独自ドメインの設定ができる！
次に独自ドメインの設定ですが、これは無料版だとできずはてなブログProだと独自ドメインを設定することができます。
独自ドメインに設定することで得られるメリットとして以下があげられます。
まず、独自ドメインだとSEO的に有利になります。そのため、独自ドメインにして負う方が訪問者も必然的に多くなります。
また、Googleアドセンスの申請は推奨が独自ドメインになりますので、審査が有利になります。
はてなブログProではカスタマイズの自由度が高い！
はてなブログProではトップページの表示形式(PC版)をカンタンに「一覧形式」にできます。
これにすることで、今までトップページに記事全文がズラーっと表示されていたのが、タイトル一覧になり読みやすくなります。
レスポンシブデザインを適用すれば、PCもモバイル表示も同じ感じで表示ができるのでおすすめです。
また、無料版だと記事中の様々なワードにはてな側で強制的にアンダーラインが引かれ、リンクになってしまう「キーワードリンク」も非表示にすることができ、より見やすさが引き立たれます。
このように「独自ドメイン」設定以外にもざーっと並べただけでも嬉しい機能がたくさん備わっています。
ある程度記事が増えてきた方や、はてなブログに慣れている方へおすすめです。
以下の記事でではてなブログProと無料版の比較をまとめています。
収益化におすすめアフィリエイトサイト(ASP)
物販型報酬を得るためには、アフィリエイトサイトへの登録が必要となります。実際に利用している方なら分かると思いますが、Googleアドセンス一本では大きな収益化は難しいのが現状です。
月5万PVを維持できていても、数千円～1万円程度です。そのため、ASPと併用することをおすすめします。
アフィリエイトサイトは数多くの種類がありますが、おすすめできる代表的なASPは以下となります。
中には審査が難しいASPもありますが、全て登録申請を済ませておきましょう。
A8.netとは
出典：A8.net
A8.netは対応ジャンルも幅広い
A8.netでは登録の審査も無く、登録料も無料なので、これからアフィリエイトを始めようと思っている方にはぜひおすすめしたいです。
自分のサイトやブログを持っていない方でも登録OKというお手軽さが魅力です！誰でも簡単にアフィリエイトを始めることができますよ。
\13年連続満足度No.1のASP/
※登録は3分でカンタンに完了できます。
もしもアフィリエイト
”Amazonアソシエイト”と同率になっているため、Amazonアソシエイトの代わりに使う人も多くいます。Amazon商品を紹介するサイトには”必須のASP”です。
アフィリエイトリンクを数秒で作れるという他にない強みもあります。
・Amazonアソシエイト審査のような「3件販売ノルマ」が無い
・Amazonアソシエイトと報酬率が同じ
・もしもかんたんリンク、カエレバ、リンカーが使用できる
・1つのASPでまとめることで、収益もまとめられる
2020年からAmazonアソシエイト審査に「3件販売ノルマ」が追加され、さらに難化しています。
もしもアフィリエイトでは審査において、そのような販売ノルマが一切ありません。報酬率もAmazonアソシエイトと同じ高報酬率になっています。
さらに、もしもアフィリエイトでは「Amazon、楽天市場、Yahoo！ショッピング」とメインの物販アフィリエイトと提携でき、一括でまとめられます。
以下のようなリンクが数秒で作成できるのも魅力です。
↓
ユーザーによってはAmazon中心の人もいれば、「楽天」もしくは「Yahoo!ショッピング」で購入する人もいます。取りこぼしを防ぐためには上の様に各ASPを一つに集約することが大切です。
・もしもなら「1000円から換金」が可能
・支払い手数料が無料
afb(アフィｂ)
出典：afb(アフィb)
サポートもしっかりしており、誰でも簡単にアフィリエイトブログを作ることが出来るように紹介マニュアルも付きます。さらに、アフィｂの最低振込額は業界でも１番安い「777円」になっています。
結果として、”5年連続で利用者満足度率No.1”に選ばれている大手ASPの一つです。
A8.netとは別のアフィリエイト・プログラムに関する意識調査（「ASP意識調査」）2020」における利用者満足度において、最高評価となる「とても満足」とする獲得比率が6年連続、No.1となっています。こちらもぜひ登録しておきたいASPです。
・女性向け広告に強いが、他の独自案件も多数あり
・afbは5年連続満足度1位の信頼のおけるASP
※登録審査は3分でカンタンに完了できます。
WordPressへの移行もブログカスタマイズとして選択肢の一つに
もし、たくさん記事をすでに書いてしまっており、そこそこの収益化ができている方は選択肢として、はてなブログからWordPress移行も考えていいかと思います。
WordPressへの移行の目安は月1,000円以上の利益が出ているかです。
というのもWordPressでサイト運営するためにはドメインの取得やサーバーとの契約などコストがかかり、目安として月額1000円の維持費がかかるためです。
もし、たくさん記事をすでに書いてしまっており、そこそこの収益化ができている方がはてなブログからWordPress移行するなら、サイト引っ越しやさんの利用がおすすめです。
ホームページの「無料ブログ」という項目から、お問い合わせをすればお見積りなどすぐに対応してくれます。
多少費用はかかりますが、時間を節約しつつ、大量に作成した記事を簡単にWordPressへ移行できるので、とても便利です。
ココナラなら「ブログデザイン」の依頼もできる！
WEBデザインに自信が無い方はココナラでWEBデザイン代行を依頼することもひとつの選択肢としてありです。
ココナラ（coconara・kokonara）とは、自分のスキルを販売できるサービスです。
人気女優の吉岡里帆さんがCMで起用され目を引いた方も多いのではないでしょうか。
知識・スキル・経験を売り買いできるフリーマーケットとしては最も人気で有名なサービスになります。
やり取りは匿名で可能で、決済もサイト上でできるので安全に利用することができます。
私も実はココナラで「はてなブログのWEBデザイン代行」「登山の提案」「Excel代行」の販売も行っており、それぞれの項目で販売実績もあります。
過去には、企業の方からの依頼もあり、はてなブログのWEBデザインの代行対応をしたこともあります。
私もココナラでブログカスタマイズの代行を行っておりますので、以下よりお気軽にご相談orご依頼頂ければ幸いです。
もしくはココナラで「れど WEBデザイン」等で検索して頂いても見つかるかと思います。
私のブログ内でも色々なカスタマイズ法を紹介しておりますが、実際にはプログラミングコードに抵抗感がある方も多いようで定期的に依頼して頂いております。
例えばブログのデザインを整えるのに自分では自信が無い方はココナラで依頼してみるのもおすすめです。
まとめ
今回は私が実際に活用している「ブログカスタマイズ方法まとめ」を紹介しました。
冒頭にも説明しましたが、ブログのサイトの見た目はユーザーの滞在率や直帰率などにも影響し、SEOの観点からもとても大切です。
実際に私が検索する際にもパッと見てサイトが綺麗だとじっくり読みたいという気持ちになります。
「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で多種多様な設定が可能です。
1年以上ブログを継続し、試行錯誤しながら記事を継続してきたおかげで、私のブログは無料はてなブログにもかかわらず安定した毎日数千アクセスが維持できています。日々読んでいただけている読者様にはとても感謝しております。
実際に私が行った施策で成果がでているので、参考になるかと思います。
PV数を増やすために重要な要素としては「キーワード選定」を意識した上で、検索順位の高い記事をいかに量産できるかだと考えます。
キーワード選定には「ラッコキーワード」の無料ツールを使いましょう。「ラッコキーワード」については私が100記事到達した際の収益報告の記事でも詳しく解説しています。
さらに、既存の記事の検索順位を定期的にGoogle Search Consoleを使って、確認することも大切です。ユーザーの検索意図を意識して、検索順位の高い記事をリライトしつつ、質を高めていくことで、検索順位もあがっていきます。
検索順位はドメイン力(検索エンジンからの信頼度)とも関係しており、短期的に容易にあがっていくものではないので、コツコツと時間をかけて積み上げていくことで、中長期的にGoogle検索エンジンからの評価もあがり、検索順位もあがっていきます。
以上、参考にしていただければ幸いです。
