Tweet

Share on Tumblr

見出しのサンプル

１

昔描いた猫アイコン見出し

2

見出しサンプル

３

見出しサンプル

４
見出しサンプル
５

見出しサンプル

６

７

見出しサンプル

８

見出サンプル

９

見出しサンプル

１０

見出しサンプル

とりあえず、試行錯誤してようやくここまで出来た
見出したちです。
「ビジュアルエディター」では確認できないので（やり方はあるようですが）
いつものように、調べまくりました。

これでも、全然納得出来ません。

何故なら！！

(使い方あってるかはわかりませんが）
テーマで既に設定してある見出しの装飾が削除出来ないままなので
その線や色が入ってしまっているからです。困りましたが、もう出来ません。
下手にいじるとそれこそ崩れそうなので・・・
とりあえず、HTMLとCSSを理解しないと出来ないという初歩的な所でつまづきました

そもそも、調べても「CSS簡単貼り付け！！」とあっても書いてある通りにやっても反映されず
HTMLともごっちゃになって、混乱して放置しそうになりました。

まずは、オススメされていたプラグインの

→ADD Quick tag

と

→Simple Custom Css

これらをプラグインの新規追加でインストールして有効化しました。
HTMLのタグを「Add quick tag」に書いていきます。
これは、そんなに難しくはないのですが問題はCSSです。
しかし、「Simple castum CSS」にはカスタムCSSという箇所があるので
そちらから、CSSを記載すれば良いので楽でした。

例えば見出しの２番目の大きさの場合です。

見出しサンプルの場合

「Add Quick tag」 の「最初のタグ」→<（h2）class=”sample1″>
　　　　　　　　　　「最後のタグ」→</（h2）>
(“の中と（h２）は記載すると見出しが反映してしまうので変えてます。実際は（）を取って下さい。）

ラベルなどは自由で、私は背景色ブルーという名前にしました。
番号があるので整数で０〜　振れば良いと思います。
で、保存。
見出しはh１〜h６までありますが、設定時にhdmlのtagでは取っても良いかなぁ。。。とも思っています。

そこで次に「Simple custom CSS」のカスタムCSSの出番です。

#01A9DB;　←色はRGBカラー（HTMLカラー）から変えられます。私は背景ブルーで文字は白にしています。
color: #ffffff;　←白色です。

このように  .simple{   ドットから記入します。
何故なら！！
HTMLで　class=”◯◯◯”　の場合は　CSSでは　.◯◯◯{
　　　　　id=”◯◯◯”　の場合は　CSSでは　＃◯◯◯{
なんですって！！！
ど素人でも理解できました。

更に　classはページで何度も使用できて、idではページ毎に1回しか使用できないそうです。

そういうことか！

というのが本日までに理解できたので、どうにかそれっぽいものが出来ました。
ただし、参考にさせて頂いたものでも、設定に反映できなものも多々ありましたので
ご自身でお使いの場合は自己責任でお願い致します。

＿＿＿＿＿＿＿参考にさせて頂いたサイト様です。＿＿＿＿＿＿＿

copypet　様

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50　様

サルワカ　様