はてなブログ

【ブログ】はてなブログで何をやってきたか

  /

僕は、２０１９年７月に初めてブログをはてなブログで開設しました。現在では、はてなブログからWordPressに変えてブログを運営しています。はてなブログで２ヶ月間ブログを運営してきたので、僕がやってよかったなと思ったこととかを紹介していけたらなと思います。

目次
  1. デザインCSSの追加
  2. Google Analytics
  3. Search Console
  4. はてなブログ独自のアクセス解析
  5. はてなブログProへの変更でできること

デザインCSSの追加

はてなブログでデザインCSSを使用しないと、文字＆黑ばかりでとても見にくくどんなにいい記事を書いても見てくれません。

見出しの変更

以下のCSSは、このブログでも全く同じCSSを使用しています。他のCSSを利用したい方は、ググったらすぐ出てくるのでそちらを参考にしてください。

h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}


h3 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

h4 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

 

目次の変更

目次は、見出しを２個以上作り目次を作りたい場所をクリックした後に、目次を押します。そうすることによって、[:contents] が挿入されます。そこに目次が出来上がります。

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字（マーク色変更） */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039   目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 0px; /*左からの位置調整*/
    color: #fff !important;
}

 

リンクの色変更と下線を消す

 

/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

 

Google Analytics

自分のブログにどんなところから訪問しているかがわかります。さらに、時間帯や様々な情報が得られます。

Search Console

Search Consoleでサイトマップを作成したほうが、クローラが自分のサイトを訪問してくれるみたいなのでサイトマップを作成するためだけにやりました

はてなブログ独自のアクセス解析

はてなブログのiOS版のアプリをインストールしてその中の

はてなブログProへの変更でできること

 

独自ドメインの取得

僕は、お名前.comでドメインを取得して、はてなブログに登録しました。設定自体は簡単ですがドメインが有効になるには、２〜３日かかります。

トップページの表示形式の変更

無料版の場合、トップページの表示形式が全文形式しか選択できません。全文形式だとアクセスがトップページだけにアクセスが集まってしまいます。つまり、トップページだけみて帰ってしまいます。なので全文形式から一覧形式にします。

※無料版でも、トップページに訪問した時にアーカイブに飛ばす方法もあります。以下のCSSをhead要素に追加すればぜ一覧形式に見せることができます。ただし、Googleからの評価が下がり、Googleアドセンスには通りにくくなる見たいです。

<script type="text/javascript">
 if( location.href == '自分のブログのURL/'){
 location.href='自分のブログのURL/archive';
}
</script>
<noscript>
<p><a href="自分のブログのURL/archive">自分のブログタイトル</a></p>
</noscript>

自分のブログのURLとは、このブログでいうとhttps://tomostudyblog.comです。

①はてなブログの設定をクリック

②詳細設定をクリック

③検索エンジン最適化の項目までスクロール

④headに要素を追加の欄に上のCSSを追加して保存して終了です。これで、とても見やすくなります。

はてなブログ独自の広告を非表示にする

はてなブログが出している広告を消すことによって、自分のブログ記事が見やすくなります。もし、Googleアドセンスが通っていて、自分のブログに広告が貼れるのであれば、自分の広告がもっと見られるようになります。

googleアドセンス申請

Googleアドセンスは、独自ドメインでないとアドセンス申請は１００％通ることはないです。なので、お名前.comでドメインを取得して、アドセンス申請しました。結果は、１５回以上落ちました。はてなブログだとどうしてもSEO対策をほとんど自分でやらないといけないので