Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

OctopressにFont Awesomeを使ったScroll to TopボタンとAbout Meにアイコンを追加

| Comments

ブログを見直してて、いちいちスクロールして画面のTopに戻るのは面倒なので、トップに戻るボタンを追加しました。また、サイドにあるAbout Meも文字だけだと寂しかったので、アイコンを足して、花を添えました(^_^)v

Font Awesomeの追加

まず、Font Awesome Version 3.2.1からFont Awesomeをダウンロードしましょう。現行はVersion 4.0.3ですが、それを使ったやり方が分からなかったので、今回はVersion 3.2.1を使用しました。
ダウンロードしたら、zipファイルを解凍しましょう。そして、中にあるcss/font-awesome.css_font-awesome.scssに名前を変更して、octopressのsass/custom/の中に移します。
次に、fontディレクトリをoctopressのsource/の中に移します。厳密には、FontAwesome.otf以外のファイルがsource/fontの中にあれば大丈夫です。
sass/screen.scssに次の1行を足して、

1
@import "custom/font-awesome";

Font Awesomeの追加は完了です。
使い方は簡単で、<i>タグで囲むだけです。

1
<i class="icon-compass"></i>

とすると

のようにできます。大きさも設定できたりするので、色々と遊んでみましょう。

Scroll to Topボタン

jQuery Scroll to Top Control v1.1scrolltopcontrol.jsをダウンロードします。そして、source/javascripts/の中に移します。scrolltopcontrol.jsを以下のように編集して、先ほど追加したFont Awesomeを使うように設定します。

1
2
3
// 12行目
-controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
+controlHTML: '<i class="icon-chevron-up  icon-scroll-up"></i>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

次に、source/_includes/custom/head.htmlに以下の2行を追記します。

1
2
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/scrolltopcontrol.js" type="text/javascript"></script>

最後に、sass/custom/_style.scssを編集して、以下を加えると完了です。

1
2
3
4
5
6
7
8
9
10
11
.icon-scroll-up {
  font-size: 3em;
  color: #999999;
  border: solid 2px #999999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#topcontrol {
  z-index: 100;
}

scrolltopcontrol.jsvar scrolltotopをイジると色々な設定が出来るみたいですが、今回は変更する必要がないので触れてません。興味ある方は、色々触って試してみましょう。

About Meに画像追加

これはそんなに難しくもなく、公式サイトのImage Tagにある以下のコードに沿って設定しましょう。ちなみに、画像の置く場所はsource/imagesです。また、以下の/path/to/imageには、/images/hogehoge.pngのように相対パスを書けば大丈夫です。

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

そして、設定したコードをsource/_includes/custom/asides/about.htmlに追記すると完了です。

おわりに

Font AwesomeのVersion 3.2.1を今回は使っていますが、現行がVersion 4.0.3なので、もし設定するときは最新のVersionに挑戦してみてもいいかもしれません。
今回は、あまり時間をかけれなかったので、古いVersionで手を抜いてしまいましたが、またどこか改善するやる気と時間があれば、トライしてみます。

参考先

OctopressへFont Awesomeの導入
Topへ戻るボタンの設置
Octopressで画像を貼るときのディレクトリ指定の仕方

Comments