wordpress

WordPress スタイルシート編集の基本 見出しを変える 2



WordPress 見出しを変えたい

WordPressの既存テーマの見出しは、文字の大きさが変わるだけで、何の装飾もない、記事を書く前に「見出し」を変えようと、子テーマを作り、スタイルシートを編集しました。もちろん、子テーマを作らず、そのままスタイルシートを編集しても構いません。

WordPress デザイン変更とCSSの編集方法
子テーマの必要性と子テーマの作り方、編集について書いておきます。 スタイルシート(style.css)の編集-子テーマを使う WordPressのブログをもっと見やすく、もうす
One-Click Child Theme 子テーマをワンクリックで生成するプラグイン
One-Click Child Theme 「子テーマ」は、WordPressのテーマの機能やスタイルを引き継ぎつつカスタムするテーマです。つまり、スタイルを変えたい部分だけを子

見出しのタグセレクタは、h1~h6がありますが、まずh5の見出しを変えたいと思います。

WordPress クラス名を探す

私が使っているテーマTwentyTenのクラス名は「entry-content」です。テーマによってクラス名が違いますので、「F12」で探すか、ソースの中を「class」で検索してみてください。「Ctrl+F」ですぐに見つかると思います。(Ctrl+Fはページ内のキーワードを探すショートカットキーです。)

見出し

WordPress スタイルシートを編集する

.entry-content h5 { }で、h5のスタイルを記述します。h1のスタイルを記述したい場合はh5をh1と書いて下さい。{ }の中に色や大きさなどの情報を書いていきます。

私は子テーマを使っているので、子テーマのスタイルシートに書いています。既存のテーマ(親テーマ)をそのまま使う場合は、テーマのスタイルシートを同じように編集してください。

見出しの編集例

見出し

↓こんな感じになります。

見出し

なかなか可愛く出来上がりました。次は、影を付けたりしたいと思います。このリボンの見出しを応用したいと思います。

見出しの応用編

応用編はこちらです。

WordPress リボン風見出しのソースとその説明
CSSでリボン風見出しを作るWordPressの使い始めは、すこし大変です。かっこいい見出しを考えたり、文字の大きさを変えてみたり、いろいろ試してみてください。 簡単なリボン風見出
before疑似要素・after疑似要素とCSSで三角形を作る
CSSでの三角形の作り方とbefore疑似要素・after疑似要素前回、CSSの簡単な編集でリボン風見出しを作りましたが、今回は影を付けてみたり応用して行きたいと思います。その前に

 



2 thoughts on “WordPress スタイルシート編集の基本 見出しを変える

Comments are closed.