Home » DrupalカストマイズTips

pict-drupal.png DrupalのSignwriterモジュールはWordpressで言うところのwp-tegakiやttftitlesプラグインのようにテキストをTrueTypeを使ったイメージに置き換えて見栄えを良くする機能を提供してくれるモジュールです。

こんな文字が簡単に作れますこんな文字が簡単に作れます

当サイトでは日本語ページの各記事のタイトルにも使用しています。

使用できるフォントはTrueTypeフォントのみ。OTF(OpenType)フォントなどはTrueTypeに変換してやる必要があります。FontForgeというソフトを使うとこの変換を簡単におこなうことができます。FontForgeはWindows、Mac、Linuxなどマルチプラットフォームに移植されています。

前準備

さて、使いたいTrueTypeフォントを用意したら、まずそのフォントを設置します。設置場所はあなたのDrupalサイトのfilesディレクトリや使用しているテーマのディレクトリにすればSignwriterは自動的にフォントを検出してくれます。それ以外のディレクトリに置く場合には、Signwriterの環境設定ページでそのディレクトリパスを指定してやる必要があります。

使い方１・固定部に使用する

まず、当サイトの各記事(ノード)のタイトルのように同じ部分を常に同じ設定で使用する場合には、以下のようにします。

1. プロファイルを作成する。ここでは「node_title」というプロファイルを作成しました。好きなフォント、サイズ、色を指定します。

2. ノード用のテンプレート(node.tpl.php)でタイトルを出力する部分を以下のようにします。
  1. if(function_exists(signwriter_load_profile)) {
  2.   $profile = signwriter_load_profile('node_title');
  3.   if(isset($profile->id)) {
  4.     print signwriter_title_convert($title, $profile);
  5.   }
  6.   else print $title; // 指定プロファイルが存在しない場合
  7. }
  8. else {
  9.   print $title; // signwriterモジュールが有効になっていない場合
  10. }

使い方2・記事の中で一部のテキストに使用する

この場合には、上記のようにテンプレートで対応することはできませんので、使いたい部分のテキストを疑似HTMLタグでくくり、その部分をフィルター機能を使って動的にイメージに変換させます。

1. プロファイルを作成します。ここで大切なのは設定の一番最後にあるInput Filter Patternを指定することです。これは正規表現で記述する置き換えのパターンになります。この例では以下のように設定しこのプロファイルの名前を「funny」としました。
  1. /<funny>.*?<\/funny>/

2. 管理メニュ > 入力書式(Input Format)ページの各書式に適応するフィルターの中にfunnyというフィルターが追加されるので、これを有効にします。(これは1度きりの設定です）

3. 記事中のフォントを置き換えたい部分のテキストを疑似HTMLタグ<signwriter funny></signwriter>でくくります。
  1. <funny>ここがfunnyな文字になります</funny>
これが実際にはこのようになります。

ここがfunnyな文字になりますここがfunnyな文字になります


使い方3・記事の中で（プロファイルの設定と違う設定で）一部のテキストに使用する

この場合には、PHPコードを使って記述する必要があります。
  1. $profile = signwriter_load_profile('funny');
  2. $profile->fontsize = 24;
  3. $profile->foreground = 'ff8888';
  4. print signwriter_title_convert('これはどうかな？', $profile);
この例のように、初めにsignwriter_load_profile()関数をコールしてベースとなるプロファイルを取得し、この中で変更したい部分を変えた後でsignwriter_title_convertをコールします。くわしくは、signwriterモジュールに含まれるREADME.txtに書かれていますのでこちらを参照しましょう。

 

No votes yet