【WordPress】Simplicity2の「記事を読む」ボタンをCSSでカスタマイズ~コピペ対応

【WordPress】Simplicity2の「記事を読む」ボタンをCSSでカスタマイズ~コピペ対応

WordPressのテーマであるSimplicity2の「記事を読む」をボタン化してCSSでカスタマイズする方法を紹介します。

Simplicity2をカスタマイズしていくと止まらないですよね。初心者でも簡単にできますので試してみて下さい。

 

Simplicity2のダウンロード

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

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

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

Simplicity2をダウンロード

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

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

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


 

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

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

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

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

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

 

記事を読むのCSSをコピペする

それでは、見本を参考にCSSをコピーして貼り付けてみましょう。

貼り付けるファイルは子テーマの「style.css」にして下さいね。

まずは、見本を見て下さい。以下のように「記事を読む」のボタンが作成されます。

関連記事にも「記事を読む」ボタンが表示されますので、そちらも同じデザインになるようにしました。

必要なければ、下の(関連記事)を削除して下さい。

 

 他にも以下の記事が読まれています

参考【WordPress】Simplicity2の見出しをCSSでカスタマイズ
参考【WordPress】Simplicity2に目次を入れてCSSカスタマイズ
参考【WordPress】Simplicity2のサイドバー見出しのカスタマイズ-CSSコピペ

 

まとめ

Simplicity2を少しでも自分のカラーに染めていくためにCSSでカスタマイズすることはいいことだと思います。

人と差を付ける意味でも興味があればどんどんカスタマイズしていきましょう。

 

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

Simplicity2カテゴリの最新記事