コンテンツ・メーカーの画像アップロードアドオンを追加した際のカスタマイズ方法

新着情報欄を更新するためのプログラム「コンテンツ・メーカー」に「画像アップロードアドオン」を追加した際のカスタマイズ方法を解説します。

このページの解説は「画像アップロードアドオン」に関する部分だけになりますので、アドオンを追加していない「初期状態」に関しては、以下のページの解説を参考にしてください。
コンテンツ・メーカーのカスタマイズ方法の解説

ユーザー
HTMLやCSSのコードを最低限でも大まかに理解でき、テキストエディタで編集・保存できるスキルが必要になります。
PHPやJavaScriptのファイルはユーザーの人が編集する必要はありませんし、制作の際に想定しておりません。

また、保存の際の文字コードは「UTF-8 BOMなし」で保存してください。(すべてのファイル共通)
UTF-8 BOMなしでのファイル保存のやり方は「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」のページを参考にしてください。

このページでの解説で誤解が生まれないよう、用語を簡単に決めておきます。

画像アップロードアドオンを追加した直後は以下のような形になっています。
画像アップロードアドオン追加後

このページの解説では以下の部分を「画像」と呼ぶこととします。
画像

以下の部分を「日付」と呼ぶこととします。
日付

以下の部分を「本文」と呼ぶことにします。
本文

カスタマイズ作業をするにあたって、事前に大まかな構造を知っておくと以下からのカスタマイズ解説が理解しやすくなるでしょう。

以下の領域がdivになっています。
divの領域

上記のdivの中で、以下の領域がpになっており、そのpの中にimg(画像)があります。
pの領域

こちら側はdlになっており、そのdlの中にdt(日付)やdd(本文)があります。
dlの領域
構造の解説は以上です。

画像アップロードアドオンを追加設置した直後の状態では、「画像」と「日付・本文」が横並びになっています。
画像アップロードアドオン追加後

これを縦並びにしたい場合は、sample-attachment.cssの以下の部分を、

div#news div#information div p {
  margin: 0;
  width: 150px;
  float: left;
}

以下のように変更し、(widthとfloatを削除)

div#news div#information div p {
  margin: 0;
}

次に、以下の部分を、

div#news dl {
  width: 470px;
  float: right;
}

以下のように変更します。(これもwidthとfloatを削除)

div#news dl {
}

すると、ページの表示は以下のようになります。
画像と本文を縦並び
このままだと画像と日付の隙間が狭すぎると感じるかもしれませんね。
その場合は上記のdlの部分に対して、以下のようにmargin-topを指定すればOKでしょう。

div#news dl {
  margin-top: 15px;
}

すると、ページの表示は以下のようになります。
マージンの調整後

なお、sample-attachment.cssの一番最初あたりに記述されているoverflow: hidden;は、上記のfloatを解除させるために記述しているものなので、上記のカスタマイズ後は以下のように削除しても問題ありません。

div#news div#information div {

}

画像アップロードアドオンを追加設置した直後の状態では、スマホ表示時でも「画像」と「日付・本文」が横並びになります。
スマホ表示

sample-attachment.cssでは、スマホやタブレットでの表示は以下の範囲内で定義しています。

@media screen and ( max-width: 1000px ) {
ここにスマホ・タブレット表示時のコード
}

ですので、スマホ・タブレットでの表示だけをカスタマイズしたい場合は、上記範囲内のコードを編集することになります。

例えばPC表示は変更せず、スマホ表示時だけ縦並びにしたい場合は、sample-attachment.cssの以下のようになっている部分を、(上記範囲内にあります)

div#news div#information div p {
  width: 30%;
}

以下のように変更し、

div#news div#information div p {
  width: auto;
  float: none;
}

次に、以下のようになっている部分を、

div#news dl {
  width: 65%;
}

以下のように変更します。

div#news dl {
  width: auto;
  float: none;
}

すると、ページの表示は以下のようになります。
スマホ表示時は縦並び

この場合、PC表示のコードは編集していませんので、PCで見たときは以下のように横並びのまま変化しません。
画像アップロードアドオン追加後

提供サポートなど