Xeory Extensionのカスタマイズ PART3 ータイトルタグを変えるー

花粉症が辛くて一日中ティッシュを抱えています。MaruMariです。

今回は、今使っているXeory Extensionのタイトルタグのカラーや、スタイルが気にくわないので変更していきます。

タイトルタグのCSSを編集しよう

今回は、タイトルタグを編集していきます。

Xeory Extensionのデフォルトのタイトルタグはこのようになっていて、実際に反映されると、こんな風になります。

 

正直かわいくないというか、男らしい・・・???
とにかく私の好みではないので、変えたくて変えたくて仕方なかったので、今回カスタマイズしていきます!!

 

 

私が普段使っているタグはだいたいH1~H4くらいなので、それらを変更します。

 

まず、h1タグはこのサイトの12 ボーダーで囲む×アクセントを使用しました。

ただ、色を変えたいので、#6495EDに変えました。

 

H1タグはこんなかんじになりました。

次にH2タグです。
H2タグは同じく先ほどのサイトから 50.マーク#2 を使おうと思います。


先ほどのサイトでのカラーはグレーですが、background: rgba(150, 150, 150, .5);を#A4C6FFに、rgba(210, 210, 210, .5)を#D9E5FFに変更しました。

 

H2タグはこんなかんじになりました。

次にH3タグを変更します。
H3タグは 42.マーカーのような線を使用しました。

 


カラーは#bff1ffを選択しました。

H3タグはこんなかんじになりました。

最後にH4タグを変更します。
H4タグは滅多に使うことはないですが、使うとしたらシンプルめに仕上げたいので、 2.下ボーダー×先頭の文字大きく にしました。

 


これはそのまま使おうかと思いましたが、ボーダーの太さだけ、3pxに変更したいと思います。

 

H4タグはこんなかんじになりました。

 

変えるのはこんな感じです。
主にこちらのサイトを参考にして、タイトルタグのCSS編集を行いました。
少しずつ自分の好みのサイトが仕上がっていっております。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です