記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

こんにちは、NEOです。記事をご覧いただきましてありがとうございます。

 

ブログのデザインをカスタマイズしていると、

 

「記事別にCSSを反映したい!」

 

と思うことがあります。

 

ですので、今回は、記事別にCSSを反映できるWordPressプラグイン「add-css-to-post」をご紹介します。

 

Sponsored Link

 

「add-css-to-post」のダウンロード

1. かちびと.netにアクセスして、記事の下にあるZIPファイルをダウンロードしてください。

 

※ZIPファイルアイコンをクリックすると、ダウンロードできます。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

「add-css-to-post」のアップロード

1. WordPressの管理画面にログインして、[プラグイン]→[新規追加]をクリックしてください。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

2. [プラグインを追加]画面が表示されましたら、[プラグインのアップロード]をクリックしてください。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

3. [ファイルを選択]ボタンをクリックしてください。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

4. ダウンロードした「add-css-to-post.zip」を選択して、[開く]ボタンをクリックしてください。

 

5. [今すぐインストール]ボタンをクリックしてください。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

6. インストールが完了しましたら、[プラグインを有効化]をクリックしてください。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

Sponsored Link

 

「add-css-to-post」の使い方

記事の投稿画面と固定ページの投稿画面の下に、[add CSS]というフォームが表示されるようになりました。

 

こちらに記載したCSSは、この記事だけに反映されます。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

CSS反映例

例えば、あるWordpressテーマを使用している場合、h2タグ(見出し2)は以下のように装飾されます。

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

この時、[add CSS]フォームに以下のCSSを記述すると、

 

h2{
	padding: 0.5em;
	color: #ffffff;
	font-weight: bold;
	background-color: #2133db;
	border-bottom: 4px solid #ffea00;
}

 

この記事のh2タグのみ、こういった見え方に変わります。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

[add CSS]フォームが表示されていない場合

[add CSS]フォームが表示されていない場合は、記事の投稿画面(固定ページの投稿画面)右上の[表示オプション]→[add CSS]にチェックを入れてください。

 

この設定は、記事の投稿画面と固定ページの投稿画面にそれぞれ行う必要があります。

 

記事別にCSSを反映するWordPressプラグイン「add-css-to-post」

 

まとめ

今回ご紹介したプラグイン「add-css-to-post」を使用すれば、とても簡単に記事別にCSSを反映することができます。

 

ですので、CSSに馴染みのない方はもちろんのこと、スタイルシート(CSSファイル)に記載するか迷うような些細な内容を反映させたい場合にも活躍してくれます。

 

 

この記事が少しでもあなたのお役に立てれば幸いです。

 

ご不明な点などございましたら、いつでもお問い合わせくださいね。

この記事を読んだ方は、こちらも読んでいます。

Sponsored Link

 

コメントを残す

ページトップへ