コンテンツに画像を加える 【Img package 編 - パート1 】

コンテンツに画像を加える 【Img package 編 - パート1 】

Drupal icon

このセクションでは、《Img package モジュール》を使用してコンテンツへ画像を加える方法を説明します。
Img package モジュール》はコアの Upload モジュールと連携して、とても簡単にコンテンツやコメントに画像を加える方法を提供します。


Img package モジュールは、ユーザからコントリビュート(寄与)されたモジュールですのでコアには含まれていません。 そのため、はじめにダウンロードとインストールを行います。

  1. Img package のプロジェクトページから最新のリリースをダウンロードしてください。
    ※ 2008/05 現在、Drupal.org webmasters との見解の相違から、モジュール作者は drupal.org を離れ Think twice before you choose: Img package (img_filter) にて公開しています。
    【2008/06/03 追記】
    残念なことに、上記のブログも削除されたようです。今後、開発やサポートは期待できないかもしれませんが、秀逸なモジュールだけに利用したい人も多いと思われますので、以下でダウンロードできるようにしました。
    ただし、上述の状況下にあるモジュールであることは十分に認識した上で使用してください。
    Img Package 6.x-2.2 をダウンロード

  2. パッケージを展開してできた img_filter ディレクトリごと、Drupal をインストールしたディ
    レクトリの sites/all/modules にコピーしてください。

  3. 管理者としてログインし、[管理セクション] >> [サイトの構築] >> [モジュール] へ進んでください。

  4. UploadImgImg commentsの各モジュールを有効にし、「設定の保存」をクリックしてください。

  5. Img package モジュールには筆者がコントリビュートした日本語翻訳ファイルが同梱されているため、インストールと同時に翻訳が自動的にインポートされます。

モジュールの有効化

以上でインストールは完了です。

Img package モジュールの設定については別ページにてご説明しますので、まずはデフォルトのままで読み進めてください。


それでは実際に使ってみましょう。
ここでは「ストーリー」でコンテンツを作成することにします。

  1. [コンテンツの作成」 >> [ストーリー] へ進んでください。

  2. 「タイトル」と「本文」を記入してください。
    タイトルと本文

  3. 「ファイルの添付」から挿入したい画像を添付(アップロード)してください。
    アップロード

  4. ここでは添付ファイルとしての表示はしませんので、「リスト」のチェックを外してください。(Upload モジュールの設定によっては、最初からチェックが入っていない場合もあります)
    アップロード後

  5. 「イメージ」で表示モードとタイトル(ファイル名)の位置を設定してください。
    表示モードはひとまず「左にフロート」か「右にフロート」を選んでください。
    イメージの設定


「プレビュー」ボタンをクリックして、どのように表示されるかを確認してみましょう。

  • 「イメージ」で表示モードを「左にフロート」にした場合の例
    左フロート

  • 「イメージ」で表示モードを「右にフロート」にした場合の例
    右フロート

このように表示モードを変更するだけで、簡単に画像を左右に配置することができます。


今度は表示モードの [img:xx] タグ を使ってみましょう。
このモードは本文中にタグを埋め込むことで、画像をその位置に挿入します。

タグは [img:画像番号 align=配置方法 title=タイトルの位置] のように指定します。

  1. 画像番号はアップロードした添付ファイルの上からの順番を指定します。
    例えば、2つの画像をアップロードした場合、上を指定する場合は [img:1 、下を指定する場合は [img:2 とします。

  2. 配置方法は、left, right, center, float_left, float_right のうちから一つを選んで指定します。
    left, right はそれぞれ左右、float_left, float_right はそれぞれフロートで左右、center は中央となります。
    例えば、align=float_right のように指定します。

  3. タイトルの位置は、ファイル名を画像の上下どちらかに表示するか、あるいは表示しないかを指定します。
    例えば、title=none] のように指定します。

  4. 最終的に上記3つを組み合わせ、[img:1 align=float_right title=none] のようにしたタグを本文中に画像を挿入したい箇所に埋め込みます。
    以下は本文の中央付近に埋め込んだ例です。

    [img:xx] タグの例


「プレビュー」ボタンをクリックして、どのように表示されるかを確認してみると、画像が中央付近に挿入され、右にフロートされているのがわかります。

[img:xx] タグの表示例


あとは好みの場所に画像が挿入されるよう、タグの挿入位置の調整とプレビューを繰り返し、最後に「保存」ボタンをクリックすればコンテンツ作成は完了です。

インストールディレクトリ


Drupal icon

以上のように、Img package モジュールを利用することで簡単に画像をコンテンツに挿入できるようになります。

続いて、「コンテンツに画像を加える【Img package 編 - パート2 】」(※ 執筆中 ※)では、Img package モジュールの設定についてご説明します。