WEBフォントを遅延ロードするようにしました¶
WEBフォントが読み込まれるまで文字が表示されない問題を解決する為に、 Web Font Loader を使ってWEBフォントを遅延ロードするようにしました。
_templates/layout.html
<script type="text/javascript">
WebFontConfig = {
custom: {
families: ['mplus-2c-regular', 'mplus-2m-regular', 'mplus-2c-light'],
urls: ['http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css']
},
timeout: 10000
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
_static/style.css
.wf-mplus2cregular-n4-active h1 {
font-family: mplus-2c-regular, sans-serif;
}
.wf-mplus2mregular-n4-active pre {
font-family: mplus-2m-regular, sans-serif;
}
.wf-mplus2clight-n4-active body {
font-family: mplus-2c-light, sans-serif;
}
ついでにレスポンシブUIに対応しました。テーマをmodern5に変更して微調整しただけなんだけど。もうちょっと「キャラバン」っぽいデザインや配色にしたいけどそれは追々やって行こう。
ソーシャルボタンを設置した¶
Facebook・Twitter・はてブ・はてなスターのあたり。
変更内容¶
_templates/page.html
{% block body %}
<div class="body">
{{ timestamp(metadata.formatted_date) }}
{% block buttons %}
<div class="social-buttons">
{# Twitter #}
<div class="social-button button-twitter">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
{# Facebook Like #}
<div class="social-button button-facebook">
<div class="fb-like" data-href="http://kiris.github.io/blog/{{ pagename }}{{ file_suffix }}" data-send="false" data-layout="button_count" data-width="200" data-show-faces="true"></div>
</div>
{# Hatena Bookmark #}
<div class="social-button button-hatena-bookmark">
<a href="http://b.hatena.ne.jp/entry/http://kiris.github.io/blog/{{ pagename }}{{ file_suffix }}" class="hatena-bookmark-button" data-hatena-bookmark-title="{{ title }} - {{ project }}" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
{# Hatena Star #}
<div class="social-button button-hatena-star">
<span class="hatenastar"> </span>
</div>
</div>
<div class="clearfix" ></div>
{% endblock %}
{{ body }}
{{ post_meta(metadata) }}
{{ comments }}
</div>
{% endblock %}
_templates/layout.html
{% block extrahead %}
{# for Hatena Bookmark #}
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
{# for Hatena Star #}
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '7e91f42d4154f12a8d87065ee97b8d9e5d7c5bc9';
Hatena.Star.SiteConfig = {
entryNodes: {
'div.body': {
uri: '.headerlink',
title: 'h1',
container: '.hatenastar'
}
}
};
</script>
{# for Facebook Like #}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=691667727558731";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endblock %}
はてなスター用のパーマリンクは、Tinkerer(Sphinx)の仕組みで作って貰うことに。
conf.py
html_add_permalinks = True
最後に、ボタンがずれてていたのでスタイルを追加。
_static/.style.css
/* social-buttons */
.social-buttons {
margin: 10px 0px 0px 0px;
padding: 0px;
}
.social-buttons .social-button {
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
display: inline;
}
.social-buttons .button-facebook,
.social-buttons .button-hatena-star {
margin-top: -2px;
}
iframe.twitter-share-button {
width: 88px! important;
}
.headerlink {
display: none;
}
Webフォント(M+)を使うようにした¶
デザインはともかく、フォントが汚ないのは我慢ならない。 M+ FONTS がWEBフォントを用意しているので、これを使ってみる。
_templates/page.html
{% extends "!page.html" %}
{% set css_files = css_files + ["http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css", "_static/style.css"] %}
_static/style.css
body {
font-family: mplus-2c-light, sans-serif;
}
h1 {
font-family: mplus-2c-reguler, sans-serif;
}
pre {
font-family: mplus-2m-regular, sans-serif;
}
Tinkererで新しいブログを初めました¶
体制等を気にしている内に書かなくなることが今までの常だったので、細かいことを気にせず、継続して書き続けることが目標。
デザインとかも、公開してから考えるよ。