あまり活用の場がない無駄知識をあなたに。
訳あってよそ様のWordpressで執筆することがありました。どうしても個別の記事だけCSSを適用される必要があったのですが、投稿権限のみで、プラグインやFTPからいじることでもできず、どうにかCSSを当てられないかと考えていました。（通常は個別にCSSを適用させるプラグインや、wordpressのstyle.cssを触ればすぐにできるのですが）
Javascript(jQuery)をインラインで記述してCSSを当てる
あたりまえですが、Javascriptでcssを追加、削除、変更などの操作ができます。javascriptの記述は
- 外部ファイルを読み込み
- headerのscriptタグに記載
- 要素に直接書く
推奨されてはいませんが、要素にインラインでJavascriptを書いても動きます。
投稿画面でテキストエディタを開き、最下部にscriptタグをいれて記述します。
|
1 2 3 |
<script>// <![CDATA[ // ]]></script> |
jQueryでのcssの操作方法
今回はjQueryが動くwordpressだったので、jQueryで記述してきます。
|
1 2 3 4 |
/* ひとつだけcssを適用させる */ $('p.hoge').css('color','#ffffff'); /* 複数のcssを適用させる */ $('p.hoge').css({'font-size':'26px','line-height':'2'}); |
こんな感じで要素に対してcssを付け加えることができます。
ほかにも下記のような操作もできます。
要素を消す
|
1 |
$('p.hoge').remove(); |
hogeクラスがついたpタグが消えます。hideでも消えますが、hideとremoveの違いがいまいち分からず……。
違うテキストを表示させる
|
1 |
$('p.hoge').text('yourmom'); |
hogeクラスがついたpタグの中身がyourmomに変わります。
ではでは。
