AwAlog

めもちょー

テーマ変更。他Octpressのカスタマイズとか。

| Comments

テーマ変更の手順とテーマのカスタマイズなど。

テーマの変更手順

Octopress導入当時、あまりﾃｨﾝとくるテーマがみつけられなかったので、クラシックを少しいじる程度でいつか本気を出そうと思いつつ放置してたのですが、やっぱりなんだかぱっとしないので、思い切ってテーマを変えてみました。

とりあえず、「Octopress テーマ」で検索して最初に目についたサイトを参考にさせてもらいながら、テーマを変更してみました。

手順はこんなかんじになります。

  1. GitHubのサードパーティ製テーマのページを開く。
  2. PreviewやScreenShotを見て気に入る物を探す。
  3. 各テーマの導入手順通りに導入する。

だけ！

テーマもGitHub上で公開されているので、Cloneしてきてインストールするだけです。実に楽ちん。

oct2-orangeのオレンジという単語に惹かれてさくっと決定。

$ git submodule add git://github.com/roberto/oct2-orange.git .themes/oct2-orange
$ rake install[oct2-orange]

丸コピってコマンドを打ち込むと…

It seems your ruby installation is missing psych (for YAML output). To eliminate this warning, please install libyaml and reinstall your ruby.

なんかrubyの警告が出てる

どうやらCentOS5(6も)の環境にRubyをいれるときに出くわす問題っぽい？

エラーメッセージで検索して最初に目についたサイトを参考に、libyamlをインストール。libyamlのバージョンとかConfigureのオプションとかを一切確認せず、コマンドを丸コピペしてEnter。

$ wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz
$ tar -zxvf yaml-0.1.4.tar.gz
$ cd yaml-0.1.4
$ ./configure
$ make
$ sudo make install

問題なく終わったみたいなので、以前Rubyを導入したときのディレクトリに移動してrubyも再インストール。

$ cd ~/ruby/ruby-1.9.3-p374
$ ./configure
$ make
$ sudo make install

できたっぽい。頑張ったっぽい？

今度こそテーマをインストール

$ rake install[oct2-orange] 
A theme is already installed, proceeding will overwrite existing files. Are you sure? [y/n]

念のためのバックアップはとっているので、yを選んでテーマを上書き。

設定変更など

やったことなどメモ。もう既に忘れかけ。

ナビバー表示

テーマの配布元に書いてあるとおりに_config.yml の default_asides を編集してナビバーを表示。

default_asides: [asides/nav.html, custo...

ナビバーのE-mailボタンを削除

source/_includes/asides/nav.html から以下の行を削除。

<a href="mailto:" alt="E-Mail"><img src="/images/Envelope.png"></a>

フォント変更

scss/custom/_fonts.scssを修正

$sans: Consolas, "MeiryoKe_PGothic", "メイリオ", sans-serif;
$serif: Consolas, "MeiryoKe_PGothic", "メイリオ", sans-serif;
$heading-font-family: Consolas, "MeiryoKe_PGothic", "メイリオ", sans-serif;;

今度はConsolasを足してみた。

リストの左マージンを設定

リストが左に寄ってる感じなので、適当にマージンを追加。

_styles.scss

/* ----- Content ----- */
  :(中略)
#content {
  article {
    ul {
      margin-left: 25px;
    }
    ol {
      margin-left: 40px;
    }
  }
}

なんか、このスタイルの定義ファイル、元からある記述はネストされてなくてちょっと見づらい…。

htmlタグのlang属性を日本語に変更

以前やったのと同じようにoctopress/source/_includes/head.htmlを編集。

<html class="no-js" lang="ja">

足りない変更はまた後日行う予定。スタイルももう少し弄りたいし、はてブボタンとかサイドバーへの手直しなどが足りてなさそう。時間も足りてなさそう。(╯•﹏•╰)

サイトのタイトルとか出ないのはそういうテーマっぽいけれど、左上にトップに戻るリンクないと落ち着かない気がするのでその辺りも何とかしたいトコロ。

だそく

いいローカル側のファイルのGitリポジトリ作ってコミットするようにしないと変更管理できないなぁって痛感。本気出すための服がほしい…。

Comments