はてなブログのカスタマイズ【独自ドメイン、デザイン】

f:id:nepio:20180924204720p:plain

はてなブログのドメインをhateblo.jpから独自ドメイン(www.sodefrin.work)に変更して、

ブログをカスタマイズしたのでやったことをまとめます。

はてなよりwordpress使ったほうがいいんじゃないの?

本格的にブログを始めるなら、はてなやlivedoorブログを使うよりも、サーバーを借りてwordpressサイトを構築した方が良いよ!という意見をよく見ます。

正直、ブログでアフィリエイトするだけなら、はてなブログでいいと思います。(本格的なデザインの企業サイトを構築するのであれば話は別です。)

むしろ個人の規模感でやるならwordpressよりレンタルブログの方が合理的だと思います。理由は以下のとおりです。

  • wordpressはサイト構築に専門知識が必要

  • wordpressのサイトを保守運用するのがめんどくさい、そしてめんどい割に性能がよくない

  • 簡単なデザインであればはてなブログをカスタマイズするほうが簡単

wordpressはサイト構築に専門知識が必要

wordpressはサイト構築に専門知識が必要です。

wordpressの運用ではさくらVPSに独自ドメインを割り当てて、apacheとphpとsslの設定をする・・・という運用が定番ですが、正直めんどくさいです。

エンジニアだったり、何回かやっていて慣れている人はすぐ終わりますが、結構めんどいです。正直、エンジニア視点で見ても、今どきブログやりたいだけでそんな下回りの設定やる必要ある?って感じです。

wordpressのサイトを保守運用するのがめんどくさい、そしてめんどい割に性能がよくない

wordpressのサイトは、保守運用のコストが高いです。

デザインに拘るために独自のテンプレートを運用していたりすると、独自テンプレート特有のカスタマイズなども発生してしまいますし、機能追加のたびにエンジニアが手を入れなければなりません。

そしてwordpressは重いです。キャッシュ入れたり画像小さくしたり、そもそもテーマ自体を軽量化するために手を入れたりと運用していく中で細かい不具合に対応していかないと、いい感じの表示速度を実現することができません。

反面はてなブログであれば、基本的なメンテナンスははてなブログが行ってくれるため、表示速度のトラブルなども少ないですし、運用コストはほぼ0です。

機能面でできることは少ないですが、ブログメディアとしては必要十分な機能が提供されています。

正直、wordpressって立ち位置が中途半端なんですよね・・・。めちゃくちゃカスタマイズしたいのであれば、wordpressを使わずにrailsなどで独自のCMSを構築したほうが便利で後々楽ですし、それほど大きなカスタマイズをしないのであればはてなのようなブログサービスの方が楽ですし・・・。

僕は一時期ガッツリwordpressを扱ってたのですが、面倒くさいことの方が多くてwordpressが嫌いになりました・・・。

簡単なデザインであればはてなブログをカスタマイズしたほうが楽

そして簡単なデザインであれば、wordpressで実現するよりも、はてなブログの方が簡単です。

デザインをいじるにはcssの知識が必要なので、それは別途勉強するなりできる人に頼むなりする必要がありますが、

はてなの場合公式が、ユーザがデザインをカスタマイズするための土台となるcssを公開してくれています。

github.com

これを元に記事の中でのh2やh3、目次、サイドバー、関連記事等のcssをカスタマイズすればOKです。

本ブログもそんな感じで見た目の調整を行っています。

無料ではてなでブログを初めて、伸びてきたら独自ドメインに移行すればいいと思うよ!

というわけで皆さん、まずは無料のはてなブログなどでブログを初めて、伸びて来たらPROに入会して独自ドメインの設定をしましょう!

以降は本ブログで僕が行っているカスタマイズ内容を紹介になります。

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

はてなブログでは以下のようなカスタマイズができます。

  • デザインのカスタマイズ

  • 独自ドメインの設定(PRO限定)

  • はてなブログらしさを少なくするカスタマイズ(PRO限定)

  • その他の設定

デザインcssのカスタマイズ

はてなブログの設定画面のデザイン -> カスタマイズ -> デザインCSSと選択していると、CSSを入力する欄があります。

はてなブログのデザインのカスタマイズでは、この部分を編集します。

cssのカスタマイズには前述した、boilerplateを利用するのがオススメです。

github.com

cssとscss、node.jsとnpmの使い方覚えないと行けないので、非技術者には少しむずかしいかも知れませんが・・・。(wordpressの運用方法やカスタマイズ方法を覚えるよりは楽だと思います、多分)

ちなみに本サイトでは、本文記事中のh2とh3のcssの編集、ul、li要素のcssの編集と全体的なmarginとpaddingの調整程度しかしてませんが、僕的にはこれで満足です・・・。

独自ドメインの設定

独自ドメインの設定を行うにはPROへの加入が必須になります。はてなブログPROは30日間は無料期間があるので、伸ばせそう&続けられそうという感覚があれば、早めに設定しちゃっていいと思います。PROにすれば、後述するアドセンスの申請などもできますし。

ドメイン自体はお名前ドットコム等で取得するのがいいです。本サイトのドメイン、sodefrin.workは取得価格1円でした。

一年後にドメインの更新のタイミングで900円程度の料金がかかりますが、それまでは1円しかコストかからないのでお得です。

設定方法自体は、他のサイトでも紹介されているのでそちらを参照してください。

blog.hatenablog.com

ドメインが変わると、広告を配信するASPやAmazonアソシエイト、アドセンスなどの設定を変更しなければならないので、できるだけ早めに独自ドメインに移行した方がいいですね。

はてなブログらしさを少なくするカスタマイズ

せっかくデザインをカスタマイズしたなら、はてなブログらしさを少なくした方がもしかしたらいいかも知れません。好みですけどね。

ヘッダーの非表示

はてなの場合はPROに入会することで、はてなブログ特有のヘッダーをオプションで非表示にすることができるので設定したい人はしましょう。

設定 -> 詳細設定 -> ヘッダとフッタ

から変更できます。

キーワードリンクのオフ

設定 -> 詳細設定 -> キーワードリンク

等もオフにしておきましょう。SEO的に、無いほうが好ましいですし。不要なリンクが多いと半スパムなので。

プロフィール

デザイン -> 設定 -> サイドバー -> プロフィール

にてはてなIDを表示しないようにしておくのもいいかもですね。

その他の設定

Googleアドセンス周りの設定

googleアドセンスでは、404ページにアドセンスの広告が表示されているのにコンテンツがないとポリシー違反になります。

そのため404ページにランキング等を表示する対策が取られているようです。

ただ、はてなブログの場合、デフォルトでは404ページを編集する機能がないため、ページを書き換えるスクリプトを設置する必要があります。

wepli-dot2.hatenablog.com

こちらのページにてランキングを表示するスクリプトが紹介されていますが、jQuery依存(最近廃れてきたjavascriptライブラリ)なのでちょっと使いづらいです。

不要なライブラリファイルは読み込まない方がページが軽くなりますしね。

jQuery使わないバージョンを書いたのでもしよければお使いください。

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    let no_entry = document.querySelector('#main-inner .no-entry');
    if (no_entry){
      let entry_footer = document.querySelector('.entry-footer');
      var div = document.createElement('div');
      var content ="<p>いつも「○○○」をご利用いただきまして、誠にありがとうございます。大変申し訳ありませんが、アクセスしようとしたページは削除されたかURLが変更されています。</p>";
      content +="<h3>当ブログおすすめの人気記事</h3>";
      content +="<div class='hatena-module hatena-module-entries-access-ranking'";
      content +="     data-count='10'";
      content +="     data-display_entry_category='0'";
      content +="     data-display_entry_image='1'";
      content +="     data-display_entry_image_size_width='100'";
      content +="     data-display_entry_image_size_height='100'";
      content +="     data-display_entry_body_length='0'";
      content +="     data-display_entry_date='0'";
      content +="     data-display_bookmark_count='1'";
      content +="     data-source='access'";
      content +=">";
      content +="  <div class='hatena-module-body'>";
      content +="  </div>"
      content +="</div>";  
      div.innerHTML = content;
      entry_footer.appendChild(div);
    }
  })
</script>

ライティング周りの設定

はてなのデフォルトだと記事の編集は見たまま編集ですが、markdownをオススメします。

見たまま編集を使っちゃうと空のhtmlタグ等で見た目を調整してしまって、全体的な統一感が取れなくなってしまったり、あとで修正するのが難しくなってしまったりするので、なるだけ見たまま編集は使わないほうがいいと思います。

まとめ

諸所カスタマイズすればはてなブログも、wordpressと変わらない感じにできると思うので、オススメですよ!という話でした。

必ずしもwordpressは必須じゃありません。むしろメンテコスト高いわりに性能悪いので中途半端です。

個人ブログでアフィリエイトやるスタンスならおとなしくブログサービスに乗っかっておくのはありですよー。