redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

「はてなブログ」のアクセス数・PVを増やすWebデザイン「ブログカスタマイズ」方法まとめ

はてなブログ カスタマイズ

はてなブログ」のデザインやレイアウトを整えたいと考えている方へ向けて、今まで私が紹介してきたWebデザインの「ブログカスタマイズ集」をまとめました。

 

ブログのサイトの見た目は「ユーザーの滞在率」や「直帰率」などにも影響し、SEOの観点からもとても大切です。

 

「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で色々な設定ができ、コードの内容がわかってくると楽しいものです。

 

今回ご紹介するカスタマイズ方法はすべて無料で実装可能なカスタマイズです。中でも厳選して、「HTML」「CSS」のプログラミングコードを使用するものを中心にまとめています。

 

私は大学院時代にはプログラミングで「Fortran」や「C」などを使っていたので、割と抵抗はない方なのですが、プログラミングに抵抗がある人へ向けて、初心者でもコピペでできるようにコードを紹介しています。

 

 

 

なぜブログの「デザインカスタマイズ」が必要なのか

今回ご紹介する記事はブログのアクセスをアップしたい人に向けた内容になります。

 

誤解をうまないように先に付け加えておくと、アクセスアップの目的であれば、最も重要なことはもちろんブログの記事の内容です。

 

ただし、記事の内容が良くても、見た目が整っていなかったり、読みたい記事にすぐ飛べなかったりと分かりにくいサイトは結果的にはアクセスが伸びにくい傾向があるかと思います。

 

とくに収益化の観点から「はてなブログ」の欠点として、WordPressと比較して、デザインカスタマイズに弱いという側面があります。

 

もちろん、はてなブログWordPressと違って、Pro版でなけば維持費が無料なので仕方ないとは思いますが、アクセスを少しでも増やすためにはその欠点である見やすさを改善する必要があります。

 

収益化をするにはざっくり言うと「ブログ開設」⇒「記事を書く」⇒「ASPに登録」⇒「広告を掲載する」⇒「成果発生」という流れが必要になります。

 

収益を伸ばすにはアクセスアップは必要不可欠ですが、読者のニーズを満たしつつ、検索順位を上げる必要があります。

 

そのためには少しでも離脱率を下げ、滞在率・回遊率をあげるための施策の一つとしてブログのデザイン面のカスタマイズが必要になります。

 

今回ご紹介するブログカスタマイズ方法で少しでもブログの見た目がよくなり、アクセスアップにもつながれば幸いです。

 

 以下で「はてなブログ」と「WordPress」のメリット・デメリットをまとめています。

redo5151.hatenablog.com

 

「ブログ副業」で収益化したいと考えている人は以下の記事がおすすめです。

redo5151.hatenablog.com

redo5151.hatenablog.com

 

「グローバルメニュー」の追加カスタマイズ

グローバルメニュー

上の青字で囲ったメニュー画面のことを「グローバルメニュー」と呼びます。これがあると見る側が見たい記事にすぐにアクセスできるので便利です。

 

グローバルメニューのメリットとしては、ユーザの回遊率を増やすことができます。例えば、自分がGoogle検索で「ブログ副業の情報」を探していたとして、そのサイトがとても分かりやすく、満足感が得られた場合には他の有益な収益化情報もそのサイトにのっていないか詳しく読み漁るかと思います。

 

その時に「ブログ運営」などのカテゴリーがそのサイトにあった場合、そのリンクから知りたい情報へすぐにアクセスできると、便利ですよね。

 

まだ実装していない方は、以下の記事で「コードのコピペ」で簡単に実装できる方法を詳しく解説しているので参考にしてみてください。

redo5151.hatenablog.com

 

スマホ画面で「ハンバーガーメニュー」を表示するカスタマイズ

はてなブログ ハンバーガーメニュ

こちらははてなブログで「グローバルメニュー(グローバルナビゲーション)」をスマホでみるさいに「ハンバーガーメニュー」も表示できるように対応したコードの紹介です。

 

最近ではパソコンよりスマホでブログを閲覧する人が圧倒的に多いことから、スマホ上でどのように見えるかも意識することが大切です。

 

ハンバーガーメニューと聞いて「何それうまいの?」と思ったかもしれませんが、食べられません。

 

ハンバーガーメニュー はてなブログ

 

 

ハンバーガーメニューとは、サイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される形式のことを言います。

 

主にスマートフォンのUIデザインとして用いられています。スマートフォンでは、パソコンと比べて画面サイズに制限があります。

 

そのため、グローバルナビゲーションなどを表示させると画面上が情報過多になってしまうため、ハンバーガメニューの中に隠すことで情報を整理して見やすくできるメリットがあり多くのブログで採用されています。

 

以下でコピペ可能なコードを紹介しています。

redo5151.hatenablog.com

サイドバーをおしゃれにカスタマイズする方法

サイドバー カスタマイズ

サイドバーは初期設定では「少し味気ないな・・」と感じている方も多いのではないでしょうか。ちょっとした工夫の一つでブログの見え方も随分変わってきます。

 

今回ご紹介する方法はサイドバーの記事内検索の左に「🔍マーク」プロフィールやSNSの左横にそれぞれ「プロフィールマーク,★マーク」をつけ、お洒落な感じにカスタマイズする方法です。カテゴリーや注目記事にも可愛らしいアイコンが付いて見やすくできるのでおすすめです。

 

Wordpressでは当たり前のようにこの様なデザインが実装されているブログを見かけることが多いですが、はてなブログでは意外と少ないんです。

 

ぜひ実装をして、ブログデザインを自分なりにカスタマイズしてみましょう。

 

下記コードを「デザイン」→「カスタマイズ(トルクアイコン)」→デザインCSS

へ貼り付けてください。

 

下準備:コードをコピーし,headタグにコードを追加しましょう。

 

<link href="https://use.fontawesome.com/releases/v5.6.1 /css/all.css" rel="stylesheet"> 

 

「管理画面」→「設定」→「詳細設定」→「headに要素を追加」

f:id:redo5151:20191217233543p:plain

 

はてなブログ」の場合

管理画面の「設定」→「詳細設定」→「head要素を追加」でコードに貼り付け

WordPress」の場合

 「ダッシュボード」→「外観」→「テーマエディター」→右バー[header.php]

 

デザインCSS実装コード

/*↑----fontawesome↑*/
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
  background: none;
  border: none;
}

.hatena-module-title{
  position: relative;
  color: white;/* 文字色 */
  background: #81d0cb;/* 背景色 */
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;/* タイトル内の余白 */
  margin: 0px -10px 20px -10px;/* タイトルの位置を調整。 */
}

/* プロフィール */
.hatena-module-profile .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f2bb";/* アイコンフォント */
  position: absolute;
  left : 0.5em;
}
/* 検索 */
.hatena-module-search-box .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f002";
  position: absolute;
  left : 0.5em; 
}
/* 月別アーカイブ */
.hatena-module-archive .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f187";
  position: absolute;
  left : 0.5em; 
}
/* 最新記事 */
.hatena-module-recent-entries .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  left : 0.5em;  
  color: white;
}
.hatena-module-title a {
  color: white;important!
}
/* 注目記事 */
.hatena-module-entries-access-ranking .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f201";
  position: absolute;
  left : 0.5em; 
  
}
/* カテゴリー */
.hatena-module-category .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f022";
  position: absolute;
  left : 0.5em; 
}
/* HTML */
.hatena-module-html .hatena-module-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f005";
  position: absolute;
  left : 0.5em; 
}

※コピペする際には改行には気を付けて下さいね。

 

また、必ず実装する前にはバックアップをとるようにしましょう。使用しているブログのテーマによっては反映しない場合もあるので、必ず事前確認が必要です。

 

コード初心者の方へ向けて、以下でも詳しく解説しています。

 

>>サイドバーにコードコピペで簡単に実装できるカスタマイズ方法

「お問い合わせフォーム」作成方法

「お問い合わせフォーム」を設置しておくことで、企業からの依頼や個人の方からの問い合わせを受けることが可能になります。レビュー記事作成のきっかけにもなるので、おすすめです。

 

Googleアドセンスによってブログを収益化したい人は「お問い合わせフォーム」は必須となります。

 

>>「お問い合わせフォーム」の作成方法

 

はてなブログの「アイコンフォント」を使いこなす方法

はてなブログのデフォルトアイコンを使う方法

はてなブログ アイコンフォント

はてなブログ」のカスタマイズの第一歩は「アイコンフォント」を使いこなすことではないかと個人的には思っています。「アイコンフォント」は一言でいうと、「絵文字」のようなものです。

 

「見出し」の色を変えたり、線の種類を変えることも見た目に大きく影響しますので、大切ですが、まずは「はてなブログ」の”デフォルトデザイン”の中から選べばいいと思います。

 

しかし、「アイコンフォント」の設定は自分自身で設定しなければならないカスタマイズの一つで、見た目のオシャレさに大きく影響します。

 

実ははてなブログで使えるアイコンフォントは毎年増えており、昨年から「DAZN」など6種類増えて、"合計123種類”になっています。

 

>>はてなブログのアイコンフォント”の使い方と種類

はてなブログでは足りない「Font Awesome」を活用したアイコンフォント設定方法

Font Awesome

はてなブログのアイコンフォントは約100種類程度ですが、「Font Awesome」は何万種類ものアイコンが存在します。 間違いなく、「Font Awesome」は設定しておいた方がいいカスタマイズツールの一つです。

 

ただし、このフォントアイコンが「はてなブログ」では表示されないことがあります。「はてなブログ」には記述ミス防止のために空タグの自動削除機能がデフォルトで備わっていることが原因です。

 

WordPress向けに紹介されている手順で記述しても画面にアイコンが表示されなくて困っている方が多いので、こちらの対処方法についても以下の記事で詳しく解説しています。

 

>>はてなブログでオシャレな「Font Awesome」のアイコンフォントを使う方法

ブログでAmazon商品を紹介する「Amazlet」のリンクボタンのカスタマイズ方法

AmazonアソシエイトIDを持っている方に向けて、Amazonの商品リンクを見やすく貼り付けられる”amazlet”の使い方を紹介します。

 

Amazletのリンク先を”ボタンリンク”に変更する方法もあわせて紹介します。今回ご紹介する方法は”デザインCSS”を使わずに”HTML”のみで作成できる方法なので万能です。私の”デザインCSS”がうまく働かなかった為に、この方法を考えました。

 

デザインCSSを使わなくても「無料はてなブログ」でも確実にリンク先を”ボタンアイコン”に変更できます!

 

<<Amazon商品の紹介で使えるAmazletのリンクボタン作成方法

 

もしもアフィリエイトを使えばすればさらに便利な商品を紹介できる”リンクボタン”が実装できます。以下で詳しく解説しています。

redo5151.hatenablog.com

 

はてなブログで「吹き出し会話」を設定する方法

はてなブログ 吹き出し会話

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です。

 

コードの貼り付け場所

f:id:redo5151:20191120212745p:plain

はてなブログの管理画面左タブ→デザイン→カスタマイズ(トルクアイコン)→記事→”記事上”

 

グローバルメニューやTwitterのフォローボタンのアイコン実装のように個別にURLの設定も不要なので、簡単に実装できます。

 

また、”CSS”も使わないので、コードの優先度によって表示されないエラーも比較的少ないとも思いますので、オススメです。

 

 

<<「この記事は〇分で読めます」を記事に自動表示する方法

 

はてなブログで「記事の更新日」を自動実装するコード 

記事の更新日 コード

 

こちらは「はてなブログ」で記事の更新日をHTML,CSSコードで自動表示する方法です。

 

何か調べものをするときは新しい情報から検索をしますよね。内容やジャンルにもよりますが、私もトレンド情報などタイムリーな最新情報を知りたい場合などは新しい記事から探しています。

 

そんな時に仮に少し古い記事でも更新日が記載されリライトされている場合は情報がしっかり更新されてるから読んでみようかなという気持ちにもなります。

 

今回ご紹介する”更新日実装”コードは「無料版」でも可能ですので、是非トライしてみましょう。数分で実装も可能です。

 

<<はてなブログで記事に更新日を自動実装する方法

「トップに戻るボタン」の実装方法 

トップに戻るボタン

こちらは「はてなブログ」でHTML,CSSコードを使って”ページトップへ戻るボタン”を追加する方法です。

 

Yahoo!のTOPページにも最近はトップに戻るボタンが画面右下に自動設定されています。「SEO対策」としても有効で、記事内の回遊率が増えます。

 

「無料版はてなブログ」でも設定可能ですので、興味のある方は設定してみましょう。

 

私のブログにもつい「トップに戻るボタン」を追加(画面右下)していますが、文章を読み返したり、グローバルメニューで他のページを見たい時にとても便利です。

 

今回、ご紹介するコードも詳しい内容が分からなくても、所定箇所にコード貼り付ければトップボタンの設定が可能です。

 

はてなブログではデフォルトのデザイン設定によりCSSが効かない不具合もあるので、困っている方も多いようです。CSSが効かない場合の対策方法もあわせて紹介しています。

 

<<「トップへ戻るボタン」を実装する方法

 

ブログの読み込み速さを改善する埋め込み「動画」を軽くする方法

こちらはYoutube動画をブログに埋め込むときに動画のデータを軽くし、サイトの読み込みを早くする方法です。

 

最近、私のブログで音楽を扱った記事が急激に増えているので、たくさんのYoutube動画を埋め込む機会が増えてきました。

 

動画が簡単に埋め込めるのは便利なのですが、その反面サイトの読み込み速度が更に遅くなってしまいます。

 

<<「Youtube動画」を軽くするコード

 

長文化したデザイン「CSS」をDropBoxで劇的に編集をラクにする

冒頭に紹介したブログカスタマイズをすべて採用して頂いた方は次の悩みとして、CSSが長文してしまって編集がしにくい!と感じているのではないでしょうか。

 

はてなブログ」である程度の期間ブログ運営していると徐々に「CSS」や「HTML」を使ったカスタマイズが増えてきます。

 

特に「はてなブログ」ではプログラミングコードの色分けがされておらず行数などもわからず編集がしにくいんですよね。そもそも編集をあまり想定していないようなシステムになっていて、私自身コード変更をする際にストレスでした。

 

そんな時にオススメしたいのは「DropboxやOnedriveなどの外部共有ファイルを使って、共有フォルダ上でCSSを編集する方法」になります。

 

この方法を使えば、はてなブログ上で編集するよりは数倍楽にコード変更ができるので、おすすめです。

 

以下で詳しく解説しています。

 

<<長文化したCSSをDropboxで楽に編集する方法

 

WEBデザインを学ぶのにおすすめなプログラミングスクール

TechAcademy [テックアカデミー]

Techacademy

Webデザインを深く学びたいならプログラミングスクールもおすすめです。現在、給料も高くニーズも多いことから、IT転職希望者が急増しています。

 

そのなかで、未経験者向けのプログラミングスクールの需要もどんどんあがっています。

 

私も大学、大学院時代からFortranC言語などを学んできましたがやはり誰かに教えてもらうと格段に習得の速さが違うことを実感しています。

 

TechAcademy [テックアカデミー]はオンラインベースのプログラミングスクールです。

会社情報 
□企業名
キラメックス株式会社
□所在地
<本社オフィス> 〒150-0002 東京都渋谷区渋谷1-17-4 PMO渋谷8F
□事業概要
Tech Academy:プログラミング教育事業

「HTML」や「CSS」などを学べるWebデザインコース はもちろんのこと以下の多くのプログラミングの学習が可能です。

 

コースの例

 

TechAcademy [テックアカデミー]の特徴

全て現役のエンジニアが指導

基本的には質問は全てオンラインでのやり取りになりますが、回答者や個人メンターは全て現役のエンジニアになっています。スクールの卒業生をメンターとして採用しているスクールも多い中、全員が現役のプロの方というのは大きな魅力ですね。

 

質問に対しての回答のムラが少ないというのは、学習を進めていく中で大事な要素になりますので、「Tech Academy」の特徴の一つだと感じます。

オンライン完結型スクール

忙しい社会人や遠方の方にはありがたい「オンライン完結型スクール」になっています。場所や時間を問わず、パソコンとインターネット環境が揃えば、あとは自身のスケジュールを見て学習を進めることができます。

 

コロナ禍で家にいる時間も増え、気軽に学習できるという点では、「オンライン完結型」に勝るものはありませんよね。

 

まずは、ブートキャンプの無料体験から気軽に始めてみるのをおすすめします。受講後には「HTML」や「CSS」が簡単に思えるかと思います。

 

エンジニア転職保証コース」が経産省の認定講座へ!

TechAcademy 経済産業省

TechAcademy [テックアカデミー]の「エンジニア転職保証コース」が2021年10月から
経済産業省第四次産業革命スキル習得講座に認定されました。


これに伴い、厚生労働省の「専門実践教育訓練給付金」の対象となります。
 
そのため、条件を満たすことで、なんと、【受講料の最大70%(306,460円)】がハローワークから支給されます。
 
これまでテックアカデミーのAIコースとデータサイエンスコースも認定されておりましたが、

 

過去の実績などが評価され、エンジニア転職保証コースも認定されました。
 
10月から認定となり、給付金の詳細などは未経験からエンジニアを目指すエンジニア転職保証コースのページに記載しております。
 

転職を検討されている方へもおすすめなコースになります。

 

収益化におすすめアフィリエイトサイト(ASP)

物販型報酬を得るためには、アフィリエイトサイトへの登録が必要となります。実際に利用している方なら分かると思いますが、Googleアドセンス一本では大きな収益化は難しいのが現状です。

 

月5万PVを維持できていても、数千円~1万円程度です。そのため、ASPと併用することをおすすめします。

 

アフィリエイトサイトは数多くの種類がありますが、おすすめできる代表的なASPは以下となります。

 

中には審査が難しいASPもありますが、全て登録申請を済ませておきましょう。

 A8.netとは

A8.net

出典:A8.net

 A8.netの特徴
 A8.netアフィリエイトサイト数、広告主数ともに日本最大級の大型アフィリエイトサービスです。

2020年6月の「アフィリエイト・プログラムに関する意識調査」でも、アフィリエイト満足度ランキング9年連続1位を獲得しています。

Amazon,楽天はもちろんのこと他にも、幅広い案件を扱っています。初心者がまず最初に必ず登録する絶対外せないASPの一つです!

2020年現在で、既に「累計約300万」のサイトが登録しています。
A8.netは対応ジャンルも幅広い
A8.netはユーザー満足度が高い理由の一つとして、ジャンルが幅広く、広告の出稿数も最大規模であることがあげられます。
 
2020年時点で既に「約6000件」程度の出稿数を誇っています。コロナの影響を受けて尚この出稿数は中々他サイトを探してもありません。
 

A8.netでは登録の審査も無く、登録料も無料なので、これからアフィリエイトを始めようと思っている方にはぜひおすすめしたいです。

 

自分のサイトやブログを持っていない方でも登録OKというお手軽さが魅力です!誰でも簡単にアフィリエイトを始めることができますよ。

 
最低支払金額も1,000円なので、初心者から上級者まで幅広い層に利用されているのがA8.netの特徴です。

\9年連続満足度No.1のASP/

※登録は3分でカンタンに完了できます。

もしもアフィリエイト

もしもアフィリエイトの特徴
もしもアフィリエイトAmazonの商品の報酬額がASPの中で最も高いことが強みです。

Amazonアソシエイト”と同率になっているため、Amazonアソシエイトの代わりに使う人も多くいます。Amazon商品を紹介するサイトには”必須のASP”です。

アフィリエイトリンクを数秒で作れるという他にない強みもあります。
 
 もしもがおすすめな理由
Amazon楽天市場、Yahoo!ショッピングの審査が通りやすい
Amazonアソシエイト審査のような「3件販売ノルマ」が無い
Amazonアソシエイトと報酬率が同じ
・もしもかんたんリンク、カエレバ、リンカーが使用できる
・1つのASPでまとめることで、収益もまとめられる 

2020年からAmazonアソシエイト審査に「3件販売ノルマ」が追加され、さらに難化しています。

 

もしもアフィリエイトでは審査において、そのような販売ノルマが一切ありません。報酬率もAmazonアソシエイトと同じ高報酬率になっています。

 

さらに、もしもアフィリエイトでは「Amazon楽天市場、Yahoo!ショッピング」とメインの物販アフィリエイトと提携でき、一括でまとめられます。

 

以下のようなリンクが数秒で作成できるのも魅力です。

 

 

ユーザーによってはAmazon中心の人もいれば、「楽天」もしくは「Yahoo!ショッピング」で購入する人もいます。取りこぼしを防ぐためには上の様に各ASPを一つに集約することが大切です。

 

このように物販系の商品紹介をしたいと考えている方はもしもアフィリエイトがおすすめしたASPの一つです。

 

 

 \Amazonの物販報酬額がトップのASP/

もしもアフィリエイトの無料登録

 ※登録は3分でカンタンに完了できます。

afb(アフィb)

afb(アフィb)

出典:afb(アフィb)

 

 afb(アフィb)の特徴
afb(アフィb)も独自案件が多く、中でもファッション・美容・婚活などの女性向け広告に強い特徴があります。

サポートもしっかりしており、誰でも簡単にアフィリエイトブログを作ることが出来るように紹介マニュアルも付きます。さらに、アフィbの最低振込額は業界でも1番安い「777円」になっています。

結果として、”5年連続で利用者満足度率No.1”に選ばれている大手ASPの一つです。

A8.netとは別のアフィリエイト・プログラムに関する意識調査(「ASP意識調査」)2020」における利用者満足度において、最高評価となる「とても満足」とする獲得比率が6年連続、No.1となっています。こちらもぜひ登録しておきたいASPです。
 
A8.netでは「広告出稿数の多さ」による満足度が高かった一方で、afb(アフィb)では主に以下によるユーザー満足度で高い評価を得ています。
 
女性向けの記事を書いている方や、実際に美容商品などを扱っている方だけでなく、独自案件を探している方へも特におすすめなサービスです。
 
 
\ユーザー満足度の高さはトップレベルのASP/
\初心者向けのサポートも充実/
 

※登録審査は3分でカンタンに完了できます。

 

WordPressへの移行もブログカスタマイズとして選択肢の一つに

もし、たくさん記事をすでに書いてしまっており、そこそこの収益化ができている方は選択肢として、はてなブログからWordPress移行も考えていいかと思います。

 

WordPressへの移行の目安は月1,000円以上の利益が出ているかです。

 

というのもWordPressでサイト運営するためにはドメインの取得やサーバーとの契約などコストがかかり、目安として月額1000円の維持費がかかるためです。

 

WordPressへの移行にはお名前.com で「独自ドメイン」の取得と「URLの転送設定」を行い、Xサーバー レンタルサーバー契約をおすすめします。

 

もし、たくさん記事をすでに書いてしまっており、そこそこの収益化ができている方がはてなブログからWordPress移行するなら、サイト引っ越しやさんの利用がおすすめです。

 

ホームページの「無料ブログ」という項目から、お問い合わせをすればお見積りなどすぐに対応してくれます。

 

多少費用はかかりますが、時間を節約しつつ、大量に作成した記事を簡単にWordPressへ移行できるので、とても便利です。

はてなブログからWordPressへの移行方法 
はてなブログの記事をWordPressに移行するなら「サイト引っ越しやさん」がおすすめ。
・「サイト引っ越しやさん」の「無料ブログ」のお問い合わせからすぐに見積もり可能

ココナラなら「ブログデザイン」の依頼もできる!

ココナラ

WEBデザインに自信が無い方はココナラでWEBデザイン代行を依頼することもひとつの選択肢としてありです。

 

ココナラ(coconara・kokonara)とは、自分のスキルを販売できるサービスです。

 

人気女優の吉岡里帆さんがCMで起用され目を引いた方も多いのではないでしょうか。

 

知識・スキル・経験を売り買いできるフリーマーケットとしては最も人気で有名なサービスになります。

 

たとえはWEBデザインを依頼する場合には数千円程度で対応してくれる方も多くいます。

 

やり取りは匿名で可能で、決済もサイト上でできるので安全に利用することができます。

ココナラ

 

 

ココナラのスキル販売例

・アイコン、似顔絵作成
・WEB・IT関係の相談(WEBデザイン)
・結婚、恋愛、子育て相談
・悩み相談
・占い
・美容相談
・マネーや住宅の相談
・料理
・趣味のレクチャー
・音声・画像・動画制作
・就活・キャリア・留学相談
・ビジネス関係のスキルアップ
・語学
アフィリエイトや副業の相談

私も実はココナラで「はてなブログのWEBデザイン代行」「登山の提案」「Excel代行」の販売も行っており、それぞれの項目で販売実績もあります。

 

ココナラで「redo」で検索して頂ければ見つかるかと思います。

 

過去には、企業の方からの依頼もあり、はてなブログのWEBデザインの代行対応をしたこともあります。

 

実際に利用してみて、一度の依頼で数時間程度で完了した依頼も多く、数千円の利益になるので、とても気軽にできました。

 

一方で、依頼は様々で自分が対応できる枠を超えたような依頼もありました。でもこの場合は事前の見積もり段階でお断りすることも可能なので、本当に気軽にスキルを売買できるのでおすすめなスキルマーケットです。

 

例えばブログのデザインを整えるのに自分では自信が無い方はココナラで依頼してみるのもおすすめです。

 

もしくは自分の得意なスキルを販売することもできるので、気軽に副業の一環として初めてみましょう。

 

まとめ

今回は私が実際に活用している「ブログカスタマイズ方法まとめ」を紹介しました。

 

冒頭にも説明しましたが、ブログのサイトの見た目はユーザーの滞在率や直帰率などにも影響し、SEOの観点からもとても大切です。

 

実際に私が検索する際にもパッと見てサイトが綺麗だとじっくり読みたいという気持ちになります。

 

「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で多種多様な設定が可能です。

 

1年以上ブログを継続し、試行錯誤しながら記事を継続してきたおかげで、私のブログは無料はてなブログにもかかわらず安定した毎日数千アクセスが維持できています。日々読んでいただけている読者様にはとても感謝しております。

 

実際に私が行った施策で成果がでているので、参考になるかと思います。

 

PV数を増やすために重要な要素としては「キーワード選定」を意識した上で、検索順位の高い記事をいかに量産できるかだと考えます。

 

キーワード選定には「ラッコキーワード」の無料ツールを使いましょう。「ラッコキーワード」については私が100記事到達した際の収益報告の記事でも詳しく解説しています。

redo5151.hatenablog.com

 

さらに、既存の記事の検索順位を定期的にGoogle Search Consoleを使って、確認することも大切です。ユーザーの検索意図を意識して、検索順位の高い記事をリライトしつつ、質を高めていくことで、検索順位もあがっていきます。

 

検索順位はドメイン力(検索エンジンからの信頼度)とも関係しており、短期的に容易にあがっていくものではないので、コツコツと時間をかけて積み上げていくことで、中長期的にGoogle検索エンジンからの評価もあがり、検索順位もあがっていきます。

 

以上、参考にしていただければ幸いです。