phoenix-powerブログ、カスタマイズする部分も少なくなってきました。

githubrepo-octopress

githubrepo-octopressのタイトルにアイコンフォントを使うことにしました。

デフォルトでは画像が使われているので、綺麗な画面で表示すると、どうにも汚い…。

watchとかforkとかは今度差し替えるかもしれません。(小さいからいいか)

../source/javascripts/jquery.githubRepoWidget.min.js
1
'<div class="github-box repo">'+'<div class="github-box-title">'+"<h5>"+'<span class="octicon octicon-mark-github" style="font-size: 30px; color:#000; margin-right: 10px;"></span>'+'<a class="owner" href="'+l+'" title="'+l+'">'+a+"</a>"+"/"+'<a class="repo" href="'+c+'" title="'+c+'">'+f+"</a>"+"</h5>"+'<div class="github-stats">'+'<a class="watchers" href="'+c+'/watchers" title="See watchers">?</a>'+'<a class="forks" href="'+c+'/network/members" title="See forkers">?</a>'+"</div>"+"</div>"+'<div class="github-box-content">'+'<p class="description"><span></span> — <a href="'+c+'#readme">Read More</a></p>'+'<p class="link"></p>'+"</div>"+'<div class="github-box-download">'+'<div class="updated"></div>'+'<a class="download" href="'+c+'/zipball/master" title="Get an archive of this repository">Download as zip</a>'+"</div>"+"</div>"

GitHub Repos

サイドバーに設置している GitHub Repos の調子がおかしい。

何時頃からだったか忘れました。

上のプラグインを導入してからだったか。多分違います。

新たなリポジトリをpushしてからだったそんな気がします。

現在、READMEを表示しないようにしているのですが、それが影響しているのかもしれません。

octopressのsidebarにgithub repoとかcoderwallとか表示する - fukayatsu.dev

Octopress のサイドバーに Coderwall Badges を表示 - yoshiori.github.io

URLは大切

今まで適当すぎるネーミングだったのですが、やっぱり大切ですね。

これからは、ある程度の定型文にしていきたいと思います。

普通の記事は、大体、3つの単語から構成するようにしていきたいです。

ちなみに、まとめ記事は1つか2つの単語にします。

リンクを追加している時に、あまりの酷さにショックを受けました。

RSSで配信されている点もあり、変更が困難であることも大きいです。

あと、独自ドメインとってるので、urlを変更してみました。これは、{ root_url }にあたります。

_config.yml
1
url: http://syui.co

まず、httpを入れないとダメみたいです。また、RSSの{ site.subscribe_rss }を見てみたら、/が行頭に挿入されておらず、したがって、url: http:hoge.com/としてはいけないみたいです。

Animetion for Firefox

かなり頑張ったのですが、何故か Firefox ではアニメーションが動作しませんでした。

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
.hoge {
//animation
background-image: linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
background-image: -weblit-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 90%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);

transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;

animation: Rotate 0.7s ease-out;
-webkit-animation: Rotate 0.7s ease-out;
-moz-animation: Rotate 0.7s ease-out;
-ms-animation: Rotate 0.7s ease-out;
-o-animation: Rotate 0.7s ease-out;

animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
}

@-webkit-keyframes Rotate {
100% {
background-image: linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 10%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%);
}

90% {
background-image: linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 20%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%);
}

80% {
background-image: linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 30%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%);
}

70% {
background-image: linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 40%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%);
}

60% {
background-image: linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 50%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%);
}

50% {
background-image: linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 60%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%);
}

40% {
background-image: linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 70%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%);
}

0% {
background-image: linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%);
background-image: -moz-linear-gradient(to bottom, #f8f8f8 71%,#428bca 100%);
background-image: -ms-linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%);
background-image: -o-linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%);
}
}

@-moz-keyframes Rotate { 100% { background-image: linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 10%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 10%,#428bca 400%); } 90% { background-image: linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 20%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 20%,#428bca 400%); } 80% { background-image: linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 30%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 30%,#428bca 400%); } 70% { background-image: linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 40%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 40%,#428bca 400%); } 60% { background-image: linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 50%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 50%,#428bca 400%); } 50% { background-image: linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 60%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 60%,#428bca 400%); } 40% { background-image: linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 70%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 70%,#428bca 400%); } 0% { background-image: linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%); background-image: -moz-linear-gradient(to bottom, #f8f8f8 71%,#428bca 100%); background-image: -ms-linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%); background-image: -o-linear-gradient(to bottom, #f8f8f8 71%,#428bca 400%); } }

ちなみに、 Vim では、範囲指定してJを押すと、一行に短縮されます。

よって、各ブラウザに対応したものを書くとき便利です。定形を用意しておいて、yy, J…。

Menubar

メニューの各ボックスliにリンクを貼りました。画像を使ってた時は調整のため全体にリンクを張ってませんでした。

1
2
3
4
li {
  display: block;
  height: 50px; //メニューの縦幅にする
}

display, height、この二つの要素を追加すれば、フォントではなく、ボックスにリンクします。

1
<li><a href="#"></a></li>