記事のタイトルを手書き風のフォントにしてみました。
自分で用意したTrueTypeフォントを使って、記事のタイトルを画像化します。
少し前にPHPで似たようなプログラムを書いた事があり、自前ででプラグイン化してしまおうかと思いましたが、
すでに出来の良いものがあったので導入してみました。
Templature ≫ The TTFTitles WordPress Plugin
このTTFTitlesの特徴はキャッシュ機能と優れた管理機能です。
キャッシュ機能は一度描画した画像をファイルに保存しておき、2度目からはそれを読み出す事で高速に表示できます。
管理画面ではフォントの登録・削除から描画スタイルのプリセットの編集、キャッシュのクリアなどが行え、直接ソースやファイルを操作する必要がありません。
導入方法は通常のプラグインと同じでプラグインディレクトリに放り込んで有効化するだけです。
使用方法はテーマファイルにあるthe_title()
をthe_ttftitle()
に置き換えるだけです。
例えば次のような場合は、
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
以下のように変更します。
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_ttftitle(); ?></a>
the_ttftitle()
はimg要素に置き換わるので、title属性に指定してあるthe_title()
は変更しません。
また引数は以下のようになっており、$style
でスタイルのプリセットが選択でき、$overrides
で細かい設定ができるようになっています。
the_ttftitle ($before = "", $after = "", $echo = true, $style = "", $overrides = "")
また、タイトル以外のテンプレートテキストも画像表示する関数が用意されています。
the_ttftext ($text, $echo = true, $style = "", $overrides = "";)
使い方は見たまんまでわかると思うのでオミット。
設定の仕方ですが、たいていのプラグインは『設定』メニューに項目が追加されるのですが、このTTFTitlesは『テーマ』メニューに追加されるようになっています。
『Styles』のサブメニューでスタイルのプリセット編集ができます。
各項目は以下のような意味となっています。
引数名 | 意味 | 設定値例 |
---|---|---|
image_type | 画像のタイプ | png または gif |
font_name | フォント名 | Warp 1 |
font_size | フォントサイズ | 24 |
font_color | 文字色 | #FF0000 |
letter_case | 大文字・小文字変換 | unchanged / upper / lower / capital |
bg_color | 背景色 | #FFFFFF |
bg_transparent | 背景色の透明化の有無 | true |
bg_image | 背景画像 | 空またはファイル名 |
indent | 最初の行のインデント幅 | 5 |
maxwidth | 行の最大幅(0で無制限) | 500 |
subindent | 折り返された行のインデント幅 | 20 |
leading | 行間 | 10 |
effect_type | 影(シャドウ)のタイプ | none / hard_shadow / soft_shadow |
soft_shadow_color | ソフトシャドウの色 | #000000 |
soft_shadow_spread | ソフトシャドウの拡散量 | 5 |
soft_shadow_x_offset | ソフトシャドウのx軸オフセット | 3 |
soft_shadow_y_offset | ソフトシャドウのy軸オフセット | 3 |
hard_shadow_color_1 | ハードシャドウの内側色 | #FFFFFF |
hard_shadow_color_2 | ハードシャドウの外側色 | #000000 |
hard_shadow_offset | ハードシャドウのオフセット | 2 |
先の関数のパラメータである$overrides
にこれらを指定して指定されたスタイルの設定をオーバーライドすることもできます。
書き方は"font_size=12&maxwidth=400"
のように&
で連結して複数指定できます。
なお、シャドウの描画を有効にすると大幅に描画時間が増えます。キャッシュが効くので2回目以降は気になりませんが、初めて設定したあとに大量に描画する必要があると結構時間掛かったりするかもしれません…
ちなみに自分は手書き風にする為に『うずらフォント』を使っています。結構オススメ。
あと、行の幅を超えそうな長さの文字列の場合は途中でスペースを入れると改行してくれます。
では。
コメント
アナログさん初めまして!
書き込みありがとうございます。
記事が参考になってよかったです!
放送開始時は高校生でしたか、うちの兄とほぼ同世代ですw
私は小学生の頃に再放送で初めて見ました。
その頃はまだ内容を理解しきれなかったので最近の再放送でようやく完全に把握した感じです。
先日コンプリートアルバムを買って分かったのですが、「私の彼はパイロット」って意外と短い曲だったんですね。
今度はマクロスFのアルバム第3弾が出るので楽しみです!
初めまして。検索エンジンから来ました。
おかげさまで、個別記事のタイトルを手書き風にできました^^
説明文、とてもわかりやすかったです。
マクロスが放送開始時は高校1年生、リアルで見てました。
リンミンメイの
きゅ~ん きゅ~ん きゅ~ん きゅ~ん
私の彼は パイロット ~♪
は、今でもアカペラで歌えるおばさんです。