見栄え見栄え

メニューやタイトルを画像にする-Signwriter

ブログや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的にも問題がありません。

有料フォントを購入し、サーバーにアップすることで表現力が格段に広がります。

コンテンツにビューを挿入する

ホームページの更新をスムーズに、しかも快適に行うには 入力に気持ちの良い環境が必要です。

ただ単に文字を入力しているだけでは表現力も劣り入力作業が覇気がないものになってしまいます。

insert_viewモジュールを利用することでコンテンツの表現力やユーザビリティを向上させることができます。

ユーザ・プロフィール情報への画像の仕込み方

ここのところ、ユーザ・プロファイルの中に仕込む画像のことで はまりまくってました。

ことの発端は、Drupal標準のユーザ・プロフィール情報が、通常のノードのような応用性が薄く、フォーム入力なり、アバターなり、Drupal標準機能にも関わらず拡張性が低い事でした。

アバターの問題アバターの問題

ユーザ要望による、投稿画像→サムネイル、中間サイズ画像、現画像というような使い方が標準のユーザ・プロフィール情報ではできないようです。

一覧ブロック、一覧ページではサムネイルを表示し、詳細ページでは中間サイズ画像、中間サイズ画像をクリックするとThickboxによるズームアップ表示。というごくありきたりな要望なのですが、事、ユーザ・プロフィール情報においては そんなありきたりなことが すんなりゆかない。ということがわかりました。

通常、

  • 上記機能はフィールドを拡張するCCK、Image_field
  • 臨機応変に画像サイズを変換キャッシュするImage_cache拡張モジュール
  • DBから表示するフィールドを自由に選択できるViews

などを組み合わせる事で、投稿から一覧ブロック、一覧ページ、詳細ページ表示まで すんなり完了するのですが、ユーザ・プロフィール情報の場合、上記 拡張モジュールの力が及びません。

Content_profile拡張モジュールContent_profile拡張モジュール

そこで登場するのが、Content_profile拡張モジュールです。

Content_profile拡張モジュールは拡張性のない標準のユーザ・プロファイルに変わって、通常のコンテンツとして扱えるプロファイル情報、といった扱いです。(?わかりにくい)

つまり、標準のプロフィール情報にはない

  • 通常のコンテンツの利点(=様々な拡張モジュールの恩恵を受ける)
  • プロフィール情報としての扱い(=ユーザに紐付く)

の両方の利点を結びつけるモジュールがContent_profileです。

しかし、

実際はContent_profileでも不自由な点が存在した実際はContent_profileでも不自由な点が存在した

Content_profileをインストールし、快適に投稿フォーム、表示ブロック、ページを作成。

といきたかったのですが、やはり問題がありました。

Image_cache拡張モジュールが機能しないImage_cache拡張モジュールが機能しない

Content_profile情報の中の画像フィールドにはImage_cache拡張モジュールが機能しないということが わかりました。

確かに、Content_profile情報をコンテンツとして表示する場合はImage_cache拡張モジュールは機能するのですが、ユーザ・プロファイル情報として表示する場合は、機能しませんでした。

これは問題なので、早々 調べ始めたものの、Content_profileモジュールはまだβ版。使う方がいけないような気もしますが、もっと深く調べるか、次バージョンに期待するか、考え中です。

GoogleMap関連のサポートが基本構成にも拡張構成にもないようですが、なぜですか?

以下の3つの理由からGoogleMapは非採用としています。

GoogleMapサポート対象にOperaが 入っていませんGoogleMapサポート対象にOperaが 入っていません

弊社のサービスでの動作保障ブラウザは

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox 3 以降
  • Opera 9 以降
  • Safari 3.2 以降

となっています。

上記以前のバージョンでも 問題ない場合が多いですが、拡張モジュール導入やカスタマイズ時の基準となっています。

ところが、GoolgeMap側では Opera が サポート外になっています。

http://maps.google.com/support/bin/answer.py?hl=jp&answer=16532

それでも、Opera 8あたりまでは、込み入った機能を使わなければ大丈夫でしたが、Opera 9になってからは GoogleMapによってページ全体のレイアウトが崩れたり、GoogleMap自身がうまく表示されなかったりという問題が発生しています。

携帯ブラウザへの配慮携帯ブラウザへの配慮

弊社は GoogleMapではなく Google Static Map APIに対応しています。

会社案内のための簡易地図

Google Static Map APIの処理は全てサーバー側の制御になるため、GoogleMapのようにクライアント側の動的機能(この場合JavaScript)を要求しません。

弊社の携帯対応により、携帯ブラウザ向けの表示時には サーバー側で大きな画像は携帯向けに小さな画像に変換して出力します。

携帯対応

マップというものマップというもの

マップは訪問者が見て解りやすくないといけません。

GoogleMapやGoogle Static MAPも正しいという意味で確かに解りやすいのですが、人の目で解りやすいかどうかは別物です。

むしろ、イラストや、抽象的な表現の方が受け入れやすい場合もあります。

弊社は Google Static MAP APIに対応していますが、アクセスマップなどは人の目でわかりやすいものをお勧めしています。

Drupal-CMSで使用できるテンプレートにはどんなものが ありますか?

【自分で更新するホームページの制作・サポート】サービスの対象テンプレートは以下の通りとなります。

 

上記中の選択なら、Drupal-CMS用テンプレートになっていますので、その後は無料でDrupal-CMSに組み込みます。

基本的に そのままで使用可能な状態ですが、中には横文字(英語)にあわせたデザインが問題になる場合やSEOに あまり強くないテンプレートもありますので 弊社がインストール時に無料で対策いたします。

テンプレートモンスターテンプレート

ホームページテンプレートならテンプレートモンスタージャパン

テンプレートモンスタージャパンは日本有数のテンプレートダウンロード販売サイトです。

テンプレートモンスタージャパンのテンプレートはデザインのプロが作成したテンプレートで、Drupal-CMSテンプレートも購入可能です。

下記より ご購入された場合、ご購入後のテンプレートを弊社が 無料でSEO施工し、Drupal-CMS設置と同時に インストールいたします。

勿論、画像の差し替えも簡単にできますので、お申し込み時に、ご指示ください。

 

ダウンロードと買取について

ダウンロードはテンプレートを占有することにはなりません。

ダウンロード後も公開され、他社も同一テンプレートを購入可能です。

他社に同一テンプレートを使用させたくない場合は買取になります。

買い取った場合でも、それ以前にダウンロードで購入しているユーザがいる場合、その人たちとは同一テンプレートになってしまいます。

テンプレートを独占したい場合は 未ダウンロードテンプレートを買い取りします。

他社と同一テンプレートでも、御社独自の写真で差し替えることや、軽微な変更は無料で行います。その時点でオリジナルになる。という考えなら あまり、買取にこだわることはないと思います。

 

弊社は制作会社ですが、弊社がDreamweaverでデザインしたページを組み込むことはできますか?

はい、できます。

Dreamweaverの無料エクステンションを利用する事で、DreamweaverからDrupalテンプレートを作成する事ができます。

Dreamweaverテンプレート

 

標準テンプレート:a8

標準テンプレート:a8を追加しました。

Artisteer2テンプレートです。

Artisteer2テンプレート:a8

Artisteerで作成されたテンプレートですので、

  • カラー変更可
  • カラム構成変更可
  • ページ幅変更可
  • サイドバー幅変更可
  • トップ画像高さ変更可
  • トップページ画像幅変更可

となっています。

もちろん、画像部分は お客さまが お持ちの画像に変更できます。

Artisteerについてはこちら → Artisteer2テンプレート

標準テンプレート:a7

標準テンプレート:a7を追加しました。

Artisteer2テンプレートです。

Artisteer2テンプレート:a1

Artisteerで作成されたテンプレートですので、

  • カラー変更可
  • カラム構成変更可
  • ページ幅変更可
  • サイドバー幅変更可
  • トップ画像高さ変更可
  • トップページ画像幅変更可

となっています。

もちろん、画像部分は お客さまが お持ちの画像に変更できます。

Artisteerについてはこちら → Artisteer2テンプレート

標準テンプレート:a6

標準テンプレート:a6を追加しました。

Artisteer2テンプレートです。

Artisteer2テンプレート:a1

Artisteerで作成されたテンプレートですので、

  • カラー変更可
  • カラム構成変更可
  • ページ幅変更可
  • サイドバー幅変更可
  • トップ画像高さ変更可
  • トップページ画像幅変更可

となっています。

もちろん、画像部分は お客さまが お持ちの画像に変更できます。

Artisteerについてはこちら → Artisteer2テンプレート

このページ の ページTOP自分で更新するホームページの制作・サポート・SEO の サイトマップ自分で更新するホームページの制作・サポート・SEO の TOPページ
ホームページ更新、もう人まかせにはできない。だって自分のサイトじゃないですか。環境・操作アドバイス・メンテナンスは弊社におまかせください