目次

ブログを始めようと考えている人に対して一般的なアドバイスをします。具体的には、おすすめのサービスやテンプレートのカスタマイズなどを解説します。

はじめに

この記事では、Blogger, GitHub Pages, GitLab Pagesの基本的な使い方を解説します。これらは私が使ってきたブログサービスです。

また、一般的なブログサービスとしてMedium, Hatena Blog, note, Qiita, Ghostなどについても言及します。結論としてはこれらのうちで良さそうなものを自分で選んで始めればそれでいいと思います。

この記事ではWebサーバーを含むインフラ技術はあまり解説しません。あくまでサービスを使って更新するブログを紹介していきたいと思います。

方針について

当記事の方針の一つは、著者が後々利用しやすいように作っていく方針です。

一部、表現等に正確ではないものも含まれると思いますが、この記事では正確さよりも分かりやすさを重視します。もし正確な情報が欲しければ、公式ドキュメントを参照してください。

なお、内容が充実してきたら別ページにも保存するかもしれません。

著者のレベル

著者はブログについては初心者です。この記事は調べたものを載せるというより、ほとんどがアドリブで、定義なども単に自分のイメージを書いているに過ぎません。

おすすめのブログサービス

結論 :

おすすめはMediumBloggerです。

Webサーバーから構築し独自ドメインで運用する場合はGhostです。

理由 :

SSLに対応しているか、広告非表示は可能か、アドセンス(AD)は可能か、その他、プラットフォームの使用言語などから判断

その人の技術レベルに応じておすすめするものも変わってきます。したがって、まずは難易度別に表示してみます。なお、この難易度はあくまで目安と考えてください。初心者の視点から、主にブログ更新に必要な知識及び、ブラウザから設定できるかどうかなどによって判断しています。

Name Level SSL JS-OFF AD 広告非表示 特徴
GitLab 5 OK OK OK OK ブラウザからの設定は不可
GitHub 4 OK OK OK OK ブラウザからの設定は不可
Ghost 3 OK OK OK OK ある程度の設定はブラウザから可能
WordPress 2 OK OK OK OK ある程度の設定はブラウザから可能
Blogger 1 OK OK OK OK ブラウザから設定
Medium 1 OK OK NO OK ブラウザから設定
note 1 OK NO NO OK ブラウザから設定, 課金を設定できる
Hatena 1 NO OK OK NO ブラウザから設定
Qiita 1 NO OK NO OK ブラウザから設定

JS-OFFというのは、JavaScriptをOFFにしていても表示できるか否かです。個人的にはこれはとても重要な事です。その他、利用者にとって有利な点をOKとし、それ以外をNOで表現しています。

まず、GitLabGitHubでは同じようにページを構築できるのですが、情報の量及びCIサービスを稼働するかどうかが違ってきます。GitLabでページを作るには、ビルドしたものをPushすればいいというわけではなく、あくまでCIビルドを通さなくてはなりません。ソースコードで上げられるのは便利ですが、CIビルドを通さなければならない分、難易度は高めになっています。GitLabGitHubと違い無料でプライベートリポジトリを使えます。GitHubは有料版しかプライベートリポジトリを有効にできません。

次に、GhostWordPressは別段、Gitの知識は必要はありません。また、テンプレートなどが予め用意されていたりと、ユーザーフレンドリーです。その為、難易度的には標準になっています。ただし、GhostやWordPressなどは通常、Webサーバーにホストして使うことを前提としているため、Webサイトの基本的な知識が必要になります。情報量ではGhostのほうが少なく、かつテンプレートやプラグインなども少ないため、Ghostのほうが難易度は高めです。

最後に、Bloggerなどのサービスは完全にブラウザだけでサイトを構築し、更新できます。したがって、難易度的は最も簡単です。

使っている人の数で言うと、レベル1が圧倒的に多数を占めます。レベルが上がるほど少数になっていき、最終的にはブログとして使っている人はほとんどいない状態になります。

ですが、例えば、GitHub Pagesを使ってブログをやっている人は、数は少ないですが確かに存在します。

静的サイトジェネレーター

ここで、レイアウトに使うコードを自分で決められるサービスを選んだ場合、静的サイトジェネレーターが便利です。なお、上の表で言うとレベル1以外は自分で書いたコードをそのまま使えます。他のサービスは様々な制約があります。

一覧 : https://gitlab.com/groups/pages

Name Content
Jekyll Rubyで書かれており、最も普及している
Octopress Rubyで書かれており、GitHub Pages用に作られた。テンプレートにはBootstrapを使ったものが多い
Middleman Rubyで書かれおり、Octopressの後発。SlimやHamlで書かれたテンプレートも多い
Hugo Goで書かれており、とても高速でシンプルなテンプレートが多い。この中では最も新しい

Bloggerのカスタマイズ

Bloggerを使っている人が僅かながら私の周りにもいます。したがって、項目別にカスタマイズ方法とコードを載せることにします。

コードの書き方

まず、Bloggerで使用するコードは非常に特殊です。HTMLで書く<>などを特殊文字に直さなければならなかったりします。それを踏まえた上で、いくつかのレイアウトコードを見ていきます。

&lt;!-- コメント --&gt;

「投稿:Atom」を削除する方法

以下の箇所を見つけてそれを削除します。

<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>

「ホーム」を削除する方法

以下の箇所を見つけてそれを削除します。

<a class='home-link' ...  </a>

「前の投稿」を削除する方法

以下の箇所を見つけてそれを削除します。

<span id='blog-pager-older-link'>
	<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>

「次の投稿」を削除する方法

以下の箇所を見つけてそれを削除します。

<span id='blog-pager-newer-link'>
	<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>

「Powered by Blogger」を削除する方法

以下の箇所を見つけて変更します。

- <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
+ <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

解説としては、Bloggerでは、ガジェットを表現するキーワードを widgetと言います。ここで、この widgetには、一括して様々な設定ができるようになっているのですが、ロックするかしないかを設定することができます。ここで、ロックをオンにした場合は、管理画面からの変更が不可能になります。反対に、ロックをオフにした場合は、管理画面からの変更が可能になります。true、 falseで設定できます。これは、ロックをするか?と聞かれた場合の Yes , No の意味です。

ここで変更可能にした widgetは、管理画面の レイアウトから変更可能になります。「Powerd by Blogger」に該当するウィジェットを削除します。

タイトルとコンテンツを分ける線を表示する方法

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
  border-top: solid 1px #ccc;
}