たびたびお世話になります。いつもの様に分かりにくい質問ですがご教授願います。
ホームページメーカーで《Q&A》を作りました。たとえば『私が塾の経営者』だとして以下のようなページを作成したとします。
-----------ページの内容------------
記事タイトル:よくある質問
要約:(省略)
----------chapter1の内容----------
表題:Q.入塾テストはありますか?
本文:A.ありません。ご安心ください
----------chapter2の内容----------
表題:Q.成績はあがりますか?
本文:A.多分あがると思います
それで《index》を見ると
よくある質問 (←記事タイトル)
Q.入塾テストはありますか?(←表題)
Q.成績はあがりますか? (←表題)
と表示されます。
ただこのままでは非常に見難いのですが、たとえば『表題』の部分を一文字分下げるとか、『記事タイトル』の文字色だけを変えて対応したいと思っています。
現在《index》ではなく、《個別のページ》では
環境設定 > ページ情報フィールド設定 > 文字設定
を変更することで対応できますが、《index》での変更方法を教えてください。
よろしくお願いします。
ご質問ありがとうございます。
表示の調整は CSS で行った方がやりやすいと思います。
CMONOS.JP のデフォルトのテンプレートではインデックスは次のようなタグで記述されます。
<ul class="index">
<li><div class="title">タイトル</div>
<ul>
<li>サブタイトル</li>
<li>サブタイトル</li>
</ul>
</ul>
ですから、たとえば CSS を次のようにすると、サブタイトル部分の間隔が広がります。
ul.index ul li {
margin: 0.5em 0; /*マージンの指定(上下 左右)*/
color: #999; /*色の指定*/
}
調整用の CSS を default.css など当該ページが読み込む CSS に記述すると、うまくいくのではないでしょうか。
お返事遅くなりまして申し訳ありません。やっと出来ました。ありがとうございます^^
いつものように勝手にお話をまとめさせていただくと・・・
環境設定 > CSSファイル編集(共通) > default.css > 上記以外の設定
にある『インデックス・リスト』中に、教えていただいた記述を追加すればよいということですよね。
おかげさまでindexが非常に見やすくなりました。本当にありがとうございました^^
申し訳ありません。ついでと言っては大変失礼ですが、もう一つ教えてください。
先に質問させていただいた
>『表題』の部分を一文字分下げる
は出来たのですが・・・
>『記事タイトル』の文字色だけを変えて対応
の方は色が変わりません。
『color: #999; /*色の指定*/』も『font-color: #999; /*色の指定*/』などに変えたりしてはみましたが同様です。
これは『リンク(link)』『既訪問(visited)』等のソースを、優先的に読み込みに行ってしまっているからでしょうか?
要点をまとめてくださりありがとうございます(^_^)。
追加の質問についてですが、ご推察の通り、a のスタイルが適用されるため文字色が変わらないものと思います。
ul.index li a に対してスタイルを設定すると、記事タイトル部分の文字色が変更されると思います。表題部分の文字色を通常のリンクと同じようにするには、ul.index li ul li a に対して、通常のリンクと同じ色を設定するとよいのではないかと思います。
いつも丁寧に教えてくださりありがとうございます。
今回教えて頂いたことを参考に、当初の私の希望である・・・
『記事タイトル』の文字色だけを変えて対応
については以下の様にアレンジして使用してみました。
おつかれさまでした(^_^)。なるほど、その方がスマートですね!