The other way round

ARTICLE PAGE

カスタマイズ時に気をつけてほしいこと「見出し」と「リスト」

カスタマイズ
  • comment0
  • trackback0
記事内容は私のテンプレート限定です
一部汎用的に活用できるものもありますが そのあたりのご判断は各人にお任せ ( ゚Д゚)ノ

FC2新投稿画面リリースに伴い
テンプレート内容の一部に変更を加えています
変更というか「削除」と表現した方が良いかもしれません
以前チョロっと記事にしましたけれども

リセットCSS

というのがありまして

ブラウザ間の差異を無くす あるいは 要素独自のスタイル(見た目)を初期化し統一する

というのが目的です
そのリセットから除外したものについて記しておきます


見出しのmargin(マージン)


「見出し」というのはhtml要素で表すと

<h3>今日の議題</h3>


緑の部分が見出しを意味するhtml要素です
このhx (xは数字が入ります 1〜6まで存在) という要素の初期スタイルは

上下に空間ができる

のがデフォルトです
この空間が margin と呼ばれるもので
指定された対象の「外側」に距離を取る という用途です

テンプレートをカスタマイズされる際に hxを変更したり追加したり… という方もお見受けします
既存のhxに対し数字だけを入れ替える あるいは 新規でhxを追加する場合
そのままだと以下のようになります ↓



右側にあるのがh3ですが
他のものと横に並んだ時に 頭出しが揃ってないですよね
これはhxのデフォルトスタイルにmarginが含まれているために起こります
こういった場合には 対象のhxに対し

margin: 0;


をCSSで指定すると回避できます




リストのマーカー


こちらもリセットから削除しました
重ねて説明しますが
リセットから削除する = デフォルトスタイルが適用される
という意味です

リストというのはhtmlでは以下のようなものです

<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Pinterest</li>
<li>Google plus</li>
</ul>


li要素の終了タグは省略できますが 例では記述しています
リストを司るhtml要素は他に
<ol>
がありますが
<ul>
同様
<li>
を子要素として内包している必要があります

上記ソース内容のデフォルトの見た目は以下のとおりです

  • Facebook
  • Twitter
  • Pinterest
  • Google plus


丸いマーカーがついてますよね
これが付くのがデフォルトです
このマーカーを外したい場合には 対象の
<ul>
あるいは
<ol>
に対し

list-style: none;


をCSSで指定します
結果は以下の通り ↓

  • Facebook
  • Twitter
  • Pinterest
  • Google plus


また デフォルトでのマーカー位置は outside と言って
ボックスの外にはみ出す仕様になっています

例)

  • Facebook
  • Twitter
  • Pinterest
  • Google plus


これを回避するには 対象に以下をCSS指定

list-style-position: inside;


結果

  • Facebook
  • Twitter
  • Pinterest
  • Google plus


上記例ではボックス側にpadding(パディング)と呼ばれる 指定された自身の「内側」に距離を設ける 指定がありませんので 左辺ギチギチの配置になっていますが
ボックスにpaddingを指定するとこんな感じです ↓ (padding: 20px; を指定)

  • Facebook
  • Twitter
  • Pinterest
  • Google plus


(padding指定はボックス側へ行います)



まとめ



カスタマイズ時に見出しとリストがちょっと厄介かな と思います
新投稿画面(新エディター)で記事内で両htmlがツールで利用できるようになっていますので
(リストは旧画面でも扱えます)
デフォルトにしておいた方が良いだろう という私の個人的配慮です
今後リリース予定のテンプレートは全てこんな形で
hx 及び リストへのリセットは設けませんので
カスタマイズ時に躓いた際ご参照頂ければ と思います
関連記事

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い