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">
          
          \{\% 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>
          \{\% 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>
          \{\% endif \%\}
          
        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 \}\}" >Tweeta>
                \{\% 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 \}\}" >Tweeta>
                \{\% 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”が自動でセットされるようにします。

"javaScript"</span>></span><br><span class="line">$(document).ready( function () {</span><br><span class="line">   $(<span class="string">"a[href^='http']:not([href*='"</span> + location.hostname + <span class="string">"'])"</span>).attr(<span class="string">'target'</span>, <span class="string">'_blank'</span>);</span><br><span class="line">})</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="5-サイドバーにTwitterのプロフィールを表示" class="article-heading"> 🐹 <a href="#5-サイドバーにTwitterのプロフィールを表示" class="headerlink" title="(5) サイドバーにTwitterのプロフィールを表示"></a>(5) サイドバーにTwitterのプロフィールを表示<a class="article-anchor" href="#5-サイドバーにTwitterのプロフィールを表示" aria-hidden="true"></a></h2><p>Octpressのサイドバーに<a href="https://github.com/dharFr/octo-about-me-from-twitter#octo-about-me-from-twitter" target="_blank" rel="noopener">Twitterプロフィールを表示するプラグイン octo-about-me-from-twitter</a>を導入します。</p>
<p>GitHubからプラグインをCloneするため、コンソールで次のコマンドを実行。</p>
<figure class="highlight ruby"><table><tbody><tr><td class="code"><pre><span class="line">cd source/_includes/custom/asides</span><br><span class="line">Git clone <span class="symbol">Git:</span>/<span class="regexp">/github.com/dhar</span>Fr/octo-about-me-from-Twitter.Git .</span><br></pre></td></tr></tbody></table></figure>
<pre>_includes/custom
 |_ custom
    |_ asides
       |_ aboutmetwitter.html
</pre>

<p>となっていることを確認。”.git”や”README.md”は不要なので削除</p>
<p>_config.ymlファイルを編集して、サイドバーにTwitterプロフィールが<br>表示されるように”default_asides”に”custom/asides/aboutmetwitter.html”を追加。<br>ちなみに、”default_asides”の並び順でサイドバーが表示されます。</p>
<figure class="highlight ruby"><table><tbody><tr><td class="code"><pre><span class="line"><span class="symbol">default_asides:</span> [xxxx, ..... , aboutmetwitter.html]</span><br></pre></td></tr></tbody></table></figure>
<p>設定画成功すると下のように表示されます。</p>
<h2 id="6-トップページに「続きを読む」を表示-一部だけ表示する" class="article-heading">🏈 <a href="#6-トップページに「続きを読む」を表示-一部だけ表示する" class="headerlink" title="(6) トップページに「続きを読む」を表示(一部だけ表示する)"></a>(6) トップページに「続きを読む」を表示(一部だけ表示する)<a class="article-anchor" href="#6-トップページに「続きを読む」を表示-一部だけ表示する" aria-hidden="true"></a></h2><p>トップページに記事のすべての内容を表示すると、記事の一覧を俯瞰しづらくなりますよね。<br>ということで「続きをよむ」ボタンを追加する方法です。</p>
<p>具体的には記事のファイルに以下を追加します。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"># 上の内容までがトップページに表示 #</span><br><span class="line"><span class="comment"><!-- more --></span></span><br><span class="line"># 下の内容が個別の記事のページに表示 #</span><br></pre></td></tr></tbody></table></figure>
<p>また、「続きを読む」はデフォルトでは、「Read on->」とかになっていると思います。<br>それを変更する場合は、”_config.yml”の”excerpt_link”を変更します。</p>
<figure class="highlight ruby"><table><tbody><tr><td class="code"><pre><span class="line"><span class="symbol">excerpt_link:</span> <span class="string">"続きを読む"</span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="7-テーブルをmarkdownで編集できるようにする" class="article-heading">🐞 <a href="#7-テーブルをmarkdownで編集できるようにする" class="headerlink" title="(7) テーブルをmarkdownで編集できるようにする"></a>(7) テーブルをmarkdownで編集できるようにする<a class="article-anchor" href="#7-テーブルをmarkdownで編集できるようにする" aria-hidden="true"></a></h2><p><a href="/blog/octopress-table-tag-css">Octopressでテーブルをmarkdownで編集できるようにする</a>を書きました。markdownでテーブルを編集できるようになれば、記事の幅がもっと広がりますよ！</p>
<h2 id="変更来歴" class="article-heading">🐝 <a href="#変更来歴" class="headerlink" title="変更来歴"></a>変更来歴<a class="article-anchor" href="#変更来歴" aria-hidden="true"></a></h2><ul>
<li><p>11/25 (5)サイドバーにTwitterのプロフィールを表示と(6)トップページに「続きを読む」を表示(一部だけ表示する)を追加</p>
</li>
<li><p>11/30 (3) 記事の下にはてなブックマークボタンを設置のコードがトップページでも表示されるようにコードを修正 </p>
</li>
<li><p>12/02 (7) テーブルをmarkdownで編集できるようにするを追加</p>
</li>
</ul>
<h2 id="Special-Thanks" class="article-heading"> 🎳 <a href="#Special-Thanks" class="headerlink" title="Special Thanks"></a>Special Thanks<a class="article-anchor" href="#Special-Thanks" aria-hidden="true"></a></h2><ul>
<li><p><a href="http://qiita.com/items/70576232d9d317183683" target="_blank" rel="noopener">OctopressでDisqusを表示させよう！ Qiita</a></p>
</li>
<li><p><a href="http://qiita.com/items/329cb613350e25b1714b" target="_blank" rel="noopener">Octopressの記事にはてなブックマークのボタンを設置してみよう！ Qiita</a></p>
</li>
<li><p><a href="http://qiita.com/items/c28450381e3e3f0015f4" target="_blank" rel="noopener">リンク先を別ウィンドウで開く Qiita</a></p>
</li>
<li><p><a href="http://qiita.com/items/8dc13d076ad46ec05334" target="_blank" rel="noopener">Octopressでトップページに一部の記事内容のみ載せてみよう！ Qiita</a></p>
</li>
</ul>
</body></html>
    <div style="margin: 5px 0 30px 0">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    
    
    
        (adsbygoogle = window.adsbygoogle || []).push({});