Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Drupal のコンテンツに画像を貼り付ける方法あれこれ

よく知られているように、Drupalはインストールした状態ではコンテンツに画像を挿入するのにも一苦労する。

画像を貼り付ける方法として、大体以下の方法を使っている。

  • 自分でHTMLを書く
  • image moduleを使う (Drupal 6 では imagecache module)
  • flickr moduleを使う

なんだかんだ言っても本文中に画像を入れて、細かいレイアウトをするためには、自分でHTMLを書くのが一番である。以下のページの例ではそうしている。

NapsterのDRM付きWMAはSongbirdでも再生できた

こんな具合のコードを手で書いている。picboxというクラスは自分で設定したもので、右寄せするようになっている。

<div class="picbox">
<img src="/files/xxxxxx.jpg"/>
</div>

記事の右上に数枚の画像を入れるのには、image モジュールを使う(Drupal 7の場合)。imageモジュールを使うとノードに画像フィールドを追加することができる。フィールド数を固定しなければ複数の画像を挿入できる。imageモジュールで特筆すべきは表示の仕方に応じて画像の大きさを変えたり、いろいろな効果を加えたりできることである。例えば、ティーザ表示とフル表示とRSSフィード内の表示とでそれぞれ画像の大きさをかえることができる。

Drupal 6の場合は、imagefieldモジュールを使って本文の上部か下部の定位置に一枚だけ画像を入れることができる。このモジュールはCCKのフィールドとして画像を扱うことができる。imagecache モジュールと組み合わせて使われることが多い。このimagecacheモジュールの機能を使うとティーザー表示とフル表示とで画像の大きさを変えることができる。Drupal7ではimagefieldモジュールとimagecacheモジュールの機能を併せて imageモジュールとして Coreに取り込まれた。

以下のページの例では、右上のスケートセンターの画像にimageモジュールを使っている。フル表示のときはColorboxモジュールを使ったlightbox 表示をするように設定してある。ティーザー表示の時はこの画像が小さく表示される。

http://travel.nyanchew.com/nyboston

以上は、まず自分で画像をアップロードすることが前提だが、もうめんどくさいのでFlickrへのリンクでいいやというときもある。そこで、Flickrモジュールを使う。Flickrモジュールの入力フィルターとしての機能を使えば本文中の好きな位置にFlickrの写真をレイアウトできるので便利である。以下のページのように picbox クラスと組み合わせて使っている。

http://travel.nyanchew.com/turkey

実際に書いているコードはこんな感じだ。

<div class="picbox">
[gallery type='flickr' view='photo' photo_id=154117543,size=m]
</div>

以下のページは、Flickrの写真へのリンクをフィールドとして使っている例である。Flickrの画像をフィールドとして使うにはFlickrfield モジュールを使う。

http://travel.nyanchew.com/airport-announce

Flickrfield もティーザー表示とフル表示とで画像の大きさを変えることができる。

PAGE TOP