サイトを作ってみたので、サイト作成の経緯をまとめてみます

はじめに

サイト、ブログの作成には様々なサービスがあるものの、現時点でのおすすめは、OctopressとMiddlemanです。

以下、Octopressで作ったブログの作成手順をまとめてみます。

一応、完成したブログはこちらになります。

http://syui.github.io

Middlemanも使ってみました。Middlemanの導入記事はこちらになります。

基本的な考え方

ブログのレイアウトとかデザインとかについての考え方

ブログのカスタマイズとか、レイアウトとか、デザインとか、正直あまり重要だとは思わないんです。個人的には。

何故かと言うと、自分が他人のブログのデザインとかを気にすることがあまりないからです。

私は、記事を読むのに支障がなければ、こういったことは気にしないタイプみたいです。

多分、他の人は、一見してどこが変更されたのか気が付かないだろうと思います。これが他人のブログだったら、間違いなく私は気がつかない。

たしかに、一見してわからないような変更をいくら頑張っても、全く意味が無いことなのかもしれません。

デザインについて考える上でのポイント

まず、他人のサイトやサービスで良いと思った部分を真似します。

正直、デザインと言われても、何が良いのか、悪いのかはよく分かりません。

したがって、他人のデザインとかレイアウトとかを見て、良いと思った部分を取り入れる方向で考えていきます。

また、他人にとっての使いやすさを選択するのではなく、自分にとっての使いやすさを第一に考えます。

したがって、いくらデザインが良くても、自分にとっての使いやすさの方を優先します。

最近では、個人ブログではなく、有名なサービス、具体的には、TwitterやGoogle+のデザインを参考にすることが多くなりました。

今採用しているレイアウトは、実はタイムラインを意識している部分があります。

ただし、真似と言ってもすべて真似するわけではなく、組み合わせとオリジナル要素を入れることも大切だとは思っています。

具体的な比重で言うと、真似 90% : オリジナル 10%と言った感じでしょうか。ここで、真似 90%の中には、組み合わせ 50% : すべてパクリ : 50%と言った感じです。

ブログはやったほうが良いのか

ブログはやったほうが良いのかどうかについて考えていきたいと思います。

結論から言うと、ブログというのは、特別な事情がない限り、それほど意味のあるものとは思えません。旗から見れば、多大な時間の無駄にもなり得るものです。

したがって、やらないほうが良いのかもしれません。他のことに時間を使ったほうが、有意義な場合も多いでしょう。

しかし、ブログを書いてる人を見ると、全く意味が無いというわけでもなさそうに感じることはあります。

というのも、①ブログを一度も始めたことがない人、②ブログを初めたもののすぐにやめてしまった人、③ブログを続けている人、を比較すると、明らかに③ブログを続けている人のほうが、高い技術と知能、人格を持ち合わせている確率が高い印象を私は持っています。

これは、別に定期的じゃなくてもいいんです。全く止めてしまった人でなければ、③に分類できると考えます。

このことを考えると、やっぱり、ブログを書くことって意味があるのかもしれないな、とそのように考えることもできます。

もちろん、ブログを書いたから高い技術と知能、人格が備わるかというと、必ずしもそこに因果関係を見出すことはできません。

しかし、ブログを書いてる人、続けている人というのは、やっぱり、すごい感じの人が多いような気がします。単なる印象ですが。

インストールと基本

まず、アップロード先になるGitHub Pagesを作ります。

インストールは、本体であるOctopressをローカルに持ってきて、必要なモジュールをインストールします。

ここで、Ruby v1.9.2を使用し、Gemfileがあると思いますので、bundle installします。

あとは、jekyllを使って、記事をポストしたり、アップロードしたりします。

# Rubyで処理を定義できるツールrakeを使ったインストール
$ rake install

# GitHub PagesとOctopressを紐付け
$ rake setup_github_pages

# HTMLの生成
$ rake generate

# プレビュー(http://localhost:4000/)
$ rake preview

# デプロイ(公開)
$ rake deploy

# HTMLの生成とデプロイを同時で
$ rake gen_deploy

Markdownで書いてGitで管理するブログ「Octopress」の始め方 - tantant

テーマの設定

Octopress Theme

$ cd octopress

$ git clone GIT_URL .themes/THEME_NAME

$ rake install['THEME_NAME']

$ rake generate

プラグインの導入

Octopress Plugin

githubrepo-octopress

例えば、GitHubのリポジトリを簡単に紹介するgithubrepo-octopressというものがあります。

例

$ curl -o ~/octopress/source/javascripts/jquery.githubRepoWidget.min.js https://raw.githubusercontent.com/JoelSutherland/GitHub-jQuery-Repo-Widget/master/jquery.githubRepoWidget.min.js -o ~/octopress/plugins/githubwidget.rb https://raw.githubusercontent.com/sotsy/githubrepo-octopress/master/githubwidget.rb

$ vim ~/octopress/source/_includes/head.html

</head>の上に以下のタグを挿入します。

~/octopress/source/_includes/head.html

<script src="{{ root_url }}/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="{{ root_url}}/javascripts/jquery.githubRepoWidget.min.js"></script>
<script>
  $.noConflict()
</script>

これで、以下の記述方式でGitHubのリポジトリを紹介できるようになります。

{% githubrepo sotsy/githubrepo-octopress %}

appbox-octopress

sotsy/appbox-octopressは、AppStoreのアプリを紹介することができます。Google Playアプリもです。

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

$ cat << EOF >> ~/octopress/Gemfile
gem 'nokogiri'
gem 'json'
gem 'appbox-octopress'
EOF

$ bundle install

$ appbox-octopress install

$ 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

source/_includes/custom/head.html

<link href="{{ root_url }}/stylesheets/appbox.css" media="screen, projection" rel="stylesheet" type="text/css">

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

{% appbox appstore 722294701 %}

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

Gist Tag

動かないようなので、修正版を使います。

$ cd ~/octopress/source/plugins/

$ curl -O https://gist.githubusercontent.com/j5ik2o/5550083/raw/gist_tag.rb

すると、以下の様な書式が使えるようになります。

{% gist 5672127 %}
{% gist 13411532 some_gist_file_name.rb %}

OctopressのGist Tagプラグインを改造してみた – じゅんいち☆かとうの技術日誌

独自ドメインの設定

独自ドメインの設定は、サブドメイン、トップレベルドメインで手順が異なります。ここでは、トップレベルドメインの設定を書いていきます。

まず、ドメイン管理画面にて、DNS > Aレコード >192.30.252.153,192.30.252.154を割り当てます。

以下、コマンドからの確認です。

$ dig username.com +nostats +nocomments +nocmd
username.com.   73  IN  A 192.30.252.153
username.com.   73  IN  A 192.30.252.154

次に、Octopress側の設定です。

$ cd octopress

$ echo 'username.com' > source/CNAME

$ cat source/CNAME

$ rake gen_deploy

反映されるまでにしばらく時間がかかります。その間、アクセスしてもページは表示されませんので、注意してください。

もしお望みなら、以下のように標準のURLも独自ドメインに変更しておくといいかもしれません。ただし、この場合、ドメインが失効した時に、共有されたURLなどが使えなくなってしまう恐れが高いので注意です。

_config.yml

url: http://username.com

なおここで設定したURLは、HTMLの以下の記述などに使用されます。

{{ site.url }}

タグ	内容
{{ root_url }}	ルートディレクトリ(source/)
{{ site.url }}	サイトのURL
{{ page.url }}	ページのURL
{{ page.title }}	ページのタイトル
{{ site.subscribe_rss }}	サイトのRSS

404 Pageの作成

/path/to/octopress/source以下に404.mdまたは、404.htmlを置きます。

$ rake new_page\[404.md\]

source/404.md

 layout: page
  title: "404 Page Not Found"
  comments: false
  sharing: false
  footer: false
  published: true

Bootstrapメニューの設定

Bootstrapのメニューバーをマウスオーバーで開く

Bootstrapでは、モバイルに対応したメニューのため、ドロップダウンメニューがクリックで開くようになっています。それを、マウスオーバーで開くようにします。

Octopressでの通常の書き方は、Compassに倣います。

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

Bootstrapのモバイル表示の設定

私の場合は、source/assets/bootstrap/dist/css/bootstrap.min.cssに直接書き込みました。

source/assets/bootstrap/dist/css/bootstrap.min.css

@media (max-width:767px){.navbar-nav .open .dropdown-menu{display:none;position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}

上の設定を簡単に説明すると、@media { .navbar-nav .open .dropdown-menu }にdisplay:noneを設定します。

ちなみに、@mediaというのは、最大幅を条件にしたレイアウトの設定のこと。

Bootstrapの解説

ブログ内で現在地をホバーして教えてくれるのが特徴的なメニューバーですが、カスタマイズが割と面倒です。

自分のブログでは、以下の様な要素が混在しています。

//現在選択されているボックスのリンク文字
.navbar-default .navbar-nav > .active > a:hover {
color: #fff;

  //Web Font
  .icon-twitter:hover {
  color: #000;
  }
}

//選択されていないボックス内のリンク文字
.navbar-default .navbar-nav > li > a:hover {
color: #428bca;
.icon-twitter:hover{
color: #428bca;
}
}

//選択されているボックス内のリンク文字
.navbar-default .navbar-nav > .active > a {
color: #ccc
}

//選択されていないボックス内のリンク文字
.navbar-default .navbar-nav > a {
color: #999
}

//選択されているボックス
.navbar-nav > .active:hover {
opacity: 0.5;
}

//選択されていないボックス
.navbar-nav:hover {
opacity: 0.5;
}

//ドロップダウンメニュー
.dropdown-menu {
background-color: #fff;
}

//ドロップダウンメニュー内のリンク文字
.dropdown-menu>li>a {
background-color: #000;
}

//ドロップダウンメニュー内のリンクを選択時
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #ddd;
}

//ドロップダウンメニューの全体
li.dropdown.open {
background-color: #eee;
}

HTMLでは、hidden-xsというdisplay:noneの要素を用意し、 Web Font は、そこに入れています。

source/_includes/custom/navigation.html

<li>
    <a class="subscribe-rss" href="https://plus.google.com/+SyuiCom" target="_blank" title="subscribe via Google+" rel="publisher">
      <span class="visible-xs">Google+</span>
      <span class="hidden-xs"><span class="icon-googleplus"></span></span>
    </a>
</li>

visible-xsはその逆で、一定の幅がないと表示されます。

正直、エフェクトを加えれば加えるほど、モバイルの表示がダメになっていったので、それを直すのにかなり時間がかかりました。

モバイルへの表示に対応する

私の場合、特定のテーマを使用したデフォルト設定では、余白が開いていて、スマホでバウンドしてしまうので、以下の設定を付け加えました。

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;がおすすめらしいです。

サイドバーにコンテンツを追加する

サイドバーにコンテンツを追加するには、source/_includes/custom/asidesにファイルを置きます。

そして、_config.ymlのdefault_asidesに先ほど置いたファイルへのパスを記述します。

default_asides: [
    asides/recent_posts.html,
    custom/asides/category_list.html
]

全体にリンクを貼る

よくコンテンツを選択すると、フォントではなく、そのコンテンツ全体にリンクが貼られていることありますよね。それを実現する方法を紹介します。

source/index.html

<article class="post" onclick="location.href=&#34;{{ root_url }}{{ post.url }}&#34;;" style="cursor: pointer;">
  {% include article.html %}
</article>

source/sass/partials/_blog.sass

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;
}

Shadow Box

更に、枠をはっきりさせるために、Shadow Boxを使用しました。

shadow-boxジェネレーターが便利です。

article.post:hover {
  background-color: #DBDBFF;
opacity: 0.9;
         -webkit-transition: 0.3s ease-in-out;
         -moz-transition: 0.3s ease-in-out;
         -ms-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
            /* border-radius */
            border-radius:1px;
            -webkit-border-radius:1px;
            -moz-border-radius:1px;

            /* box-shadow */
            box-shadow:rgb(97, 165, 255) 0px 0px 3px 0px inset;
            -webkit-box-shadow:rgb(97, 165, 255) 0px 0px 3px 0px inset;
            -moz-box-shadow:rgb(97, 165, 255) 0px 0px 3px 0px inset;
}

ついでに、画像枠も光らせることにしました。

img:not(.no-border) {
      /* border-radius */
      border-radius:1px;
      -webkit-border-radius:1px;
      -moz-border-radius:1px;

      /* box-shadow */
      box-shadow:rgba(49, 127, 230, 0.54902) 0px 0px 7px 4px;
      -webkit-box-shadow:rgba(49, 127, 230, 0.54902) 0px 0px 7px 4px;
      -moz-box-shadow:rgba(49, 127, 230, 0.54902) 0px 0px 7px 4px;
    }

アイコンを作る

Web Fontを使う

きれいな画面で見た場合、画像の粗さが目立つ場面が多くなりました。よって、フォントによってアイコンなどを表現することにより、表示が綺麗になります。積極的に使っていきましょう。

Font-Awesome

$ echo "gem 'font-awesome-less'" >> Gemfile

$ bundle

$ gem install font-awesome-less

GitHubからのWeb Fontが出ています。

Octicons

$ cd ~/octopress/source/

$ curl -o ~/Downloads/octicons.zip -Lk https://github.com/github/octicons/archive/master.zip

$ aunpack ~/Downloads/octicons.zip

$ cp -r ~/Downloads/octicons-master/octicons .

$ vim _includes/head.html

あとは、</head>内に以下のタグを挿入します。

source/_includes/head.html

<link rel="stylesheet" href="/octicons/octicons.css">

<span class="octicon octicon-mark-github" style="font-size:30px;"></span>

外部から読み込む場合は、もっと簡単に使えます。

http://weloveiconfonts.com/

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

<!-- Group of Elements -->
<ul>
  <li class="zocial-twitter"></li>
  <li class="zocial-flickr"></li>
  <li class="zocial-lastfm"></li>
  <li class="zocial-reddit"></li>
</ul>

SVGからPNGに変換する

Font Awesomeのアイコンを.pngで生成するなら、font-awesome-to-pngが便利です。カラーなども指定できます。

ImageMagickを使うなら、以下のとおりです。Macでも同じようなことができます。

$ convert test.svg test.png

$ qlmanage -t -s 800 -o . test.svg

SVG ファイルを作成する

inkscapeが使えます。

パス –> ビットマップをトレース
ファイル –> ドキュメント設定 –> ページサイズを描画全体または選択…

Web Fontの作成

上で紹介したSVGを作成することには、Web Fontへの変換を容易にするという意味があります。

icomoon

$ cd ~/Downloads/icomoon

$ mv style.css ~/fonts/icomoon.css

$ cd ~/octopress/source/

$ cp -r ~/Downloads/icomoon/fonts .

$ vim _includes/head.html

あとは、</head>内に以下のタグを挿入します。

source/_includes/head.html

<link rel="stylesheet" href="/fonts/icomoon.css">

ファイルの置き場所によっては、パスの書き換えが必要です。

source/icomoon/icomoon.css

@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot?-cyd9l8');
  src:url('icomoon.eot?#iefix-cyd9l8') format('embedded-opentype'),
    url('icomoon.woff?-cyd9l8') format('woff'),
    url('icomoon.ttf?-cyd9l8') format('truetype'),
    url('icomoon.svg?-cyd9l8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

使い方は、簡単です。

<span class="icon-phoenix" style="font-size:30px;"></span>

はてなブックマークのアイコンを作る

日本のサービスは、Web Fontになっていないことが多く使えません。しかし、フォントだけでいける場合も多いようです。

span.icon-hatena {
  font-size:26px;
  font-weight: bold;
  font-family:'Verdana';
  color: #fff;
}

span.icon-hatena:hover {
  -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;
  color: #3366CC;
}

はてブAPIでwebサービスを作りたい全ての人に向けて書きました - Syncer

共有ボタン詰め合わせ

作ってみました。詳しくは下記の記事より。

octopress-share-button

現在では、以下の様な感じになっています。

source/_includes/post/sharing.html

{% if site.share_button_syui %}
<div class="share_button_syui">
  <a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ site.url }}{{ page.url }}&title={{ page.title }}" target="_blank"><span class="hatena-name">{% if site.share_button_hatena %}<span class="icon-hatena"
style="float: left;
font-size: 20px;
padding-left: 5px;"
>B!</span>{% endif %} Bookmark</span></a>
  <a href="https://twitter.com/share?url={{ site.url }}{{ page.url }}&text={{ page.title }}&via=psp_t" target="_blank"><span class="twitter-name">{% if site.share_button_twitter %}<span class="icon-twitter"
style="float: left;
font-size: 20px;
padding-left: 5px;
color: #fff;"
></span>{% endif %} Tweet</span></a>
  <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" target="_blank"><span class="googleplus-name">{% if site.share_button_gplus %}<span class="icon-googleplus"
style="float: left;
font-size: 20px;
padding-left: 5px;
color: #fff;"
></span>{% endif %} +1</span></a>
  <a href="http://www.feedly.com/home#subscription/feed/{{ site.url }}{{ site.subscribe_rss }}" target="_blank"><span class="feedly-name">{% if site.share_button_rss %}<span class="icon-feed"
style="float: left;
font-size: 20px;
padding-left: 5px;
color: #fff;"
></span>{% endif %} Feedly</span></a>
</div>
{% endif %}

Octopressにカテゴリとタグを分けて表示する

Octopress には、最初から Tag Clound というプラグインが入っていますが、その実態は、 Category Cloud なので、変更します。

以下の記事通りやればOKです。

octopressにタグクラウドを追加する - the Code is in the Details

Animesion

グラデーションがせり上がってくるタイプのアニメーションを作成してみました。

.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%); } }

Qiita Widget

Qiita Widget ジェネレーターが公開されています。

nodeや必要なものをインストールします。

$ curl -L git.io/nodebrew | perl - setup

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

$ nodebrew install-binary v0.11.13

$ brew install npm

$ npm -g install recess

$ npm -g install coffee-script

$ npm -g install uglify-js

使い方は、Source/style.less, script.coffeeを変更し、コンパイル、ブラウザでの表示確認という感じです。

$ git clone https://github.com/tq-jappy/qiita-widget

$ cd !$:t

$ ./compile.php > script.js

$ open example.html

最終的には以下のようになりました。アイテム数は、10に設定しています。同ファイルの/items?per_page=10の部分を変更します。

source/javascript/qiita.js

template = "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"utf-8\" />\n<style type=\"text/css\">\nbody{padding:0;margin:0;font-family:'Trebuchet MS','Arial','Helvetica','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;background:#fff;border:0px solid #ddd}.bar{height:30px;overflow:hidden;line-height:30px;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;background:-webkit-linear-gradient(top,#313a29,#21291a);background:-moz-linear-gradient(top,#313a29,#21291a);background:-ms-linear-gradient(top,#313a29,#21291a);background:-o-linear-gradient(top,#313a29,#21291a);background:linear-gradient(top,#313a29,#21291a);border-bottom:3px solid #59bb0c}.logo{display:block;float:left;width:65px;height:30px;padding:0 10px;margin:0 15px;background:#59bb0c url(/images/qiita_logo.png) center center no-repeat}a.user{font-size:14px;color:#fff;text-decoration:none}a.user:hover{text-decoration:underline}.avatar{width:14px;height:14px;margin-right:3px}.title{color:#117ec6;text-decoration:none;word-wrap:break-word}.title:hover{text-decoration:underline}.tag{display:inline-block;height:14px;padding:0 3px;margin:0 2px;font-size:10px;line-height:14px;color:#fff;text-decoration:none;vertical-align:middle;background-color:#428bca;border-radius:3px}.tag:hover{text-decoration:underline}div#items{padding-bottom: 33px;} div#items.items { background: url(/images/qiita_logo.png) 1px #fff no-repeat; background-position: 50% 99%; } .item{padding:10px 15px;font-size:14px;line-height:18px;border-bottom:1px solid #ddd}\n</style>\n</head>\n<body>\n<div class=\"items\" id=\"items\"></div>\n</body>\n</html>";

ファイルは所定の場所に置きましょう。

$ mv Source/logo.png Source/qiita_logo.png

$ cp !$ ~/octopress/source/images

$ mv script.js qiita.js

$ cp !$ ~/octopress/source/javascript

あとは、設定ファイル及び、HTMlを書きます。

_config.yml

default_asides: [custom/asides/qiita.html]

source/_includes/custom/asides/qiita.html

<section class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Qiita</div>
  </div>
  <a class="qiita-timeline" href="https://qiita.com/users/syui" data-qiita-username="syui">syui</a><script src="{{ root_url }}/javascripts/qiita.js"></script>
</section>

はてなブログパーツのカスタマイズ

画像が使われている部分、綺麗でないので、フォントにしました。

.hatena-bookmark-widget {
  padding: 10px !important;
  border:  solid 1px #ddd !important;
  width: 100% !important;
  margin-bottom: 20px;
}

.hatena-bookmark-widget ul li {
  border-bottom:  solid 1px #ddd !important;
}

.hatena-bookmark-widget ul li > a{
  color: #428bca !important;
}

.hatena-bookmark-widget-body ul {
  border: none !important;
  background-color: transparent !important;
  padding: 10px 10px 0px 10px;
}

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

.hatena-bookmark-widget-footer {
  //display:none;
  background: none !important;
  border: none !important;
}

.hatena-bookmark-widget-footer a span {
  content: "Hatena::Bookmark" !important;
  font-family:'Verdana';
  font-weight:100;
  background: none !important;
  text-indent: 0em !important;
  text-decoration: none !important;
}

.hatena-bookmark-widget-footer a{
  background: none !important;
  border: none !important;
}

.hatena-bookmark-widget a:visited {
  color: #428bca !important;
}

.hatena-bookmark-widget a {
  color: #428bca !important;
}

source/_includes/custom/asides/hatena.html

<section>
<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "";
Hatena.BookmarkWidget.sort  = "count";
//Hatena.BookmarkWidget.width = 280;
Hatena.BookmarkWidget.num   = 10;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();

</script>
</section>

_config.yml

default_asides: [custom/asides/hatena.html]

その他

その他のカスタマイズについては、以下のページにまとめました。