画像

メニューやタイトルを動的に作成

ブログやCMSは、動的にコンテンツを生成します。

その関係で、表示されるメニューやタイトルは動的に作成されます。その関係で、文字においても画像によるインパクトが出せず、なんとも煮え切らないページになっているということはないでしょうか。

Signwiterモジュールを利用することで、装飾の自由度が格段にあがります。

例えば、本サイトのタイトル(このページでは「メニューやタイトルを画像にする-Signwriter」)もSignwriterモジュールを利用して表示しています。

いかがでしょうか？ブラウザに依存する文字には得られないデザイン感が出ていませんか？

Signwriterは以下の手順で有効にします。

1. 管理セクション≫モジュールで「Singnwriter」を有効にします。
2. ユーザの管理≫権限でsignwriter モジュール以下、
   ・administer signwrite
   ・ruse PHP for signwriter pages
   を有効にします。
3. 管理セクション≫サイトの環境設定≫Signwriterで、最低限の設定を行います。
   
   薄赤の部分は上記と同様に設定してください。
4. 次にAdd a profileをクリックして画像変換用のプロファイルを作成します。
   
   薄赤の部分にプロファイル名を入力します。いくつかプロファイルを作成する場合は違いの分かる名前にします。
5. 全般の設定は以下のようにします。
   
6. テキスト部分の設定を 通常時、Hover時、アクティブ時各々行います。
   
7. Drop Shadow、Background、Borderに関しても同様に設定します。
8. Image Layout、Image Typeを設定します。
   
   上記はこのサイトのページタイトル用の設定例です。慣れてきたら変えてみると違いが分かってきます。
9. [保存]すると、Signwriterのメイン設定ページに戻ります。
10. 上記で設定したプロファイルが Profile一覧に表示されます。
    
11. Template Hooksで作成したプロファイルをPage titles:で使用するように選択します。
    
    必要に応じて、プロファイルを作成し、各々割り当てます。
12. メニューに対してSignwriterを適用する場合は、上記同様にプロファイルを作成し、各々のメニューに割り当てます。
    
13. 最後に[設定の保存]を行います。

いかがでしょうか。あまり使いすぎると、うるさいですが、Signwriterはリアルタイムの画像処理はサーバ側で行うためクライアントに負担をかけません。

生成されるタグにもキャラクタ文字列は残っており、SEO的にも問題がありません。