Contents

phoenix-powerOctopressのカスタマイズ履歴です。このブログでは、テーマを一つに設定して、それを元にカスタマイズしていくというスタイルを採用します。

目次

番号 タイトル タグ
00 Octopressのインストール install, octopress, github
01 OctopressでのCode Block html, markdown, octopress
02 OctopressのMarkdownパーサー markdown, ruby
03 Markdown特殊記法 markdown
04 Previewを高速化する ruby, preview
05 日付の形式を変更する data, html
06 Mobileの表示に対応する mobile, ios, android, browser
07 様々な記号を使う html
08 Top Pageに移動するアイコンを作った html, top, icon
09 Menubarの試行錯誤 menu, html, css
10 スライド式のmore html, css
11 Comment Form Disqus disqus, comment
12 文章幅の調整 font, css
13 Octostrap3のPager octopress, theme
14 Code Blockの行番号と背景色 markdown, octopress
15 フォントの大きさ font, css
16 Archives octopress
17 AppStoreのアプリを紹介する app, store
18 スラッシュのような線 border, css
19 codeのカスタマイズ css, code
20 Sidebarにいろいろ設置する sidebar, hatena, qiita, github
21 Div要素全体にリンクを貼る div, html
22 画像枠を変更する img, html
23 Amazonの紹介を簡単にする amazon
24 参考になるブログ blog, octopress
25 Google+との連携を考える 別ページ
26 Octopressに独自ドメインを設定する方法 別ページ

Octopressのインストール

はじめに

最近、Octopressでブログをはじめました。

Octopressは、テーマも豊富で、Middlemanよりも簡単な感じです。

Octopressでのブログの初め方は、以下のページに書きました。

Github Pages + Octopress

しかし、バージョンが更新されていないみたいで、アップデートも面倒な感じがします。

どちらを使うかは、好みの問題ですが、カスタマイズを楽にしたいのなら、Octopressがオススメです。

テーマは、octostrap3というものを使用することにします。

よって、この記事で紹介するカスタマイズは、すべてoctostrap3というテーマを使ってのカスタマイズになります。

一方、最新のトレンドに追従したいのなら、Middlemanがオススメです。

なお、ここでは、主に、HTMLとCSSについてのコードを書いていきます。

一番参考になるページは、以下のページです。

Web technology for developers | MDN

注意点

メールアドレスの認証(verify)を事前に済ませておく必要がある。

ページの構築に、10分ほど時間がかかる可能性がある。

リポジトリの作成

GitHubリポジトリを作成します。 リポジトリ名は「username.github.io」とします。

Octopress Setup

1
2
3
4
5
6
7
8
9
$ git clone https://github.com/imathis/octopress

$ cd $!:t

$ gem install bundler

$ bundle install

$ rake setup_github_pages

出来ない場合は、rvmなどでRubyを1.9.3に変更してみます。

http://octopress.org/docs/setup/

Octopress 初期設定

基本設定

以下のファイルで基本設定が出来ます。サイドバーなどもここで設定します。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
url:                # For rewriting urls for RSS, etc
title:              # Used in the header and title tags
subtitle:           # A description used in the header
author:             # Your name, for RSS, Copyright, Metadata
simple_search:      # Search engine for simple site search
description:        # A default meta description for your site
date_format:        # Format dates using Ruby's date strftime syntax
subscribe_rss:      # Url for your blog's feed, defauts to /atom.xml
subscribe_email:    # Url to subscribe by email (service required)
category_feeds:     # Enable per category RSS feeds (defaults to false in 2.1)
email:              # Email address for the RSS feed if you want it.

http://octopress.org/docs/configuring/

Jekyll & Plugins

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
root:               # Mapping for relative urls (default: /)
permalink:          # Permalink structure for blog posts
source:             # Directory for site source files
destination:        # Directory for generated site files
plugins:            # Directory for Jekyll plugins
code_dir:           # Directory for code snippets (for include_code plugin)
category_dir:       # Directory for generated blog category pages

pygments:           # Toggle python pygments syntax highlighting
paginate:           # Posts per page on the blog index
pagination_dir:     # Directory base for pagination URLs eg. /blog/page/2/
recent_posts:       # Number of recent posts to appear in the sidebar

default_asides:     # Configure what shows up in the sidebar and in what order
blog_index_asides:  # Optional sidebar config for blog index page
post_asides:        # Optional sidebar config for post layout
page_asides:        # Optional sidebar config for page layout

Octopress 記事作成とプレビュー

1
2
3
4
5
6
7
$ rake new_post\[title\]

$ vim source/_post/*.markdown

$ rake preview

$ open -a Safari http://localhost:4000/

http://octopress.org/docs/blogging/

_config.yml
1
2
3
rake generate   # Generates posts and pages into the public directory
rake watch      # Watches source/ and sass/ for changes and regenerates
rake preview    # Watches, and mounts a webserver at http://localhost:4000

Octopress 記事投稿

記事を公開し、GitHubにpushしておきます。

1
2
3
4
5
6
7
8
9
$ cd octopress/source

$ rake gen_deploy

$ git add .

$ git commit -m 'your message'

$ git push origin source

http://octopress.org/docs/deploying/github/

Octopress Themeの変更

1
2
3
4
5
6
7
$ cd octopress

$ git clone https://github.com/kAworu/octostrap3 .themes/octostrap3

$ rake 'install[octostrap3]'

$ rake generate

Octopressの基本的なカスタマイズ

ここでは、基本的なカスタマイズを紹介します。

Preview thin

プレビューを変更してみます。group :development doの後に、gem 'thin'を追記します。

1
2
3
4
5
6
7
8
9
10
$ vim octopress/Gemfile

###########################
group :development do
gem 'thin'
###########################

$ bundle install

$ thin start

あとは、ブラウザでhttp://localhost:3000にアクセスします。

More

「続きを読む」には、moreタグを使います。

1
<!-- more -->

About

新しいページを作成し、ナビバーに表示させます。

1
$ rake 'new_page["about"]'
source/_includes/custom/navigation.html
1
<li><a href="/about">About</a></li>

Icon

ナビバーにアイコンを表示してみます。

source/_includes/custom/navigation.html
1
<img src="URL" alt="site.logo"><a class="navbar-brand" href="/">MBA-HACK</a>

Favicon

ファビコンというのは、タブのところに表示されているアイコンのことです。.pngでもOKです。

source/_includes/custom/head.html
1
<link href="URL" rel="icon">

他にも、ルート/favicon.icoを置くと、表示されるとかいう情報もあります。

1
$ convert favicon.png favicon.ico

なお、モバイルのブックマークアイコンを設定するには、以下のようにします。

source/_includes/custom/head.html
1
<link href="URL" rel="apple-touch-icon" />

Delete

不要なアイコンを削除してみます。spanclassのiconがキーワードです。

source/_includes/post/{date,sharing}.html
1
<span class="glyphicon glyphicon-calendar"></span>

Pager

ページャーの角丸設定を削除します。

以下のファイルを見てみます。

1
$ cat source/index.html && cat source/assets/bootstrap/dist/css/bootstrap.css

設定ファイルにソースを追記します。

1
$ echo '@import "custom/_styles.scss";' >> sass/_base.scss

以下のファイルに追記します。

sass/custom/_styles.scss
1
2
3
4
5
6
7
8
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
}

OctopressでのCode Block

OctopressでのCode Blockは、現在、linenosには対応していません。

ちなみに、linenosというのは、行に関する設定のことです。現在は、startinlineという呼び方の方が正しいのかもしれません。

公式ドキュメントには、以下の様なCode Blockが使えるとされています。

``` coffeescript Coffeescript Tricks start:51 mark:52,54-55
# Given an alphabet:
alphabet = 'abcdefghijklmnopqrstuvwxyz'

# Iterate over part of the alphabet:
console.log letter for letter in alphabet[4..8]
```

しかし、行番号、マークなどのオプションは実際には使えません。

対応しているのは、site-2.1ブランチのみです。

BUG: start, mark, and linenos don’t work in code blocks · Issue #1472 · imathis/octopress · GitHub

Octpress の codeblock でオプションが効かない - nhiroki’s weblog

OctopressのMarkdownパーサー

Octopressでは、特定のフォルダ内にあるMarkdownの拡張子で書いたファイルは、自動で変換されます。この処理を行うツールをMarkdownパーサーといいます。

Markdownパーサーとして有名なのは、Pacdocです。私も変換の際は基本このツールを使っているのですが、Octopressのデフォルトでは、RDiscount が採用されています。

http://rdoc.info/github/davidfstr/rdiscount/RDiscount

変更するには、jekyllの設定ファイルに書きます。

_config.yml
1
2
3
4
5
6
markdown: rdiscount
rdiscount:
  extensions:
    - autolink
    - footnotes
    - smart

jekyllでのMarkdown設定

ここでは、Redcarpetを使ってみます。

_config.yml
1
2
3
markdown: redcarpet2
redcarpet:
  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript", "with_toc_data"]

bundle install

まず、bundle installを実行するために、Gemfileを編集します。

Markdownパーサーの機能

Markdownパーサーの機能はツールごとにそれぞれです。

例えば、autolinkの機能は、リンクがあれば自動でタグ付けしてくれます。

Rubyで使えるMarkdownパーサー | ひげろぐ

Octopress で GitHub Flavored Markdown (GFM) を使う - blog.tdksk.com

Markdown特殊記法

codeblock

codeblockを使うことで、コードを綺麗に表示できます。

実行前

{% codeblock lang:ruby hello.rb %}
puts "hello"
{% endcodeblock %}

実行後

hello.rb
1
puts "hello"

backtick

`を使うことで、コードをそのまま表示できます。

実行前

``` ruby hello.rb http://syui.github.io/ LINK
puts "hello"
```

実行後

hello.rbLINK
1
puts "hello"

backtickを単体で表示したい場合は、直接<code>などを使うと良いです。

raw

rawコードで囲むことで、特殊記法であるbacktickなどを表示できます。ただし、行頭にTabまたはSpaceを二つ入れましょう。

実行前

1
2
3
4
5
{% raw %}
    ``` ruby hello.rb
    puts "hello"
    ```
{% endraw %}

実行後

``` ruby hello.rb
puts "hello"
```

HTMLを表示したい場合は、codeblockrawを組み合わせるとうまくいきます。

ちなみに、rawは以下のコードを使うことで、codeをエスケープできます。

{{"code"}}

Octopressでのコードの表示やコメントのあれこれ - rcmdnk’s blog

markdown

Markdownパーサーを指定できます。

Previewを高速化する

記事を読み込まれない場所に移動させることで、プレビューを高速化出来ます。

1
2
3
$ rake isolate\[filename\]

$ rake integrate

isolateは、指定したファイル以外をsource/_stashに移動させるコマンドです。

integrateは、移動させたファイルを元の場所に戻すコマンドです。

Octopressのpreviewを高速化する - gam0022.net

Previewと同時に、Browserを開く

Rakefile
1
2
3
4
5
6
7
8
9
10
11
12
13
require 'bundler/setup'
require 'thread'
require 'launchy'

desc 'preview'
task :preview do
  Thread.new do
    sleep 1
    Launchy.open 'http://localhost:4000/'
  end

  sh 'bundle exec jekyll serve --watch'
end
Gemfile
1
2
gem 'github-pages'
gem 'launchy'

ローカルサーバ起動と同時にブラウザで開く。 - Jekyll とかで。 - そんなこと覚えてない

日付の形式を変更する

_config.ymldate_format:を編集します。

_config.yml
1
2
3
4
5
# 2014/01/01
date_format: "%Y/%m/%d"

# 2014年1月1日
date_format: "%Y年%m月%d日"

Mobileの表示に対応する

ダウンロードしたテーマでは、モバイルサイトでバウンドしてしまうようです。したがって、出来る限りバウンドしないように設定します。

ちなみに、モバイル設定は別にしてまとめておいたほうが良さそうです。

sass/custom/_mobile.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
img {
word-break: break-all;
white-space: inherit;
}

figure {
word-break: break-all;
}

code {
word-wrap: break-word;
//word-break: break-all;
white-space: inherit;
}

a {
word-break: break-all;
}

原則として、word-wrap: break-wordを使ったほうが良さそうです。Firefoxでは、一部、word-wrap: break-wordでないと効果が無いケースを確認しました。

参考:

長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon

sass/_base.scss
1
@import "custom/_mobile";

様々な記号を使う

以下のページがとても参考になりました。

http://www.benricho.org/symbol/tokusyu_01_usefull.html

具体的には、morepagerに使用しました。

moreは、_config.ymlにて設定します。

pagerは、source/index.html及び、source/_layouts/post.htmlにて設定します。

Top Pageに移動するアイコンを作った

たまに自分で閲覧していて、不便な時があるので設置することにしました。ヘッダー固定用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.mobile-footer-up {
z-index: 99999;
position: fixed;
bottom: 0px;
left: 0%;
width: 100%;
hight: 30px;
text-align: center;
font-size: 15px;
font-weight: 500;
background-color: #000;
color: #0066FF;
}

.mobile-footer-up a {
display: block;
}

.mobile-footer-up a:hover {
color: #66CCFF;
background-color: #303030;
}

index.htmlの末尾に以下のコードを追加します。

source/index.htmlLINK
1
<div class='mobile-footer-up'><a href='#top'>&and;</a></div>

ちなみに、目次がある場合には、目次に飛ぶこともできます。

source/_posts/test.markdown
1
<a name="top">目次</a>

Menubarの試行錯誤

Menubar Ver.1

結構、苦戦しました。このテーマのメニューバーは、CSS要素で現在選択しているメニューを示します。

HTMLは、デモサイトのソースを読みました。

source/_includes/custom/navigation.html
1
2
3
4
5
6
7
8
9
10
11
<ul class="nav navbar-nav">
    <li {% if page.navbar == 'Blog' %}class="active"{% endif %}>
        <a href="{{ root_url }}/"><img class="hidden-xs" src="{{ root_url }}/images/home.png" alt="home"></a>

    </li>
    <li {% if page.navbar == 'Archives' %}class="active"{% endif %}>
        <a href="{{ root_url }}/blog/archives">Archives</a>
    </li>
    <li {% if page.navbar == 'Twitter' %}class="active"{% endif %}><a href="https://twitter.com/PSP_T" target="_blank">Twitter</a></li>
    <li {% if page.navbar == 'About' %}class="active"{% endif %}><a href="{{ root_url }}/about">About</a></li>
</ul>

CSSで新しく追加する要素は、li:hover.active:hoverです。

sass/partials/_header.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.navbar {
margin-bottom: 40px;
border: 0;
}

.navbar-default .navbar-nav>.active>a {
color: #000;
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-nav > li:hover {
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
}

.navbar-nav > .active:hover {
opacity: 0.5;
transition: 0.7s;
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
}

Menubar Ver.2

選択されたメニューに1pxの齟齬があったり、hoverの設定が難しかったりです。

今のところ、以下の様な感じになっています。

source/_includes/custom/navigation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<nav class="navbar navbar-default" role="navigation">
<div class="container2">
  <a href="/"><img src="{{ root_url }}/images/phoenix_fire.png" width="150" height="150" alt="phoenix_fire"></a>
</div>
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
           <a class="navbar-brand" href="{{ root_url }}/">{{ site.title }}</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li {% if page.navbar == 'Blog' %}class="active"{% endif %}>
                    <a href="{{ root_url }}/"><img src="{{ root_url }}/images/home.png" alt="home"></a>


                </li>
                <li {% if page.navbar == 'Archives' %}class="active"{% endif %}>
                    <a href="{{ root_url }}/blog/archives">Archives</a>
                </li>
                <li {% if page.navbar == 'Twitter' %}class="active"{% endif %}><a href="https://twitter.com/PSP_T" target="_blank">Twitter</a></li>
                <li {% if page.navbar == 'About' %}class="active"{% endif %}><a href="{{ root_url }}/about">About</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="subscribe-rss" href="{{ site.subscribe_rss }}" title="subscribe via RSS">
                        <span class="visible-xs">RSS</span>
                        <img class="hidden-xs" src="{{ root_url }}/images/rss.png" alt="RSS">
                    </a>
                </li>
                {% if site.subscribe_email %}
                <li>
                    <a class="subscribe-email" href="{{ site.subscribe_email }}" title="subscribe via email">
                        <span class="visible-xs">Email</span>
                        <img class="hidden-xs" src="{{ root_url }}/images/email.png" alt="Email">
                    </a>
                </li>
                {% endif %}
            </ul>
            {% if site.simple_search %}
                <form class="search navbar-form navbar-right" action="{{ site.simple_search }}" method="GET">
                    <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
                    <div class="form-group">
                        <input class="form-control" type="text" name="q" placeholder="Search">
                    </div>
                </form>
            {% endif %}
        </div>
    </div>
</nav>

1pxの齟齬を解消するには、max-height: 50px;を設定します。メニューバーのタイトル部分の項目は、.navbar-default .navbar-brandで設定します。

sass/partials/_header.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
header[role=banner] {
    /* fix email / rss icon for bootstrap navbar */
    .navbar-default .navbar-nav > li img {
        height: 18px;
    }
}

.navbar {
margin-bottom: 40px;
border: 0;
}

.navbar-default {
background-color: #E4E4E4;
background-image: none;
background-repeat: none;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}

.navbar-default .navbar-nav>.active>a {
max-height: 50px;
color: #000;
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-nav > li:hover {
max-height: 50px;
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
}

.navbar-default .navbar-brand {
color: #428bca;
}

.navbar-nav > .active:hover {
max-height: 50px;
opacity: 0.5;
background-image: -webkit-linear-gradient(top,#428bca 0,#428bca 100%);
background-image: linear-gradient(to bottom,#428bca 0,#428bca 100%);
}

.container2 {
  text-align: center;
  font-size: 29px;
  font-weight: 100;
  color: #428bca;
  background-color: #000000;
}

.container2 img:hover {
  opacity: 0.4;
  transition: 0.7s;
}

Menubar ver.3

メニューを選択した時に、境界をはっきりできるようにしました。

sass/partials/_header.scss
1
2
3
.navbar-nav>li{
border-right: solid 1px #e7e7e7;
}

スライド式の「続きを読む」

マウスオーバーすると、こんな感じでスライドします。iPhoneの「スライドでロック解除」みたいなイメージです。

テーマは、octostrap3を使っているので、注意してください。

以下のようなファイルを作り、指定の場所に置きます。

sass/custom/_more
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.btn {
  width: 100%;
  height: 40px;
  padding: 9px 20px;
  border-radius: 0px;
}

.btn:hover,
.btn:focus {
  border-color: #535353;
  border-right: solid 40px #535353;
  color: #fff;
  transition: 0.7s;
  background-color: #99CCFF;
  padding-left: 80%;
  border-left: solid 1px #535353;
}

.btn-default {
  border-color: #404040;
  border-left: solid 40px #404040;
  text-align:left;
  box-shadow: none;
    -webkit-box-shadow: none;
  text-shadow: none;
  background-image: none;
  background-color: #428bca;
  color: #fff;
}

.btn-default a {
  background-color: #428bca;
}

そして、sass/_base.scssに以下を追記します。

sass/_base.scss
1
@import "custom/_more.scss";

コメントフォーム、Disqus

Disqusというのは、非常に有名なコメントサービスのことです。

Disqusには、日本語はないみたいですが、デフォルトでもそれなりの外観と使いやすさを持っているため、多くのブログに広く使われています。

Disqusの設置

Disqusを設置する方法は、サイト登録にて、サイトを登録して、設置コードを取得します。

それをブログに設置すれば、多くのブログに使用できます。

通常は、以下の様なコードになっています。

disqus_threadLink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'ここに入る名前がショートネームです'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

OctopressでのDisqusの設置

まず、shortnameの取得を具体的に説明します。

次に、octopress/_config.ymlを以下のように編集します。

octopress/_config.yml
1
2
3
# Disqus Comments
disqus_short_name: shortname
disqus_show_comment_count: true

なお、設定ファイルである_config.ymlを書き換えてもrake previewは効かないので注意してください。

OctopressでDisqusを設置した理由

サイトが遅くなるので、あまり設置したくなかったのですが、設置してみました。

OctopressにDisqusを設置した理由としては、記事下の境界を分かりやすくするためです。

最初は、borderでも使おうと思ったのですが、この際、コメントを設置したほうが一石二鳥だと思いました。

なんかあれば、すぐに外しますが、今のところこんな感じです。

文章幅の調整

行間の幅の調整

行間を調整するには、line-heightを使います。

1
2
3
4
5
6
7
body {
line-height: 150%;
}

p {
line-height: 200%;
}

改行の幅の調整

私の場合は、br要素を変更するのではなく、p要素を変更することで対応しました。

1
2
3
p {
margin-bottom: 30px;
}

見出しの調整

少しだけ見出しの下が窮屈だったので、調整してみました。

1
2
3
h2 {
margin-bottom: 40px;
}

Octostrap3のPager

アイコンの形を変えたり、表示場所を変えたり、記事タイトルを消したりしました。

一応、モバイルサイトを考慮した結果です。

Octostrap3のPagerは、source/index.htmlsource/_layouts/post.htmlでカスタマイズできます。

CSSの方は、source/assets/bootstrap/dist/css/bootstrap.cssを参考に、カスタマイズしていきましょう。

Octostrap3のPagerの角丸を削除する

GitHub Pages + Octopress カスタマイズに書きました。

具体的には、.pager li &gt; spanを変更します。

sass/custom/_styles.scssLink
1
2
3
4
5
6
7
8
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
}

Octostrap3のPagerを一番下に表示する

Disqusよりも下に表示したほうが良いと思いました。

記事にコメントが書き込まれた場合、一つの情報として見ることができるからです。

source/_layouts/post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if site.disqus_short_name and page.comments == true %}
     <section>
       <h1>Comments</h1>
       <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
     </section>
{% endif %}

{% if page.previous.url or page.next.url %}
  <ul class="meta text-muted pager">
    {% if page.previous.url %}
    <li class="previous"><a href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">&larr;&nbsp;Older</a></li>
    {% endif %}
    {% if page.next.url %}
    <li class="next"><a href="{{page.next.url}}" title="Next Post: {{page.next.title}}">Newer&nbsp;&rarr;</a></li>
    {% endif %}
  </ul>
{% endif %}

上がコメントで下がページャーです。

Octostrap3のPagerにタイトルを入れない

上のコードでタイトルを入れない処理は完成していますが、MacBookAir</a>みたいなところをNewer&nbsp;&rarr;</a>に書き換えた気がします。

これでモバイルでもタイトルが長すぎて「次へ」ボタンの見栄えが悪くなることはありませんね。

Code Blockの行番号と背景色

色は、黒ベースにしました。背景が白なので、逆の色のほうが見やすいかと思います。

また、行番号も付けました。具体的には、display: noneが設定されてたみたいです。

変更前

変更後

コメントにちょっと気になる表示XXXがあったのですが、あまり気にしないでおこう…。

sass/partials/_syntax.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.highlight .line-numbers, .gist-file .line-numbers {
  //XXX
  //display: none;
  font-family: "Raleway";
  @if $solarized == light {
    background: lighten($base05, 1) $noise-bg !important;
    border-right: 1px solid darken($base07, 2) !important;
    @include box-shadow(lighten($base03, 2) -1px 0 inset);
    //text-shadow: lighten($base02, 2) 0 -1px;
  } @else {
    background: $base02 $noise-bg !important;
    border-right: 1px solid darken($base05, 2) !important;
    @include box-shadow(lighten($base07, 2) -1px 0 inset);
    //text-shadow: darken($base02, 10) 0 -1px;
  }
}

.pre-code {
  background: $base04 $noise-bg !important;
}

.highlight, .gist-highlight {
  background: $base04 $noise-bg;
}

figure.code:not(.panel), .gist {
  .highlight {
          //border-top: 1px solid #ddd;
      }
}

.gist .highlight, figure.code .highlight {
   @if $solarized == light {
     @include selection(adjust-color($base00, $lightness: 23%, $saturation: -65%), $text-shadow: $base00 0 1px);
   } @else {
     @include selection(adjust-color($base06, $lightness: 23%, $saturation: -65%), $text-shadow: $base06 0 1px);
   }
}

sassの書き方に習って、色を定義しておきます。

sass/base/_solarized.scss
1
2
3
4
5
6
7
$base04:#191919 !default; //black
$base05:#1A1A1A !default; //black
$base06:#999 !default; //black
$base07:#000 !default; //black
$base08:#E6E6E6 !default; //white
$base09:#fcfcfc !default; //white
$base10:#F8F8F8 !default; //white

あと、ノーマルの文字色がちょっと暗いので、変更。この辺は、テーマ$solarized == lightでやるのかなと思いましたが、調べるのも面倒です。

sass/partials/_syntax.scss
1
2
3
.pre-code {
  color: $base09 !important;
}

フォントの大きさ

フォントの大きさを少し変更してみました。

sass/custom/_typography.scss
1
2
3
4
5
6
/* 本文 */
.entry-content {
    font-size: 18px;
    @media only screen and (min-width: 768px) {
        font-size: 18px;
    }
sass/partials/_syntax.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* コード */
.highlight .line-numbers, .gist-file .line-numbers {
    font-family: "Raleway";
    font-weight: 100;
    font-size: 16px;
}

/* コード、タイトル */
figure.code:not(.panel), .gist {
    figcaption, .gist-file {
        span, a[href*='#file'] {
            font-size: 16px;
            line-height: 1.1;
            //font-weight: 100;
        }
    }
}

Archiveの変更

基本的に、source/blog/archives/index.htmlsource/_includes/archive_post.htmlをいじればOKです。

設定が細かく分断されていて、非常に分かりにくいんですが…。

以下の様な感じになりました。

スラッシュのような線

スラッシュのような線というのは、以下の様な感じのものです。先が細く、真ん中は太いという感じのもの。

padding-top:10px;はフォーカスを当てると、上部分が光るようにしているためです。

sass/custom/_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.btn {
  width: 100%;
  border: none;
  background: none;
  box-shadow: none;
  padding-bottom: 0;
  padding-top:10px;
}

.btn:before, .btn:after{
display: block;
content: '';
height: 1px;
background-image: -webkit-linear-gradient(left, #fff, #4bccff, #fff);
background-image: -moz-linear-gradient(left, #fff, #4bccff, #fff);
background-image: -ms-linear-gradient(left, #fff, #4bccff, #fff);
background-image: -o-linear-gradient(left, #fff, #4bccff, #fff);
}

.btn:hover,
.btn:focus {
color:#000;
background-image: -webkit-linear-gradient(left, #fff, #5495D6, #fff);
background-image: -moz-linear-gradient(left, #fff, #5495D6, #fff);
background-image: -ms-linear-gradient(left, #fff, #5495D6, #fff);
background-image: -o-linear-gradient(left, #fff, #5495D6, #fff);
transition: 0.7s;
}

.btn-default{
margin:0px;
}

しかし、.btn辺りの設定が一体どのファイルから変換されてるのか分からない…。

codeのカスタマイズ

キーワードを強調するcodeタグをカスタマイズしてみました。

sass/custom/_syntax.sass
1
2
3
4
5
6
7
8
9
10
11
code {
word-break: break-all;
white-space: inherit;
background-color: #F5F5F5;
border: 1px solid #DCDCDC;
font-size: 100%;
}

pre code{
border:none;
}

そういえば、font-sizeが90%になっているのは、1行でたくさん使った場合に、重ならないようにするためでしたね。

以下、実験です。

1行でたくさんのcodeを使った場合の表示

octopress,octopress,octopress,octopress,octopress,octopress,octopress,octopress,octopress,

Sidebarにいろいろ設置する

octopress-tagcloud

タグクラウドをサイドバーに表示します。

https://github.com/tokkonopapa/octopress-tagcloud

sass/custom/_syntax.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├─ plugins/
  └── tag_cloud.rb
└─ source/
   └─ _includes/
      └─ custom/
         └─ asides/
            ├─ category_list.html
            └─ tag_cloud.html
octopress/_config.yml
default_asides: [
    asides/recent_posts.html,
    custom/asides/about.html,
    custom/asides/tag_cloud.html
]

octopress-category-list

タグリストをサイバーに表示します。

https://github.com/ctdk/octopress-category-list

http://kaworu.github.io/octopress/blog/2013/10/03/category-list-aside/

source/_includes/custom/asides/category_list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Categories</h3>
  </div>
  <div class="list-group">
    {% for category in site.categories %}
    {% capture category_url %}{{ site.category_dir }}/{{ category | first | slugize | downcase | replace:' ','-' | append:'/index.html'}}{% endcapture %}
    <a class="list-group-item {% if category_url == page.url %}active{% endif %}" href="{{ root_url | append:'/' | append:category_url }}">
        <span class="badge">{{ category | last | size }}</span>
        {{ category | first }}
      </a>
    {% endfor %}
  </div>
</section>
octopress/_config.yml
1
2
3
4
default_asides: [
    asides/recent_posts.html,
    custom/asides/category_list.html
]

Qiita Widget

http://qiita-widget.suin.org/

source/_includes/custom/asides/qiita.html
1
2
<a class="qiita-timeline" href="https://qiita.com/users/{ユーザ名}" data-qiita-username="{ユーザ名}">{ユーザ名}のtips</a>
<script src="//qiita-widget.suin.org/widget.js"></script>
_config.yml
1
2
3
4
default_asides: [
    asides/recent_posts.html,
    custom/asides/qiita.html
]

Hatena Widget

http://b.hatena.ne.jp/guide/blogparts

sass/custom/_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.hatena-bookmark-widget-body ul {
background-color: transparent !important;
padding: 10px 10px 0px 10px;
}

.hatena-bookmark-widget ul li {
}

.hatena-bookmark-widget-title {
display:none;
}

.hatena-bookmark-widget-footer {
}
source/_includes/custom/asides/hatena.html
1
ここにタグを貼り付ける
_config.yml
1
2
3
default_asides: [
    asides/recent_posts.html,
    custom/asides/hatena.html

Div要素全体にリンクを貼る

source/index.html
1
2
3
<article class="post" onclick="location.href=&#34;{{ root_url }}{{ post.url }}&#34;;" style="cursor: pointer;">
  {% include article.html %}
</article>
partials/_blog.sass
1
2
3
4
5
6
7
8
article.post:hover {
background-color: #CCFFFF;
opacity: 0.8;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

画像枠を変更する

デフォルトでは、画像枠が大きすぎるので、変更しました。

partials/_blog.sass
1
2
3
4
5
6
7
8
9
10
img:not(.no-border) {
  border-radius: 0.2em;
  box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  -webkit-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  -ms-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  -o-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  border: #fff 0.3em solid;
  //@include shadow-box;
}

todo

domain

http://hamasyou.com/blog/2014/03/05/github-pages-custom-domain/ http://blog.awairo.net/blog/2013/12/14/custom-domain-for-gh-pages/

tags

http://rcmdnk.github.io/blog/2013/04/12/blog-octopress/

AppStoreのアプリを紹介する

sotsy/appbox-octopress · GitHub

まず、octopressのルートディレクトリにて、必要なものをインストールします。

~/octopress/Gemfile
1
2
3
gem 'nokogiri'
gem 'json'
gem 'appbox-octopress'
1
2
3
$ bundle install

$ appbox-octopress install
1
2
3
4
5
6
7
8
9
$ cd ~/octopress/source/stylesheets

$ curl -O https://raw.githubusercontent.com/sotsy/appbox-octopress/master/templates/css/appbox.css

$ cd ~/octopress/plugins

$ curl -O https://raw.githubusercontent.com/sotsy/appbox-octopress/master/templates/plugins/appbox.rb

$ vim ~/octopress/source/_includes/custom/head.html
~/octopress/source/_includes/custom/head.html
1
<link href="{{ root_url }}/stylesheets/appbox.css" media="screen, projection" rel="stylesheet" type="text/css">

以下の様な書き方ができるようになります。

1
2
3
{% appbox appstore 722294701 %}

{% appbox googleplay screenshots com.ea.games.nfs13_row %}

ただし、このままでは、モバイルでの表示に不都合が生じます。したがって、以下の要素などを使って、CSSを変更します。

~/octopress/source/stylesheets/appbox.css
1
2
3
4
5
6
7
8
9
10
11
.apptitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.developer {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

はみ出した部分は、非表示し、非表示が存在する場合は、...で表示します。

Amazonの紹介を簡単にする

https://github.com/longkey1/octopress-amazon-plugin

1
2
3
4
5
6
7
8
9
$ cd /path/to/octopress

$ vi Gemfile
gem 'amazon-ecs'
gem 'i18n'

$ bundle install --path vendor/bundle

$ curl -o ~/path/to/octopress/plugins/amazon_tag.rb https://raw.github.com/longkey1/octopress-amazon-plugin/master/amazon_tag.rb
/path/to/octopress/_config.yml
1
2
3
4
5
6
7
8
# Amazon plugin
amazon_access_key_id: 'your access key id'
amazon_secret_key:    'your secret key'
amazon_associate_tag: 'your associate'
amazon_cache:         false # or true
amazon_cache_dir:     '.amazon-cache'      # default '.amazon-cache'
amazon_country:       'jp'                 # default 'en'
amazon_local:         'ja'                 # default 'en'

使い方は、以下の書式で行います。

1
2
3
4
5
{% amazon [type] [asin] %}
type: text, small_image, medium_image, large_image, title, detail, image

{% amazon large_image 4873113946 %}
{% amazon detail 4873113946 %}

参考になるブログ

タイトル 内容
Glide Note - グライドノート 非常にカッコいい雰囲気が出ているブログです。結構古くからあるOctopress+GitHubで構築されたブログで、これは便利と思えるツールが紹介されています。
rcmdnk’s blog 更新頻度が高く、主に、経験に基づいた情報を配信してくれているブログです。こういう方向性はすごく好き。かなりカスタマイズされているようで、オリジナル性が高い感じです。
酒と泪とRubyとRailsと デフォルトテーマをそのまま使用しているブログです。内容は非常にしっかりしていて、分かりやすく書かれています。カスタマイズはあまりなされていない感じですが、Octopressのテーマは、私の好みに合致しているので、そのままでも十分に読みやすいです。
haya14busa デザインが非常に素敵なブログ。個人的には、このサイトを参考にデザインを考えていきたいです。
SOTA 綺麗でシンプルなデザインが特徴的なブログ。一読性とシンプルさが逸材。
mimemo タイトルのフォントが美しいブログです。最近、タイトルを細字にするの流行ってるみたいですね。テーマをそのまま使っているブログ。
About Digital 簡潔にいろいろな技術がまとめられている感じのブログ。
それはBooks 独自ドメインも取得し、割としっかりと運営されている感じのブログ。特にサイドバーが美しい。
@znz blog Octopressのカスタマイズについての記事も多いブログ
そんなこと覚えてない 日常や活動について書かれているブログ
TODESKING 主に制作物などが紹介されているブログ
OctoFound 個人的には非常に好みなデザイン。Bootstrapを使っているブログ。テーマとしても公開されている。
Front-end Web Developer - Stephen Coogan Octopressの公開されているテーマの中では、一番すごいデザインだと思います。