コンテンツ・メーカーのカスタマイズ方法の解説

新着情報欄の更新システムである「コンテンツ・メーカー」のカスタマイズ方法を解説します。
コンテンツ・メーカー本体は以下のページから無料でダウンロードができます。
https://www.1-firststep.com/archives/614

このページでは初期状態のサンプルページを例にして解説していきますが、既存サイトに組み込んだ場合でも同じやり方で作業を進められるかと思います。


HTMLやCSSのコードを最低限でも大まかに理解でき、テキストエディタで編集・保存できるスキルが必要になります。
PHP(config.php以外)やJavaScriptのファイルはユーザーの人が編集する必要ありませんし、開発の際に想定しておりません。(編集したい場合は自己責任で実施してください)

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

このプログラムは新着情報をAjaxによってページ上に表示させるため、HTMLソースを見てもその部分のHTMLが表示されません
AjaxコンテンツのHTMLソース
Ajaxコンテンツとはこういうものなのですが、このような特性のせいで「HTMLを確認しながらCSSで見た目を調整する」ということがやりにくく感じるかもしれません。

そのような場合は、調べたい部分で右クリックメニューを出し、
コンテキストメニュー

検証」(Chromeの場合)を選択してください。(Firefoxの場合は「要素を調査」を選択)
検証を選択

するとデベロッパーツール(Firefoxの場合は開発ツール)のウインドウが開かれ、その部分のHTMLソースを見ることができます。
AjaxコンテンツのHTMLソース

上記画像の例だと日付表示の部分、つまりdt要素が選択されているので、dtに対して適用されているCSSが右側に表示されます。
適用されているCSS
ここで表示されているCSSは上のほうにあるものほど優先度の高いCSSになります。

既存サイトに組み込んだ際に表示が崩れたりするのは、CSSが競合していることが原因です
そんな時、上記のデベロッパーツールのCSS部分を見れば、どのCSSと競合しているのかを簡単に見つけることができます。

このやり方を知っておけば、Ajaxコンテンツであっても常にHTMLソースを確認しながら作業ができ、既存サイトに組み込んだ際のCSSの競合を簡単に防ぐことができるでしょう。

初期状態では日付の表示は太字になっています。
日付表示

これを通常の太さの文字にしたい場合は、CSS(index.html内)で以下のようになっている部分を、

div#news dl dt {
  font-weight: bold;
}

以下のように変更すればOKです。(font-weight: bold;を削除)

div#news dl dt {

}

するとページの表示は以下のようになります。
日付表示を細字に変更

日付表示
日付の表示を無くしたい場合は、CSS(index.html内)で以下のようになっている部分を、

div#news dl dt {
  font-weight: bold;
}

以下のように変更すればOKです。(font-weight: bold;を削除し、display: none;を追加)

div#news dl dt {
  display: none;
}

するとページの表示は以下のようになります。
日付を非表示

管理画面の日付の入力欄をなくすためにはPHPファイルの編集が必要になるため、ここでは解説しません。
管理画面の日付欄
もしどうしても削除したい場合はお問い合わせページからカスタマイズ依頼をご検討ください。

また、管理画面の日付の表示部分は「削除する」や「編集する(編集機能アドオン使用時)」のボタンを表示させる関係上で、カスタマイズ依頼によって日付を削除したとしても以下のようにスペースが空いてしまうのはご了承ください。
削除や編集のボタン

初期状態では日付の下に新着情報文が表示されます。
日付と新着情報

これを横並びにしたい場合は、初期状態で以下のようになっている部分を、

div#news dl dt {
  font-weight: bold;
}

以下のように追記し、(float: left;を追加)

div#news dl dt {
  font-weight: bold;
  float: left;
}

上記コードの前後あたりに以下を追加し、(全部追加)

div#news dl dd {
  float: left;
  margin-left: 30px;
}

さらにその前後あたりに以下を追加すればOKです。(全部追加)

div#news dl {
  overflow: hidden;
}

するとページの表示は以下のように横並びになります。
日付と文章を横並び

上記までのコードは何をしているかと言うと、dtddfloatを設定し、そのfloatを解除するために親要素であるdlに対してoverflow: hidden;を設定しただけです。

overflow: hidden;の代わりに以下のようなclearfixを設定しても同じです。お好きな方をどうぞ。

div#news dl:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
提供サポートなど