無料ブログである「はてなブログ」は有料版PROもあるが、機能制限と広告表示ありの無料版がある。
そしてはてなブログらなではのクセもあるので、現時点でのいくつかの設定の仕方を紹介していきます。
とまぁ、サイト名でもありますが自分のための忘備録でもあるので、もし忘れてしまってもこちらをみて思い出してほしいところ、うちがね。
ちなみに出来上がったサイトの見本を紹介しておきます。
https://zefarurin-saiyasune.hatenablog.com/
では、少ししかないけどコツを上げていきます。
サイトタイトル、メタディスクリプションなどの設定
１．ダッシュボードの設定＞基本設定からサイト名とメタディスクリプションを忘れずに書いていこう。
サイトのSEOを考えると現時点では30%ほど占める大事な大事な設定。ほかのＳＥＯ対策はすんごく大変だからせめてこういった基本はちゃんとやったほうがいいでしょう。縁の下の力持ちに違いありません。
２．タイトルには必ず２，３語のキーワードを含めてオリジナルなタイトルをつけたいところ。
目指すのはタイトルで検索して1位になること。似たようなサイトタイトルがないかも確認しましょう。
そして、メタディスクリプションもタイトル同様に大事なもの、タイトルをコピペしてほかのキーワードを意識しながら、訪問したくなるような紹介を書きたいですよね。
３．メタディスクリプションではタイトルで含めなかったキーワードも入れていきます。使うキーワードはヤフーで1語や2語で出てきたものを中心に組み立ててきます。
もしキーワードが足りない場合はグーグルクローム、また関連キーワード取得ツールでキーワードのほか知恵袋もチェック
考えてみよう
ポイント１．なぜヤフーに出てくるキーワードを中心にするのか？
ポイント２．なぜ関連キーワード取得ツールで知恵袋をみるのか？
そして、この設定の詳細設定タブもチェックして次の点を入れていこう
トップページを決めたらなぜかトップページと個別記事で重複記事になってしまうが、あくまではじめにトップページだけを表示したいためである。→調査中
２．Google Search Console（旧 Google ウェブマスター ツール）に設定をしておくこと。
「とりあえず生中」のようにサチコに登録しておいて損はないはず。忘れずにＵＲＬ検査でインデックス促進し、インデックスされたらサイトマップ（はてなの場合/sitemap.xml）も行おう。
クエリーやリンク管理など他サイトの練習のためにもなるから研究のためにも、とりあえず登録しておく
３．同じＩＤで「はてブ」を1回だけ入れておく → 調査中
はてなブログ本文の見出しについて
はてなの場合は、見出し設定を使わずに「ＨＴＭＬモードから手書き」でＨ２からＨ４の見出しを入れていきましょう。
これはさすがに調べるとたくさん出てきますが、はてなぶろぐのＨ設定は独特です。
端折って書くと次のとおりとなります。
＜はてなブログのＨ設定＞Ｈ１：サイトタイトル
Ｈ２：メタディスクリプション
Ｈ１：記事タイトル
Ｈ３：大見出し
Ｈ４：中見出し
Ｈ５：小見出し
こうしてみるとH1が２つになるので、BINGではエラー表示。
さらに、記事タイトルＨ１→大見出しＨ３でＨ２をスキップしています。
H1はどうしようもないので、他は手動で変えていきます。
Ｈ２：大見出し
Ｈ３：中見出し
Ｈ４：小見出し
ちょっと時間たつと分からなくなるので、目次や見出しツールで気が向いたときに確認していくのもいいでしょう。
グーグル先生の見解では、一言でいうと「気にするな」ということですが、似たようなサイトがたくさんある中で1mmでも有利にするためには、ちょっと気にして書いておくと後で手直しいりません。
将来への自分のためにちょっとした手間で今できることはやっておきたいという心意気ですね。
おまけに見出しにもCSSを追加しておきます。
h2 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}
―はてなブログはココから
h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
デザインを設定する
デザイン設定のデザインテーマなどを変更しておきます。
１、デザイン設定でテーマを選ぼう
今のところ、１カラムにしたい場合は「ＬＩＦＥ」というテーマがお手軽で便利。これでまるでワードプレスのシンプルデザインのようにスッキリ洗練されたサイトに仕上がるはず。
あとは、画像や文字修飾で見た目を整えていきましょう。とにかく画像によってサイトの印象がまるで違ってきますからね。
２．カスタマイズでＣＳＳを追加
アフィリサイトでは、投稿日時などが便利な場合や邪魔な場合があります。
もちろん新鮮さが売りなコンテンツではそのまま残しておくほうが有利でしょうが、うちは基本放置タイプなので日時を消すためにCSSに追加しておきます。
.date {
display: none;
}/*記事が書かれてからの日付を消す*/
.entry-footer-time {
display: none;
}
一応目次もアレンジしてみます。
.table-of-contents {
padding: 15px 10px 15px 35px; /* 枠内の余白（上右下左） */
font-size: 100%; /* 文字サイズ */
border:solid 2px #7DB4EC; /* 線の種類と色 */
background:#f7f7f7; /* 背景 */
border-radius:8px;/* 数字が大きいほど丸くなる */
}
.table-of-contents:before {
content: "目次";
font-size: 110%;
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
そして最後にスマートフォン＞詳細設定でレスポンシブ設定にチェックマークも忘れずにしておきます。
ここでチェックしておかないと、レスポンシブ表示にはならずに記事一覧のページがトップになったりとちょっと変になりますからね。
３．サイドバーの設定をしよう
デザイン＞カスタマイズ＞サイドバーから余計な項目を削除していきましょう。
当方は、はてなブログはペラサイトが多いので、最新記事以外全部消していますが、必要と思われるのは残しておきましょう。
最後に大事なフォント設定をします。
グーグル先生は16px以上を推奨していますが、超有名ワードプレステーマのSANGOやアフィンガー5は17pxにしています。
これからの高齢化社会では特に、文字が大きいほど読みやすくなりますからね
CSS
.entry-content p {font-size: 17px;}
@media screen and (max-width: 480px){.entry-content p {font-size: 17px;}}
そしてデザイン変更を保存したら次に行きましょう。
記事の管理でトップページを選ぶ
記事の管理で編集ボタンを押すとしたの方に「トップページの先頭に表示をする」と出てきますから、トップページにしたいページを選びます。
そしてトップページには入念なコンテンツを入れて、訪問者様へのおもてなしを盛り込みましょう。
また、画像やアフィリのリンク画像など真ん中になるように調整しておきましょう。
通常の＜ＣＥＮＴＥＲ＞では真ん中になりませんから、ほかのＨＴＭＬで調整します。
<div align="center">画像</div>でないとうまくいかなから要注意ですよね。
そして出来上がったサイト（主にペラサイト）はＧＲＣなど登録を終えたら寝かしておきましょう。
CSSをここからもピックアップ
※ＣＳＳは飾りでしかないので、アクセスが来てから充実させましょう。
こういったサイトは1000個以上つくれば数稽古となっていろんな経験を積めそうです。しんどいけど、自動車が走るにはまずパワーのある1速（マニュアルをイメージしてね）から始めないと加速していきませんからね。
無料のはてなブログを使うメリットはインデックスされやすいということ。
まずは、サイト名検索で1位を目指そう。
はてなブログならかなりの確率でいけるはず。
また、文字数が多ければ多いほどサーチコンソールでクエリを拾えるので、はてなブログはコンバーションを狙うというよりクエリのためと言ってもいいかもしれませんね。