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

130715-0001

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

130715-0002

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

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

Continue reading

Syntaxhighlighter にも Solarized を!(あと Gist も)

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

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

最強カラースキームと言えば Solarized だよね! | blog.remora.cx
http://blog.remora.cx/2012/10/let-us-use-solarized.html

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

Continue reading

TypeSquare でモリサワフォントを使う

120805-0004-thumb-240x220-695.png

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

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

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

  1. 必要な文字だけを集めたフォントを作る。
  2. フォント事業者の Web サービスを使う。

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

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

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

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

Continue reading

CSS でキーボードのキーのような装飾を

120725-0008.png

ここは 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>
実行結果

Option

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

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