【WordPress】Simplicity2のサイドバー見出しのカスタマイズ-CSSコピペ

【WordPress】Simplicity2のサイドバー見出しのカスタマイズ-CSSコピペ

人気のWordPressのテーマであるSimplicity2のサイドバー見出しをCSSでカスタマイズする方法をご紹介します。

そのまま使っても全然カッコいいのですが、自分好みにされたい方のために記事にしておきます。

初心者の方でも簡単にできますのでご覧ください。

 

Simplicity2のダウンロード

親テーマと子テーマをダウンロード

Simplicity2のダウンロードは以下で行います。

Simplicity2のテーマを使う場合は、必ず子テーマも一緒にダウンロードして下さい。

Simplicity2をダウンロード

子テーマをダウンロードする理由

別の記事でも書いていますが、親テーマのスタイルシート「style.css」にカスタマイズしていると、親テーマがバージョンアップされた場合は、今までのカスタマイズが全て水の泡になってしまいます。

そこで親テーマがバージョンアップされても、カスタマイズの内容を残すために子テーマの「style.css」を使います。

 

子テーマのスタイルシートをカスタマイズ

見出しのデザインなどテーマデザインのカスタマイズは、子テーマの「style.css」を使います。

子テーマの「style.css」を開く

ダッシュボードから「テーマの編集」へ進みます。

そこで「Simplicity2 child」を選択してスタイルシートを書いていきます。

 

サイドバー見出しのCSSをコピペする

それでは、見本をもとにCSSをコピペしてみましょう。

 左枠のみ丸みをもたせた見出し

 左上と右下のみ丸みをもたせた見出し

 

その他の見出しを探したい場合は、以下にサンプルを掲載しています。

参考ブログのシンプルな見出し用CSSサンプル-コピペで貼り付け
参考ブログの囲い枠の見出し用CSSサンプル-コピペで貼り付け
参考ブログのおしゃれな見出し用CSSサンプル-コピペで貼り付け

 

動画で見る

まとめ

上記のCSSでサイドバーの見出しを自由自在にカスタマイズできます。

興味がある方は参考にして下さい。

 

この記事が気に入ったら
いいね ! しよう

Simplicity2カテゴリの最新記事