小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

画像の表示位置指定(右寄せ/左寄せ/中央揃え)と本文回り込み

最終更新日: 2015-01-13

画像の位置指定をするためのCSS(スタイルシート)とテンプレートの編集サンプルをご紹介します。CMS「すぐ使えるCGI」で書き出した詳細記事ページの画像に左寄せ・右寄せ・中央揃えなどの指定が行えます。

画像の位置指定とと本文回り込みの概要

画像の表示位置指定(右寄せ/左寄せ/中央揃え)と本文回り込み
左寄せまたは右寄せにした画像の周囲にはテキストを流し込む事ができます。また、画像をアップロードしなければ、その位置には自動的にテキストが流れ込みます。

想定する使い方

上の図は、CMS「すぐ使えるCGI」でアップロードできる最大枚数3枚の画像を同時に表示していますが、実際にはこのレイアウトで3枚同時にアップロードしてしまうとレイアウトとしては見にくくなると思います。この方法は、「1番画像としてアップロードすると左寄せになる」「2番画像にアップロードすると右寄せになる」といった運用ルールを決めて、登録する記事ごとに画像の表示位置を変えたい時に使うのがおすすめです。

この他、可能な組み合わせとしては以下のような例があります。

  • 1番画像は左寄せ、2番画像は右寄せ、3番画像は本文の下で中央揃え
  • 1番画像は一番上に左寄せ、2-3番画像は本文の下にサムネイルで表示
  • 1番画像は一番上に右寄せ、2-3番画像は本文の下にサムネイルで表示
  • 1番画像は本文の前に中央配置、2-3番画像は本文の下にサムネイルで表示
  • 1番画像は本文の前に中央配置、2-3番画像は本文の冒頭でサムネイル表示で左寄せ/右寄せ

このページで紹介する方法ではできない事

このページで紹介する方法では、以下の事はできません。

文の途中に画像を挿入

長い本文(記事内容)の中間に画像を挟み込んで表示することはできません。このための設定は下記ページをご覧下さい。

アップロードした画像やファイルを本文内に挿入する方法

複数の画像を縦に並べる

複数の画像を右寄せまたは左寄せでまとめて縦に並べる方法は、このサポート情報ページの方法ではできません。下のこの他の画像配置例をご覧下さい。

複数の画像を右寄せにして、画像が無い場合にテキスト流し込み

複数の画像を本文の右側に縦に並べた上で「画像が無かったらそこにテキストを流し込む」というレイアウトは、現在(2014年2月)のCSS(スタイルシート)技術のみでは表示が不可能で、JavaScriptを使った動的な調整が必要です。

[このページの方法解説にジャンプ]

別のレイアウトをご希望でしたか?

他の画像配置例のツールもご覧下さい。

この他の画像配置例

個別に画像の位置指定をする上記の方法ではなく、画像の位置を細かく指定済のサンプルもあります。下記からご覧下さい。

複数の画像を左寄せで表示、右に本文回り込み

複数の画像を左寄せで表示、右に本文回り込み

複数の画像を本文の左側に並べるデザインです。画像が無い時は「No Image」という表示が出るようになっています。

表示オンラインデモ 詳細とダウンロード

複数の画像を右寄せで表示、左に本文回り込み

複数の画像を右寄せで表示、左に本文回り込み

複数の画像を本文の右側に並べるデザインです。画像が無い時のテキストの流し込みはできず、画像部分に空きスペースが出ます。

表示オンラインデモ 詳細とダウンロード

多数のサムネイルをメイン画像の下または右側に表示

多数のサムネイルをメイン画像の下または右側に表示

本文とは分けてメイン画像+サムネイルを表示するデザインです。

サムネイルはメイン画像の下かメイン画像の右に配置できます。本文と画像エリアの関係は、本文が上、下、左、右、などに調整できます。

表示オンラインデモ 詳細とダウンロード

レスポンシブWebデザイン(PC・スマホ対応)

レスポンシブWebデザイン画像位置調整

本文が左、画像が右に来るパターンですが、スマートフォン(スマホ)など、幅の狭い端末の場合は本文の下に画像が回り込む、「レスポンシブWebデザイン」です。

オンラインデモを表示させてブラウザの幅を変更すると表示の確認ができます。

表示オンラインデモ 詳細とダウンロード

「すぐ使えるCGI」対応製品

このサポートページでご案内する方法は、以下の「すぐ使えるCGI」製品が対応しています。

記事ページの画像の位置指定方法

「すぐ使えるCGI」で書き出す記事ページ(webdir/1.html、2.html ...)の画像の位置指定の方法のご説明です。 もしまだ製品を設置していない場合は、先に「ステップ by ステップガイド」の方法で設置を行って下さい。

1.templates/article/article_image_#.txt の編集

templates/article/article_image_#.txt をテキストエディタで開いて下さい(#は数字で、バージョンによって 1-3 までか、1-5 までのものがあります)。
画像タグが指定されていますので、左寄せ、右寄、中央揃え、またはサムネイル表示かによって下記例のように style 属性を編集して下さい。これ以外の設定も可能ですので、ウェブサイトのデザインに合わせて設定して下さい。

左寄せの場合の設定例

左寄せにする場合は、「float: left;」と設定するのがポイントです。margin の指定は流し込む本文との間の余白を指定しています。左寄せにするので、左のマージンは「0」の設定になっています(左側にはテキストが来ないので)。

<img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%" style="float: left; margin: 8px 8px 8px 0;">


右寄せの場合の設定例

左寄せにする場合は、「float: right;」と設定するのがポイントです。margin の指定は流し込む本文との間の余白を指定していますが、右寄せにするので右のマージンは「0」の設定になっています(右側にはテキストが来ないので)。

<img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%" style="float: right; margin: 8px 0 8px 8px;">


中央揃えの場合の設定例

中央揃えにする場合は、<div>タグで画像だけを囲い、text-align で中央揃えにするのが簡単です。<div>タグのマージンの最初の要素(例で「15px」)は、上下の要素との間の余白です。

<div style="text-align: center; margin: 15px 0;">
<img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%">
</div>


本文の下にサムネイルとして表示する場合の設定例

サムネイル表示にする場合は、画像の表示サイズを設定する点と、拡大画像を表示するための<a>タグを追加するのがポイントです。

<a href="%_d_%/%_filename_escaped_%" target="_blank"><img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%" style="margin: 8px 8px 8px 0px; border: none; height: 150px;"></a>


2.templates/article/article.html の編集

次に templates/article/article.html を開いて編集します。
画像の位置を指定するテンプレート変数「%_article_image_#_%」(#は数字)がありますので、これの位置を変更して下さい。

右寄せまたは左寄せにする画像の設定

右寄せまたは左寄せにする画像は、「%_body_%」より前に画像用のテンプレート変数「%_article_image_#_%」を移動して下さい。
また、「%_body_%」の後にテキストの回り込みを終了させるためのタグ「<div style="clear: both;"></div>」を追加して下さい。

中央揃えにする画像の設定

中央揃えにする画像は、表示したい位置に画像用のテンプレート変数「%_article_image_#_%」を移動して下さい。

本文の下にサムネイルとして表示する場合の設定例

本文の下にサムネイルを表示する場合は、「%_body_%」の後にテキストの回り込みを終了させるためのタグ「<div style="clear: both;"></div>」を追加し、その下に画像用のテンプレート変数「%_article_image_#_%」を移動して下さい。

編集例

下記は、画像1は左寄せ、画像2は右寄せ、画像3は本文の下に中央揃えで配置する場合のテンプレート編集例です(製品は「画像付 ウェブページ更新ツール 大容量版」Ver. 4.3)。

templates/article/article.html の編集例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
</head>

<body bgcolor="#ffffff">

<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="index.html">↑トップ一覧へ</a></td>
<td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

<h1>%_subject_%</h1>
<div align="right">
<p>%_yyyy_%/%_mm_%/%_dd_%</p>
</div>

<!-- 画像の表示: generated from article_image_1.txt -->
%_article_image_1_%

<!-- 画像の表示2: generated from article_image_2.txt -->
%_article_image_2_%

%_body_%

<div style="clear: both;"></div>

<!-- 画像の表示3: generated from article_image_3.txt -->
%_article_image_3_%

<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="index.html">↑トップ一覧へ</a></td>
<td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

</body>
</html>

3.アップロード

編集した下記のファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article_image_1.txt
templates/article/article_image_2.txt
templates/article/article_image_3.txt
templates/article/article_image_4.txt (Ver. 4.8 以上)
templates/article/article_image_5.txt (Ver. 4.8 以上)
templates/article/article.html

4.再構築

管理画面の一覧から「再構築(テンプレート変更反映)」ボタンを押して下さい。

5.確認

書き出されたファイルをブラウザから確認して下さい。
変更が反映されていない場合、表示の再読み込みをしてみて下さい。

関連リンク

さらに詳しく