5分できる簡単Octopressセッティング

Octpressは基本機能がツボを抑えているので、有効に活用すればほとんどカスタマイズの必要がありません。そこで、その基本機能を5分で動くようにしようというのが今回のネタです。


🤔 目次

(1) Google analyticsの設定
(2) ブログのコメントサービスDisqusの設定
(3) 記事の下にはてなブックマークボタンを設置
(4) linkを新規タブ(ウインドウ)で開くようにする
(5) サイドバーにTwitterのプロフィールを表示
(6) トップページに「続きを読む」を表示(一部だけ表示する)

(7) Octopressでテーブルをmarkdownで編集できるようにするも別記事で書きました!

🎂 (1) Google analyticsの設定

まずは、Google analyticsの設定です。
Google analyticsはブログのアクセス状況を解析するWebツールです。

Google analyticsでサイトを登録すると「UA-xxxxxx-x」といったトラッキングIDをもらえます。それをOctpressの_config.ymlに設定します。

するとあとは、source/_includes/google_analystics.htmlによってgoogle analysticsのトラッキングID付きのHTMLが生成されるようです。

🚕 (2) ブログのコメントサービスDisqusの設定

Disqusはブログパーツでコメント欄を提供してくれるサービスです。この機能を使うとOctpressでもコメントを記入できます。

Disqusでユーザー登録をする際に、ユーザーID(ここではxxxxxx)を設定できます。それを_config.ymlに設定します。

# Disqus Comments
disqus_short_name: xxxxxx
disqus_show_comment_count: false

すると、google analysticsと同じようにsource/_include/disqus.htmlによってdisqus用のコードを生成してくれます。

🐝 (3) 記事の下にはてなブックマークボタンを設置

Octpressの記事の最後にはてなブックマークのボタンを設置する方法です。
source/_includes/post/sharing.htmlを以下の様に修正します。

はてなのみ必要な方は、hatebu-start から hatebu-endまでをコピペして下さい。

(バックスラッシュは取り除いて下さい。)

<div class="social_box">
<ul class="social">
<li class="hatena">
<!-- hatebu-start -->
\{\% if index \%\}
<a href="http://b.hatena.ne.jp/entry/\{\{ site.url \}\}\{\{ post.url \}\}" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
\{\% else \%\}
<a href="http://b.hatena.ne.jp/entry/\{\{ site.url \}\}\{\{ page.url \}\}" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
\{\% endif \%\}
<!-- hatebu-end -->
</li>
<li class="twitter">
\{\% if site.twitter_tweet_button \%\}
\{\% if index \%\}
<a href="http://twitter.com/share" class="twitter-share-button" data-url="\{\{ site.url \}\}\{\{ post.url \}\}" data-via="\{\{ site.twitter_user \}\}" data-counturl="\{\{ site.url \}\}\{\{ post.url \}\}" >Tweet</a>
\{\% else \%\}
<a href="http://twitter.com/share" class="twitter-share-button" data-url="\{\{ site.url \}\}\{\{ page.url \}\}" data-via="\{\{ site.twitter_user \}\}" data-counturl="\{\{ site.url \}\}\{\{ page.url \}\}" >Tweet</a>
\{\% endif \%\}
\{\% endif \%\}
</li>
<li class="facebook">
\{\% if index \%\}
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="\{\{ site.url \}\}\{\{ post.url \}\}"></div>
\{\% else \%\}
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="\{\{ site.url \}\}\{\{ page.url \}\}"></div>
\{\% endif \%\}
</li>
</ul>
</div>

このコードを追加すると下の画像のようにはていなブックマークのボタンが追加されます。

🏈 (4) linkを新規タブ(ウィンドウ)で開くようにする

OctpressのMarkdownでリンクを作成した場合、外部のサイトへのリンクの場合のみ、target=”blank”が自動でセットされるようにします。

<script language="javaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

🐰 (5) サイドバーにTwitterのプロフィールを表示

OctpressのサイドバーにTwitterプロフィールを表示するプラグイン octo-about-me-from-twitterを導入します。

GitHubからプラグインをCloneするため、コンソールで次のコマンドを実行。

cd source/_includes/custom/asides
Git clone Git://github.com/dharFr/octo-about-me-from-Twitter.Git .
_includes/custom
 |_ custom
    |_ asides
       |_ aboutmetwitter.html

となっていることを確認。”.git”や”README.md”は不要なので削除

_config.ymlファイルを編集して、サイドバーにTwitterプロフィールが
表示されるように”default_asides”に”custom/asides/aboutmetwitter.html”を追加。
ちなみに、”default_asides”の並び順でサイドバーが表示されます。

default_asides: [xxxx, ..... , aboutmetwitter.html]

設定画成功すると下のように表示されます。

🗽 (6) トップページに「続きを読む」を表示(一部だけ表示する)

トップページに記事のすべての内容を表示すると、記事の一覧を俯瞰しづらくなりますよね。
ということで「続きをよむ」ボタンを追加する方法です。

具体的には記事のファイルに以下を追加します。

# 上の内容までがトップページに表示 #
<!-- more -->
# 下の内容が個別の記事のページに表示 #

また、「続きを読む」はデフォルトでは、「Read on->」とかになっていると思います。
それを変更する場合は、”_config.yml”の”excerpt_link”を変更します。

excerpt_link: "続きを読む"

🐡 (7) テーブルをmarkdownで編集できるようにする

Octopressでテーブルをmarkdownで編集できるようにするを書きました。markdownでテーブルを編集できるようになれば、記事の幅がもっと広がりますよ!

😸 変更来歴

  • 11/25 (5)サイドバーにTwitterのプロフィールを表示と(6)トップページに「続きを読む」を表示(一部だけ表示する)を追加

  • 11/30 (3) 記事の下にはてなブックマークボタンを設置のコードがトップページでも表示されるようにコードを修正

  • 12/02 (7) テーブルをmarkdownで編集できるようにするを追加

🏀 Special Thanks

📚 おすすめの書籍