【WordPress】「前の記事」「次の記事」のリンクにサムネイルを付ける

【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】
http://www.imamura.biz/blog/cms/wordpress/tips/12351

ほとんど、上記参考記事のまんまです。このサイトでは Something Fishy というテーマを使っておりますので、これに併せてカスタマイズしました。

media query を使って、ブラウザの幅が狭い場合は縦に並べています。

Syntaxhighlighter にも Solarized を！（あと Gist も）

Solarized とは各種ターミナルやエディタに使える目に優しいカラースキームです。なかでも vim 用のものは .vimrc を解析してみたサイトで圧倒的人気で 1 位を獲得するなど、利用者が多いことで知られています。

このカラースキームの設定方法は以前記事にもまとめました。

最強カラースキームと言えば Solarized だよね！ | blog.delphinus.dev
https://blog.delphinus.dev/2012/10/let-us-use-solarized.html

今回はこれを Syntaxhighlighter や Gist で実現してみました。スタイルシート書いただけですけどね。

前回導入した TypeSquare による Web フォントのサンプルページを作ってみました。このページだけは全ての OS・ブラウザで Web フォントが有効になっているはずです。

前回の記事で Google Web Fonts を使う方法を書きました。しかし、ここには日本語の文字が使えるフォントがありません。これは外国のサービスであることも原因の一つですが、日本語特有の問題も災いしています。

それは日本語で使われる文字の種類が大変多いことです。欧米の各種言語ではどんなに多くても数百文字ですむところ、日本語で使われる文字はひらがな、カタカナ、漢字、各種の記号、併せて数万にも及びます。中には一生使わないような文字も含まれていますが、フォントとして用意するならば全文字必要です。

無理をしてでも日本語文字の Web フォントを使うならば 2 つの方法があります。

1 番は専門知識が必要ですし、そもそも必要な文字を数えることが難しいです。タイトルロゴなど、限られた部分に適用するのならばアリかもしません。

今回は 2 番を試してみました。ただし、困難なことをやってくれるわけですから、完全無料のサービスというのはありません。現在運営されているサービスの一覧はここが詳しかったです。

国内のWebフォントサービスまとめ【2012年6月版】 – フォントブログ
http://blog.petitboys.com/archives/webfont-services-japan.html

数ある中でも、TypeSquare は年内完全無料という太っ腹なキャンペーンを行っています。しかもあの有名なモリサワフォントが使い放題というのですから、利用しない手はありません。

ここは Vim やらキーボードのネタが多いので <kbd> タグを多用するわけですが、ググったら丁度いいのがありました。

[CSS]キーボードのキートップのデザインを適用するスタイルシート -KEYS.css | コリス
http://coliss.com/articles/build-websites/operation/css/css-styling-key-top.html

CSS を一つ読み込みだけで <kbd> がぐっとかっこよくなります。

<kbd>あ</kbd>
<div class="light key">Option</div>

ただそのままだと、文中に置いた場合にちょっとだけずれてしまうので、調整しました。

kbd, .key {
    position: relative;
    top: -0.1em;
}