2011年

ホントはがっつりデザインを変えたい気分なんですがそんな暇もないのでちょっとだけ弄ってみる。

デザインセンスは自身がないので基本はマネするかしかないのだけどちょっとつづ変えて自分の味を出していきたいと思って入る。でも広告入れたりなんだかんだとどんどん波状していくのが毎度だ。トータルで拡張できている人のサイトを見るとほんと惚れる。

さて、今回はブログの記事などを好きなフォントを使って画像にしてみる。

昔ながらのやり方であれば文字を画像化して表示させる方法、もうひとつはWebfontを使う方法。デザインとか考えると画像にするのがいいのだろうけどWebfontの場合にはCSSだけの設定なので楽。但しWebfontは対応していないブラウザの場合には何も反映されないので注意が必要。

1. 画像としてフォントを変更する

WordPress Plugins/JSeries ≫ wp-tegaki 投稿エントリ内のタグで指定した文字列を指定の TrueType フォントで出力する WordPress 用プラグインです。

このプラグインは記事の中の文章中のフォントを簡単に変えることができます。「Tegaki」を試してみました。

使い方

エントリに

[tegaki]文字列[/tegaki]

という形式でエントリ内に記述を行えば、上記デフォルト設定で文字が TyreType 出力されます。

また、タグ拡張によりデフォルト値を上書きできます。 HTML の属性と同じように[テガキ 属性1=”値” 属性2=”値”…] 形式で書きます。 使える属性は、

font=”フォントファイル名”
TyreType フォントの指定

size=”大きさ”
文字の大きさ

color=”#文字色”
文字色の指定

bgcolor=”#背景色”
背景色の指定

[tegaki]こんな感じになります[/tegaki]

但しこの場合、エントリ内部のフォントしか変更できないので残念ですよね。個人的にはタイトルこそ変更したかったのですが。

The TTFTitles WordPress Plugin @ WordPress Plugins This is primarily a reworking of the Image Headlines plugin by Brian “ColdForged” Dupuis, so that it would work in WordPress 2.3. Of course, THAT was a reworking of another plugin by Joel Bennett. Anyway, this plugin lets you replace text on your site (titles specifically, but you can actually replace just about anything) with atttractively rendered TrueType Fonts images.

次に、このプラグインではタイトルを変更することが出来ないのでこちらのTTFTitleを用いてタイトルを変更することが出来ます。このプラグインはタイトルの表示用の関数を the_ttftitle() に変更するためプラグインに問題があったりすると困るのですが自由にフォントが変更できるのはイイですね。

実際には、テーマの編集で対象となる項目を変更することが必要です。少なくとも、「single.php」と「index.php」の the_title() の箇所を the_ttftitle() に修正することが必要です。

利用方法

<?php the_ttftitle(before, after, display, style, overrides); ?>
<?php the_ttftext(text, style, overrides); ?>

2. WebFontを使用して簡単にフォントを変更する

まず、利用可能なフォントを探す必要があります。

WebFonts として利用できるフリーの和文フォント | ヨモツネット WebFonts はとても便利で今まで似なかった表現ができる仕組みですがフォントファイル使用時のライセンスは難しく、本当に使えるのかがわかりづらいです。そこで一つずつライセンスを読み、WebFonts として利用できるフォントをまとめてみました。この記事内でもライセンス条文の抜粋を引用していますが、全文ではないのでフォントの利用時にご自身で再度ご確認ください。もし私の解釈に間違いがあったら指摘していただければ幸いです。

使えるフォントを探しましょう。 今回は「あんずもじ」を利用させてもらっています。

CSSでの指定は非常に簡単です。

[ccn_css]

@font-face {
font-family: ‘anzufont’;
src: url(‘http://roguer.info/wp-content/plugins/ttftitles/fonts/APJapanesefont.ttf’) format(truetype);
} [/ccn_css]

これで指定ができます。

• CSS3の@font-faceでWebfontを利用する。 – ぬぺら！http://blog.livedoor.jp/nodokapcx/archives/51403133.html

にも書かれてるので参考になります。実際に指定は定義した font-family 名を指定すると利用することが出来るので非常に便利です。

• デコもじ｜ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
  http://decomoji.jp/

Webfontは指定が楽なので便利ですがその分フォント情報をサーバからダウンロードするため若干重くなる傾向があります。特に日本語フォントの場合にはサイズも大きくなりますので。

3. 使ってみる

さて、実際に「あんずもじ」を利用して定義してみました。タイトルは画像でその下の「コメントが有りません」などの部分はWebfontを利用しています。

最後に紹介したWebfontが一番の本命かと思う。
うまく利用すれば結構いい感じにサイトのデザインを調整することが出来そうだ。ただしライセンス等もあるのでやはり今までどおり画像で表示することもあると思う。いまさら感があるのだがようやく文字のために画像を画像編集ソフトで作らなくてもよさそうだ。

Update1：現在の時点で変更があり使用していない可能性も有ります。