CSS 記事によってCSSを変えてみる・・ | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS 記事によってCSSを変えてみる・・

前回紹介した記事によってCSSを変えてヘッダーや背景を変更する方法です


見本です

http://hama-sush-jp.pro/plan-note/entry-10178214989.html
http://hama-sush-jp.pro/plan-note/entry-10178217662.html
http://hama-sush-jp.pro/plan-note/entry-10178217998.html
http://hama-sush-jp.pro/plan-note/entry-10461103072.html

同じブログなのに記事によってヘッダーや背景が違います


やり方は・・

タグ編集エディタを使って記事を書きます

記事を書き終わったら・・

一番上にCSSを入れちゃいます

書き方はルームのフリースペースに書く時と同じです・・


<style type="text/css">ここにCSSを書きます</style>


タグ編集エディタを使う場合はルームと同様に改行はNGです


たとえば・・・

ヘッダーを変える場合は・・

<style type="text/css">#header {background-image:url(画像のURL);}</style>
※場合によっては<style type="text/css">#header {background: url(画像のURL);}</style>の方がいい場合もあります


背景を変える場合は・・

<style type="text/css">body{background-image:url(画像のURL);}</style>
※場合によっては<style type="text/css">body{background: url(画像のURL);}</style>
の方がいい場合もあります


ヘッダーも背景も変更する場合は・・

<style type="text/css">#header {background-image:url(画像のURL);}body{background-image:url(画像のURL);}</style>


もちろんそれ以外でも大丈夫です・・

特別な記事の背景に画像を設定したりだとか(工夫が必要になります)カーソルを変更したりとか・・

いろいろ試してください・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


標準エディタでも書くことは出来ます・・が

標準エディタなら改行はOKですからCSSを多く設定する場合は見やすいので楽なんですが・・が

下の注意でも書いているように

タグの非表示にするたびにCSSは消えちゃいますので

記事をアップしたら絶対に編集しなおさない!って場合だけ使ってください


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!




記念日や特別な日の記事だけチョット変えてみたい・・って~場合に使ってください





注意  注意! 注意


標準エディタで記事を書いてCSSを貼り付けた場合・・

HTMLタグを表示したままで「全員に公開」します

一度でもタグの非表示にするとCSS部分は消えてしまいます

なので・・記事の編集をするたびにCSSを書き加える必要があります


見本の記事は標準エディタを使っています

なので・・ソースを見るとCSSは改行しています

この場合・・記事を編集したい場合は・・

ソースを表示してCSSの部分をコピーしてから記事の編集をしないと

どんなCSSを設定したか忘れちゃっている場合元に戻せなくなります
なので・・コレをやる場合はタグ編集エディタをお薦めします



1ページに3記事以上表示している場合

古い記事に書かれているCSSが有効になります

頻繁に使いたい場合は1ページ1記事表示にしたほうがいいです



3カラムのスキンで右サイドバーにフリープラグインが配置してあってCSSが書かれている場合

記事に書いたCSSよりフリープラグインに書かれているCSSが優先します

記事でヘッダーを変更しても・・

フリープラグインでランダムヘッドなどをやっている場合はそちらが優先されます

その場合はフリープラグインを右サイドに移すか・・

記事に書くCSSに !important を使って最優先にします




↓コチラを使われている場合は動作しません

JavaScript 記事下に定型文を自動挿入してみる

その場合は↓コチラなら大丈夫ですので変更下さい

JavaScript 記事下に定型文を自動挿入してみる2