初めてのコンテンツ作成(BBCode 編)[2]

さて、前回の「初めてのコンテンツ作成(BBCode 編)[1] 」では、BBCode モジュールをインストールし、《 入力書式 》 として使用できるようにするところまでを説明しました。

今回は、この入力書式を使い、「初めてのコンテンツ作成」で画像を挿入する際に使った HTML タグを BBCode タグに置き換え、さらに、文章を画像の横に回り込むように編集し直してみましょう。


では、まずはじめに、「初めてのコンテンツ作成」で投稿したブログページを編集画面に切り替えます。

編集画面に切り替えるには、投稿したユーザのアカウントでログインし、編集したいコンテンツを表示させ、さらに 編集 と書かれたリンクをクリックしてください。


編集への切り替え


編集画面に切り替えたら、HTML タグを BBCode タグに置き換えます。

とはいえ、最初からすべてのタグを提示して「おしまい」ではなんですので、BBCode タグを使って画像を表示する場合のいくつかの表示例や、編集の際の Tips などをまじえ説明してゆきます。

では、まずは単純に、以前の HTML タグを BBCode タグに置き換えてみましょう。

HTML タグで画像を表示する場合は、<img src="URL" /> のようにタグ内に画像の URL を書きますが、BBCode タグでは [img]URL[/img] のように 開始タグの [img] と終了タグの [/img] で URL を囲みます

では、説明どおりにタグを置き換えてみてください。


HTMLからBBCodeへ変更


続いて、《 入力書式 》 を前回追加した BBCode に変更し、ひとまず プレビュー と書かれたボタンをクリックし、プレビュー表示をしてみましょう。


入力書式切り替え


プレビューが表示され、HTML タグを使った場合と同じように表示されるのがわかると思います。


プレビュー表示

このように、《 入力書式 》 に特殊記法のフィルタを加えることで、Drupal では HTML 以外の記法を使ったコンテンツの作成ができるようになります


では次に、いよいよ文章を回り込ませてみましょう。

文章を回り込ませるためには、画像のボックス領域を作成し、それを左右どちらかに配置します。
ボックス領域を BBCode タグで実現するには、[float=left] または [float=right][/float] タグで対象を囲みます。

では、まず、画像のボックス領域を左に作り、文章を右に回り込ませるために、[float=left][/float] タグで画像のタグを囲い、先ほどと同じようにプレビューボタンをクリックしてください。


floatタグ


プレビューが表示されました。
画像が左に配置され、文章が右に回り込んでいるのがわかると思います。


重なったプレビュー

しかし、抜粋と全文のプレビューが重なり合って、少々見辛くなってしまいました。


このような場合、必ずしも必要ではない抜粋のプレビューを、一時的に非表示にできれば便利でしょう。
そのために、ここで1つ Tip を紹介します。

Drupal には、<!--break--> という独自のタグがあります。
このタグは、本文の任意の位置に挿入することで、「先頭からここまでを抜粋として作成してください」と Drupal に対して抜粋の範囲を明示的に指定するために使います。
Drupal は、通常は自動的に抜粋の区切りを認識しますが、本文中にこのタグが現れるとタグまでを抜粋として認識するようになります。

これを利用し、このタグを本文の先頭に挿入することで、「抜粋は無し」と Drupal に認識させ、抜粋のプレビューも非表示にすることができます。

では、実際にやってみましょう。

本文の先頭に <!--break--> と入力してから、プレビューボタンをクリックしてください。


break挿入


今度は全文だけのプレビューとなり、スッキリと見やすく、また、正しく表示されるようになりました。


全文のみのプレビュー

このように、<!--break--> タグには本来の使い方とは別に、便利な使い方があることを覚えておくとよいでしょう。


さて、プレビューが見やすくなったところで、今度は先ほどとは逆に、画像のボックス領域を右に作り、文章を左に回り込ませてみましょう。

すでに理解していることでしょうが、ボックス領域を右に作るには、先ほど [float=left] と指定した部分を [float=right] と変更するだけです。
では、leftright と書き換え、プレビューボタンをクリックしてください。


floatタグ


プレビューが表示されました。
今度は画像が右に配置され、文章が左に回り込んでいるのがわかると思います。


プレビュー表示


さて、ここまでで BBCode を使って画像を左右に配置する方法は理解できたと思います。

この後、もう少しだけ説明すれば「初めてのコンテンツ作成(BBCode 編)」も終わりなのですが、また少し長くなってしまいましたので、この先は「初めてのコンテンツ作成(BBCode 編)[3] 」で続けることにしましょう。