とりあえずページが公開出来るようになったので、次は Octopressページの見た目の変更や色々な表示の変更についてです。
_config.ymlの編集
ページのタイトルページ等の基本的な設定は_config.ymlと言うファイルの中に
あるので、これを編集していきます。
以下、主に変更した点。
タイトル等の基本情報
一番上にある、title, subtitleを変更するとブログトップに表示されるタイトルが
へ航されます。
日時表示設定
デフォルトではアメリカ表記で”July 22nd 2007” などと書かれますが、 rubyの時間表記表現 を使って 好きなように変えられます。
date_format: "%d %b %Y"
と書けば、”22 JUL 2007”の様な表記になりますし
date_format: "%Y年%m月%d日"
としておけば、”2007年7月22日”となります。
Jekyll & Plugins
基本的なページ設定等。
最近の投稿の表示数(paginate)や
表紙ページでの投稿の表示数(recent_posts)等が変えられます。
excerpt_linkの値は、長い記事を途中で切って表示して
“Read on →“と表示してして続きへのリンク
表示するためのものです。
これを表示するためには、記事の途中に
<!-- more -->
を記入します。そうすると、これより上の部分だけが表紙ページに表示され、 下に”Read on →“が表示されます。
この値を”続きを読む”などと変更すれば表示を変更することができます。
デフォルトでtitlecaseはtrueですが、これだとタイトルに含まれた
アルファベットの単語が全て最初が大文字になります。
タイトルはnew_postした後に必ず編集するので、書いたとおりになって欲しいので
titlecaseはfalseにしておきました。
余白表示 (サイドバー)
classic等のテーマだと記事の右側に最近のポストなどが表示されますが、
これは
default_asides: [asides/recent_post.html, ...]
の[]内を変えてやることで変えられます。
source/_includes/asides/やsource/_includes/custom/asides/内にある
ファイルを表示することが出来ます。
元々あるファイルを編集したり、
自分で好きなhtmlファイルをsource/_includes/custom/asides/内に加えて
上記[]内に加えてもOKです。
(about.htmlと言うAbout Me用のファイルがデフォルトであります。)
Octopressのサイドバーにタグリストやタグクラウドを表示させよう！ で紹介されているプラグインを使うとタグリストやタグクラウドも表示出来ます。
default_asidesの他に
blog_index_asides、post_asides、page_asidesと言う値もあり、
それぞれインデックス、ブログの記事、ページの表示を決めることが出来ます。
3rd Party Settings
GitHubのレポジトリを表示したりするために外部サービスのアカウント名や ブログに表記するかどうかの設定などを行います。
Github repositories
github_userにユーザー名を加えて、github_repo_coutを3にしておきました。
この値が0だと、どうやら全部のレポジトリ(もしくは適当な上限?)を表示して
うるさいので適当な小さな数字に。
(プロファイルページヘの表記だけにしたいな、と思いましたが、そのためには
GitHubの表記が書かれているファイルを直接編集しないといけなそうです。)
Twitter, Google+, Facebook
Twitterはtwitter_userを記入してやることで
自分のツイート等も表記できるように設定出来ます。
twitter_tweet_button、google_plus_one、facebook_likeの値をtrueにすると、
記事の下にそれぞれのシェアリングボタンが出るようになります(デフォルトだとtwitterだけ)。
このシェアリングボタンの表記はsource/_includes/post/sharing.htmlに書かれています。
このsharing.htmlを編集して
{% if site.hatena_button %}
<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 %}
という部分を<div></div>内に加えて、_config.yml内に
# Hatena Bookmark
hatena_button: true
と加えればはてなブックマークのボタンも付けることが出来ます。
(常に表示するだけなら<a href...の部分をsharing.html内のdivブロック内にに
加えるだけでOKです。)
注)sharing.html等はテーマに含まれるため、後でテーマを変更すると この変更は全て上書きされてしまいます。 テーマによって表示の仕方が根本的に違う物もあります。 いずれにしろ、テーマを変更したりする前に pushしておいたり、必要ならこのファイルだけ他にコピーしておいてテーマ適用後 再びコピー直ぐに適用出来るようにしておいた方が良いです。
Gogole Analytics
Google Analyticsを使いたい場合、 トラッキングIDを
# Google Analytics
google_analytics_tracking_id: UA-XXXXXXXX-X
の部分に設定します。
新しいアカウントで管理する場合、右上のアナリティクス設定を押して
アカウントの管理ページに行き+新しいアカウントボタンを押します。
ウェブサイト名、ウェブサイトのURLにそれぞれ
ブログ名やサイトURL(username.github.com等)を記入して
他も適時記入します。
そうすると、トラッキング情報ページになり、トラッキングIDが表示されています。
ここで、ステータスがトラッキングがインストールされていません
となっていますが、IDを上記の様に正しく加えてしばらくすると
トラッキングがインストールされています
と表記が変わります。
コメント欄
DISQUSを利用してコメント欄を設置出来ます。 まず、DISQUSでアカウントを作り、
# Disqus Comments
disqus_short_name: "Account of DISQUS"
disqus_show_comment_count: true
とするだけで記事の下にコメント欄が表示されるようになります。
テーマの変更
デフォルトのテーマはclassicと呼ばれるもので、.themes内にその設定ファイルが
入っています。
ここへ、新たなテーマを入れることでテーマの変更が可能になります。
3rd Party Octopres Themes
から気に入ったものを取ってきて設定します。
$ git clone https://github.com/panks/fabric .themes/fabric
$ rake install['fabric']
$ rake generate
rake installした時に、もうテーマはインストールされてるけど上書きするか?
と聞かれるので、yを押して下さい。
上に書いた様にsource/_includes/post/sharing.htmlなどが上書きされるので
注意して下さい。
また、rake installでは色々とファイルをsource内にコピーしていくのですが、
元に戻そうとrake install['classic']とやったとしても、
classicのテーマでは変更しないファイルなどがあると、元に戻しきれないことがあります。
ですので、テーマを色々試すときは、ちゃんと元に戻せるようsourceの基点を作っておくか、 もしくは別にoctopressディレクトリを作ってそこでテーマだけテストして見るほうが 良いかもしれません。