WordPress Theme SANGO ? HTMLテンプレートと既存テーマの狭間で
今回、HTMLテンプレートを使いにあたって、動的ページを作るにはWordPressのショートコードなどを使う必要がでてきます。
当然、ショートコードを使うとデザイン(CSS)も使う必要があります。
『簡単だと思っていましたが、問題がありました！』
テーマ既存のショートコードを使うとショートコードのデザインが崩れる問題が色々な部分で発生していました。
理由は簡単です。
HTMLテンプレートとWordPressのテーマの機能を使おうとしているからなのです。HTMLテンプレートは非常に簡単な定義のみです。特にpタグなど多様するものがクラス分けもなく簡単にHTMLテンプレート上で使われているのです。今回使った
HTMLテンプレートは特性？でもあります。
それが、テーマ既存のショートコードのデザインに悪さをするのです。※CSSを読み込む順番もありますが、それがテーマ既存のデザインの一部に影響があるのです。
簡単に言えば、、、
ほとんどがpタグの影響でした。どう言う対応が良いのか、CSSスキルが皆無なので、ベストな対応が思いつかなかったので、ひとまずで影響のあるショートコードをpタグからdivタグにしました。
これと言ってpタグを使う理由もわからなかったので！
そんなことで次回の対応を前に少し真面目に調べて見ることにしました。
pタグ、divタグのちがい
以下のサイトからの引用(抜粋です)
HTMLを書いていると、p要素とdiv要素どちらを使えばいいか、div要素とspan要素どちらを使えばいいか、等の悩みが出てくると思います。
これらの要素はHTMLの中である一定の範囲を指定する際に使います。特にdivやspanは一定の範囲を指定してスタイルを変更したりするために利用することが多いです。
pとdivとspanの違いはざっくり説明すると以下のようになります。
p ブロック要素。段落を指定する時に使います。
div 汎用ブロック要素。前後に改行が入ります。
span 汎用インライン要素。前後に改行が入りません。
p要素とdiv要素の違いはちょっとわかりにくいですね。どちらもブロック要素ですが、文章の段落ではp要素を使うと良いでしょう。p/div要素とspan要素の違いは、ブロック要素かインライン要素かという点です。pやdivはブロック要素なので、前後に改行が入りますが、spanは入りません。
span改行は入れたくないけど、途中の一部分だけにスタイルを加えたいという場合には、span要素を使います。
