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

公開日

2020年3月16日

最終更新日

2020年12月9日

著者

Motohiro Tani

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

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

カスタマイズに必要なスキル

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

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

このページでの用語の解説

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

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

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

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

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

事前に知っておくと便利な知識

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

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

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

こちら側はdlになっており、そのdlの中にdt(日付)やdd(本文)があります。

構造の解説は以上です。

画像を縦並びにしたい場合

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

これを縦並びにしたい場合は、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で見たときは以下のように横並びのまま変化しません。