イメージ

2024/02/27 コンテンツ・メーカー2の出力テンプレート選択アドオンのサンプルデモが表示されなかったので修正しました。
コンテンツ・メーカー2の画像アップロードアドオンのサンプルデモが古いバージョンのままだったので最新バージョンに差し替えました。

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

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

このページの解説ではコンテンツ・メーカーに同梱されている公開用サンプルページ(index.html)を使ってカスタマイズをしていきますが、既存のサイトに組み込んだ際も同様のやり方でできるでしょう。

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

【補足情報】
特に、上記ページ内の「カスタマイズの際に知っておくと便利な知識(結構重要)」の内容はこのページでのカスタマイズをする際にも非常に役に立つので、事前に読んでおくと良いでしょう。

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

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

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

画像アップロードアドオンを追加した直後の公開ページは以下のような形になっています。(アドオンに同梱の sample-attachment.css を読み込ませた状態)
画像アップロードアドオン追加後

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

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

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

以上です。

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

以下のように各投稿の領域が div class=”cm-box” として囲まれています。
各投稿の領域

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

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

以上です。

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

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

div#contents-maker-news div.cm-box p {
  width: 300px;
  float: left;
}

以下のように変更し、(widthfloatを削除)

div#contents-maker-news div.cm-box p {
  
}

次に、以下の部分を、

div#contents-maker-news div.cm-box dl {
  width: calc( 100% - 300px - 40px );
  float: right;
}

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

div#contents-maker-news div.cm-box dl {
  
}

すると、以下のように縦並びになります。
画像と本文を縦並び
このままだと画像が大きすぎると感じるかもしれませんね。
その場合は以下のimgの指定を、

div#contents-maker-news div.cm-box p img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

以下のように変更すると良いでしょう。(max-widthwidthの値を500pxに変更)

div#contents-maker-news div.cm-box p img {
  max-width: 500px;
  width: 500px;
  height: auto;
  vertical-align: middle;
}

すると、画像の大きさは以下のようになります。
画像の大きさを変更

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

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

@media screen and ( max-width: 1000px ) {

ここにスマホ・タブレット表示時のコードを記述

}

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

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

div#contents-maker-news div.cm-box p {
  width: 30%;
}

div#contents-maker-news div.cm-box dl {
  width: 65%;
}

以下のように変更します。(widthautoにし、float: none;を追加)

div#contents-maker-news div.cm-box p {
  width: auto;
  float: none;
}

div#contents-maker-news div.cm-box dl {
  width: auto;
  float: none;
}

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

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

提供サポートなど