[WordPress] プラグインで記事のタイトルを 手書き風にしてみた

  • このエントリーをはてなブックマークに追加

記事のタイトルを手書き風のフォントにしてみました。

自分で用意したTrueTypeフォントを使って、記事のタイトルを画像化します。
少し前にPHPで似たようなプログラムを書いた事があり、自前ででプラグイン化してしまおうかと思いましたが、
すでに出来の良いものがあったので導入してみました。

Templature ≫ The TTFTitles WordPress Plugin

このTTFTitlesの特徴はキャッシュ機能と優れた管理機能です。
キャッシュ機能は一度描画した画像をファイルに保存しておき、2度目からはそれを読み出す事で高速に表示できます。
管理画面ではフォントの登録・削除から描画スタイルのプリセットの編集、キャッシュのクリアなどが行え、直接ソースやファイルを操作する必要がありません。

導入方法は通常のプラグインと同じでプラグインディレクトリに放り込んで有効化するだけです。

使用方法はテーマファイルにあるthe_title()the_ttftitle()に置き換えるだけです。
例えば次のような場合は、

[php]
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<php the_permalink(); ?>"><?php the_title(); ?></a>
[/php]

以下のように変更します。

[php]
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_ttftitle(); ?></a>
[/php]

the_ttftitle()はimg要素に置き換わるので、title属性に指定してあるthe_title()は変更しません。
また引数は以下のようになっており、$styleでスタイルのプリセットが選択でき、$overridesで細かい設定ができるようになっています。

[php]
the_ttftitle ($before = "", $after = "", $echo = true, $style = "", $overrides = "")
[/php]

また、タイトル以外のテンプレートテキストも画像表示する関数が用意されています。

[php]
the_ttftext ($text, $echo = true, $style="", $overrides="")
[/php]

使い方は見たまんまでわかると思うのでオミット。

設定の仕方ですが、たいていのプラグインは『設定』メニューに項目が追加されるのですが、この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回目以降は気になりませんが、初めて設定したあとに大量に描画する必要があると結構時間掛かったりするかもしれません…

ちなみに自分は手書き風にする為に『うずらフォント』を使っています。結構オススメ。

あずきフォント

あと、行の幅を超えそうな長さの文字列の場合は途中でスペースを入れると改行してくれます。

では。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメント

  1. アナログさん初めまして!
    書き込みありがとうございます。
    記事が参考になってよかったです!

    放送開始時は高校生でしたか、うちの兄とほぼ同世代ですw
    私は小学生の頃に再放送で初めて見ました。
    その頃はまだ内容を理解しきれなかったので最近の再放送でようやく完全に把握した感じです。

    先日コンプリートアルバムを買って分かったのですが、「私の彼はパイロット」って意外と短い曲だったんですね。
    今度はマクロスFのアルバム第3弾が出るので楽しみです!

  2. アナログ より:

    初めまして。検索エンジンから来ました。
    おかげさまで、個別記事のタイトルを手書き風にできました^^
    説明文、とてもわかりやすかったです。

    マクロスが放送開始時は高校1年生、リアルで見てました。
    リンミンメイの

    きゅ~ん きゅ~ん きゅ~ん きゅ~ん
    私の彼は パイロット ~♪

    は、今でもアカペラで歌えるおばさんです。

コメントを残す