レスポンシブ対応、ブロガー向けのマガジンテーマ「NATURAL PRESS(ナチュラルプレス)」

ページのCSS等のデザイン(装飾)一覧

この記事を簡単に書くと…

  • こちらにページの要点を3つまで入力できます
  • 要点が書かれていることで、おおまかな記事の内容を知ることができます
  • ボリュームのある記事では効果的です
広告エリア(680px × 80px)

ページのCSS等のデザイン一覧

こちらはH2タグです

見出しのデザインになります。上は一番大きな見出しです。「段落」の「見出し2」を適用すると、こちらになります。

こちらはH3タグです

そして、こちらが中くらいの見出しです。「段落」の「見出し3」を適用すると、こちらになります。

こちらはH4タグです

そして、こちらが少見出しです。「段落」の「見出し4」を適用すると、こちらになります。

 

引用の文章になります。このように枠で囲まれます。適用したい文章を選択して「ビジュアル」の引用アイコンをクリックすると、こちらが適用されます。

 

次に表組み(table)です。

項目 th th
内容 td td

スペックなどを掲載したり、何かの情報を整えて見せたい場合に使えます。

 

項目 内容
th td
th td

そして、こちらの表組みは、スマートフォンで閲覧した際に、縦積みで表示されます。スマートフォンだと、画面が小さいので、こちらの方が見やすい場合もあります。

tableタグにクラスの「mobileTb」を適用させると、こちらの表組みになります。

 

divタグのクラスに「wakuYel」を適用させると、このようになります。

 

divタグのクラスに「wakuBlu」を適用させると、このようになります。

 

divタグのクラスに「wakuRed」を適用させると、このようになります。

 

divタグのクラスに「wakuRed」を適用させると、このようになります。

 

簡単にボタンも設置できます。それぞれ、aタグにクラスを適用させるだけです。特大ボタン(btnArea biggest)、大ボタン(btnArea big)、中ボタン(btnArea)、小ボタン(btnArea small)

特大ボタン

大ボタン

中ボタン

小ボタン

広告エリア(680px × 80px)
広告エリア(250px × 250px)
実際は300px × 自由

関連リンク

  • WEB上手 JavaScript・PHPのサンプルやWordPressのテーマ、アフィリエイトやブログの運営方法。
このページは、WordPressのテーマ「NATURAL PRESS」のデモになります。レスポンシブ対応、ブロガーやアフィリエイター向けのマガジンテーマです。商用利用可能で誰でも無料で利用できます。