ホーム

見栄え見栄え

投稿フォームのカスタマイズ

Drupalの標準の投稿フォームは日本人が好むテーブル形式ではありません。伸縮自由のfieldsetとなり、それはそれで効率的で良いのですが、どうも日本的な入力フォームとはかけ離れています。

CSSやテンプレートを調整すれば見た目は日本人好みにできるのですが、いつもいつもとなると疲れてしまいます。

入力フォーム専用で簡単に表示形式を変更できるモジュールがないものかと探しても見つからなかったので、弊社オリジナルでモジュールを作成しました。

それが「Content Template Formモジュール」です。

既存のモジュールで「Content Templates (Contemplate)モジュール」 http://drupal.org/project/contemplate というのがありますので、それの投稿（入力）フォーム版のようなアプローチです。

Content Templates (Contemplate)モジュールは、各コンテンツタイプ別に、ティーザー／本文各々の表示テンプレートを簡単に指定できるモジュールですが、Content Template Formモジュールは投稿（入力）フォームのみをカスタマイズ可能にします。

制限として、JavaScriptを利用する関係で、携帯には非対応です（携帯にはDrupal本来の入力形式のほうが向いていると割り切っています）

  1. Content Template Formモジュールをインストールします。
    ※ Content Templatesに依存します。
  2. 管理セクション › コンテンツの管理 › テンプレート を開くと、従来Content Templateモジュールにより ティーザーと本部用のテンプレート入力フォームが追加されていますが、それに加えて、投稿フォーム用のテンプレート入力フォームが追加されています。
  3. 入力フォーム下の説明に従い、入力フォーム用のテンプレートを入力します。 

 

※ Content Templates Formモジュールは弊社オリジナルですので、別途購入、または会員登録が必要です。

»
  • Share this

メニューやタイトルを画像にする-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的にも問題がありません。

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

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

コンテンツの表現力やユーザビリティを向上コンテンツの表現力やユーザビリティを向上

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

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

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

insert_viewモジュールの利用方法insert_viewモジュールの利用方法

モジュールを有効にする

  1. 管理セクション≫サイトの構築≫モジュールでinsert_viewを有効にし、[設定の保存」をクリックします。
  2. 管理セクション≫サイトの環境設定≫入力書式ページを表示します。
  3. ビューをインサートしたい書式行の[設定]をクリックし、設定ページを表示します。
  4. insert view filterをチェックし、[設定の保存]をクリックします。
     

コンテンツに挿入する

例えば、ここにトップページのサイドブロックに表示されているフォトギャラリブロックを挿入してみます。

 

 

 

 

  1. 管理セクション≫サイトの構築≫ビュー≫リストを表示します。
  2. [編集]をクリックし、設定ページを表示します。
     
  3. 設定ページでは表示したいブロックをクリックし、選択したブロック上にマウスを置くと、ステータスバーに当該ブロックのIDが表示されます。

    上記、http://～中の、
    ・photo_gellery部分がview-ID。
    ・block_1部分がdisplay-IDです。
  4. コンテンツ中に[view:view-ID=display-ID]の型式で記述します。
    ↓がその結果です。
    Water Lilies
    Sunset
    Winter
    Blue Hills
  5. パラメータやページ等は以下のような記述を行います。
    [view:name of view] is replaced by the content listing.
    [view:name of view=name of display] invokes the view using the specified display (see README.TXT for more info).
    [view:name of view=name of display=arg1,arg2,arg3] invokes the view using the specified display and passes arg1, arg2 and arg3 to the view.
    [view:name of view==arg1]
    詳細→insert_view
»
  • Share this

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

ユーザ・プロファイルの中に仕込む画像のことで はまるユーザ・プロファイルの中に仕込む画像のことで はまる

ことの発端は、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モジュールはまだβ版。使う方がいけないような気もしますが、もっと深く調べるか、次バージョンに期待するか、考え中です。

»
  • Share this

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

以下の３つの理由から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に対応していますが、アクセスマップなどは人の目でわかりやすいものをお勧めしています。

»
  • Share this

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

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

 

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

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

»
  • Share this

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

プロが作成したテンプレートモンスターのDrupal-CMSテンプレートを購入プロが作成したテンプレートモンスターのDrupal-CMSテンプレートを購入

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

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

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

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

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

 

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

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

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

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

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

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

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

 

»
  • Share this

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

はい、できます。

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

→ Dreamweaverテンプレート

 

»
  • Share this

Artisteer2テンプレート

Artisteer2を使ったDrupalテンプレートを作成Artisteer2を使ったDrupalテンプレートを作成

Artisteer

Artisteer2はWordPress、Joomla、Drupal用のテンプレート（テーマ）、htmlテンプレート、ASP.NET、コードチャージスタジオ等のWebデベロッパーテンプレートを作成する事ができます。

Artisteer2を使えば ほとんどの人が（時間があれば、ですが）自分でDrupalテンプレート（テーマ）を作成できます。

自分で更新するホームページの制作・サポート・SEOはArtisteer2を以下のいずれかの形で受け入れ可能です。

  1. お客さま自身がArtisteer2を使用して作成したテンプレート（テーマ）を弊社がカスタマイズする方法。
  2. お客さまが Artisteer2の試用版を使って作成したテンプレート（テーマ）を見せて頂き、弊社が それと同様のテンプレート（テーマ）を作成しカスタマイズする方法。
  3. 弊社 標準テンプレートとしてエントリーしているArtisteer2テンプレートの いずれかを選択していただく方法。
  4. 電話またはSkypeで打ち合わせしながら、完成させる方法。
    ※1
  5. 打ち合わせ時（無料出張サポート：東京都北区限定）にArtisteer2を使って作ってしまう方法。
    → お客さまの ご意見を伺いながら弊社担当者が打ち合わせの場でArtisteer2を使って作成してしまいます。

 

全て無料で承ります。

»
  • Share this

Dreamweaverテンプレート

Dreamweaverで作成したデザインをDrupalテンプレートにDreamweaverで作成したデザインをDrupalテンプレートに

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

→ Drupal API extension for Dreamweaver

デザイナー系のホームページ制作のプロはDreamweaverを使う事が多いですが、このエクステンションを利用すれば Dreamweaverで作成したデザインを Drupalテンプレートとして使えるようになります。

Drupal API extension for Dreamweaver を使用して出力された Drupalテンプレート（テーマ）を 弊社に渡して頂ければ、無料でそのテンプレートをカスタマイズします。

プロのホームページ制作者の方はDreamweaverを使用される事が多いですが、デザイン重視でCMSのような動きのあるシステムは苦手というデザイナーさま
→ 弊社の販売パートナーになってデザイン以降は弊社に おまかせにして しかも 紹介手数料をGETしませんか？
多数の案件を抱えている制作会社さま
→ 弊社のデザインパートナーになってデザイン以降は弊社に おまかせにして しかも 紹介手数料をGETしませんか？

 

Drupal標準のテンプレートも そうですが、Drupalのテンプレートというだけで SEOに強いわけではありません。
標準で足りない部分を 弊社が カスタマイズする事で補います。

弊社なら、Dreamweaver＋Drupal API extension for Dreamweaverを定額でDrupal-CMS化します。

お決まりのサイトマップ、新着、トピックス、さらに、動きのあるページ（投稿フォームや検索フォーム）、SEO関連モジュールをそろえていますので余計な費用はかかりません。

定額制で余計な費用がかからない、そしてコンテンツの更新ばかりではなく、動的なシステムのサポートがある弊社の自分で更新するホームページの制作・サポート・SEOをご利用ください。

»
  • Share this
このページ の ページTOPDrupalサイト構築 の サイトマップDrupalサイト構築 の TOPページ