子テーマをインストールして、CSSでhタグを装飾しよう♫

まずは子テーマのインストール

これ、別に親テーマというか、本体そのもののソースに手を付けても良いんだろうけど、更新すると上書きされて、戻っちゃうらしいので、避ける事が賢明との事です。

そして、ここで使ってるライトニングの場合は、外観>カスタマイズ追加CSSを使うって方法もあるんだけど、表示面積が小さいのと優先順位の都合なのか思うように反映されない事が有ったので、前々から躊躇していた子テーマをインストールする事にしました。

子テーマのインストールは、予想外に簡単すぎて、なんでもっと早くにしなかったんだろうと、ちと後悔しちゃいました(笑)

手順としては、公式サイトから、子テーマを任意のフォルダーにダウンロード。ワードプレスの外観>テーマ>新規>テーマのアップロードへzipファイルのままドラッグするだけ。

インストール出来たら、有効化しちゃいましょう。それだけで自動的に適用されちゃうようです。

子テーマって画像無く、child theme って書いてるだけなので何となく怪しげにも見えるんだけど、間違ってないので、エイッ!って有効化しちゃいましたw

こんなに簡単なら、本当、もっと早くやってれば、かなり安心感たっぷりで色々カスタマイズしてたでしょうね(^^ゞ

目指すはhタグの装飾

とは言っても、やりたかった事はhタグの装飾、ワードプレス的には見出しの飾り・表示方法を変えちゃおうって感じですね。

まずは標準の見出しをlightning公式ページでご参照あれ。色に関しては、外観>カスタマイズ>lightningデザイン設定の「キーカラー」が適用されるんだけど様式と言うか、みかけは色が違うだけ、これを標準と違うものにする事で、少しだけ他と違うオリジナリティが出ると自己満足たっぷりの仕様になります。

hタグの装飾はCSSだけで可能なので、実際に触る手順は、ネット上に色々と置いてくれてるソースをコピペするだけ。と言えば簡単すぎるかな(^^ゞ

とりあえず、「hタグ CSS ワードプレス」辺りで検索してみて下さい。これでもかってくらい出て来ます。その中から気に入った装飾のソースをコピーして、ワードプレスのダッシュボードから、外観>テーマの編集、子テーマのスタイルシートが表示されてるはず(違うファイルが表示されてたら、style.cssを開けて下さい。)なので、そこにペーストする。

そのままだと色が違うはずなので、自分のサイトのキーカラーの色番号をコピーして、ペーストペーストしちゃいましょう。

ま、装飾によっては、キーカラーばっかりじゃ無く、近似色とかでアクセント付けてるのもあるけど、そこは、どの色が、どこの色なのかは、トライ&エラーで頑張って下さい(笑)

そんな感じで進めるとして、最初は、あんまり長いCSSは避けて、短いソースの方が判りやすいでしょうね。慣れてくればソース自体の意味も何となく解ってくるので、長く複雑なものでも何とかなってきます。またソース置いてくれてるサイトによっては詳しく解説付けてくれてるとこもありますので、そこは自己責任というか、好みでどうぞ。

ちなみに、ワードプレスでは、<h1>は記事タイトルになってるようなので、触るのは<h2>以降が良いんじゃ無いかと思います。

このサイトで変更したのと他サイトで遊ばせてもらったのをいくつか画像で貼り付けときます。

まず、これなんだけど、上端の一本線は標準のスタイルが残ってるみたいなんだけど、これはこれで良しとしちゃってます。追求するのが面倒臭いと言う。

 

 

これのポイントは後ろの部分です。ここね(?)↓ ↓

 

 

これ、なんか格好良く無いですか?ぶっちゃけなかなか思うように色変えられなかったんですけど、でも、まあ、それはそれで良い感じで気に入ってます♫

 

 

これなんか、めちゃくちゃ可愛くないですか?元々は◇の部分が微妙に近似色だったんですが全部同じ色にしちゃってます(^^ゞ

 

 

最後、これ、このサイトで使ってる<h2>と同じソースで、本来はこの表示が正解だと思います(笑)

 

てな事で、<h2>に関しては、ワードプレスの仕様なのか、ライトニングのテーマの問題なのか、多少思うようにいかないのが正直なところですが、まあ、それでも、それはそれなりに良い感じで、自己満足感はたっぷり満たされてたりします。

ちなみに、このサイトでは、ページ移動する時に少し表示がフェードインするような事もやってみてます。ウザく感じない程度で気付いてもらえる時間て難しいですね・・。

業務内容

*離婚の相談について
*労働の相談について
*家計費削減コーチについて
*webの活用・制作について


上記4つの相談業務を主としています。
上記に関する講演・講座等開催の支援も承ります。
お気軽にお問合せ下さいませ。

子テーマをインストールして、CSSでhタグを装飾しよう♫” に対して1件のコメントがあります。

この投稿はコメントできません。