Cocoon CSS ブログテスト

WordPress テーマの Cocoon を利用するにあたり、タグ装飾をした。
その確認をするためページです。

このページは一般の方には何の役にも立たないと思います。

ねこ
ねこ
すみません…。

ページ内リンク(絶対パス)です。

ページ内リンク(相対パス)です。

固定ページにリンクを貼ってみる。 テーブルへの接続とレコードの取得

ブログページにリンクを貼ってみる。 スマホ交換した、トラブル起きた

ここはただの h1 です。ABC def 漢字なども

ここがh1 class=”entry-title”です。ABC def 漢字なども

ここがh2です。(.article h2) ABC def 漢字なども

ここがh3です。 (.article h3)ABC def 漢字なども

ここがh4です。 (.article h4) ABC def 漢字なども

ここがh5です。 (.article h5) ABC def 漢字なども
ここがh6です。 (.article h6) ABC def 漢字なども

対象外もあるよ。
「サイト内検索」、「関連記事タイトル」、「コメントタイトル」は以下の表示

サイト内検索 <h3 class=”widget-sidebar-title”>

ここが整形済みテキストです。ABC def 漢字なども

リセットする

ここは h2 リセット (h2.music_word)

ここは h3 リセット (h3.music_word)


ここはカテゴリー (h2.category)

ここは音楽記号 (h3.symbol)

ここは読み方 (p.read)

ここは説明その1 (p.description_1)

ここは説明その2 の上部 (p.description_2_top)
複数の文章が入るので、上部・内部・下部に分けた。

ここが内部その1。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここは内部その2。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここが下部。(p.description_2_bottom)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

  • ここは使用例その1 (ul.example_use)
  • 使用例なのです。

こんな使用例もあります。

  • ここは使用例その2 (ul.example_use_2)
  • 使用例なのです。
  • ここは使用例その3 (ul.example_use_3)
  • 使用例なのです。

ここは参考曲 (p.ref_music)

ここはコラム (p.music_column)

ここは音楽記号 (h3.symbol)

ここは読み方 (p.read)
改行が入るとこうなる。

ここは説明その1 (p.description_1)

ここは説明その2 の上部 (p.description_2_top)
複数の文章が入るので、上部・内部・下部に分けた。

ここが内部その1。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここは内部その2。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここが下部。(p.description_2_bottom)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

  • ここは使用例その1 (ul.example_use)
  • ここは使用例その2 (l.example_use)

ここは参考曲 (p.ref_music)

ここは音楽記号 (h3.symbol)

ここは読み方 (p.read)

ここは説明その1 (p.description_1) 改行せずに長い説明にしてみると、こんな風になるのであります。

ここは説明その2 の上部 (p.description_2_top)
複数の文章が入るので、上部・内部・下部に分けた。

ここが内部その1。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここは内部その2。 (p.description_2_middle)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

ここが下部。(p.description_2_bottom)
段落はここで分けて書く。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

  • ここは使用例その1 (ul.example_use)
  • ここは使用例その2 (l.example_use)

ここは参考曲 (p.ref_music)

ここは音楽記号 (h3.symbol)

ここは読み方 (p.read)

ここは説明その1 (p.description_1)

ここは説明その2 (p.description_2_all)
段落がひとつしかない時はこんな感じ。

  • ここは使用例その1 (ul.example_use)
  • ここは使用例その2 (l.example_use)

ここは参考曲 (p.ref_music)


あいうえお
かきくけこ
さしすせそ ← この上下の行間は広い。
たちつてと
なにぬねの

上手く行っているようにも見えるが、画面をはみ出すと全てが3行分になるので不採用!!

html

あいうえお
かきくけこ
<span class="between_line3">さしすせそ ← この上下の行間は広い。</span>
たちつてと
なにぬねの

css

span.between_line3{/* 段落内の特定行で行間を空けたい場所に使用 */
	line-height:3em;
}

コメント