個別記事のCSS編集 / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

個別記事のCSS編集

            

FC2ブログを始めるに当たり、制作屋としての観点からテンプレートや記事の装飾の仕方を色々と模索し、皆さんに紹介していきたいと思います。

まずはその第1回。



個別の記事をスタイルシートにて装飾したいとき、どうしますか?
一番ポピュラーなのは、HTMLタグに直接スタイルを書き込む方法でしょうか。

クラスを指定して、『テンプレートの設定』→『スタイルシート編集』でCSSを追加する方も多いでしょう。

ただ、僕的には面倒くさい。
いま記事を書いているのに、いったん止めてまた設定を開き直さなくてはいけないし、CSSの中身も膨張する一方でしょ?

まぁ基本的にはそれしか方法が無いので、仕方ないんですけど。


というわけで基本的ではない方法、いわゆるタブーを侵してみます。

記事の中にCSSを書いちゃいました。
つまり、<BODY>の中に直接CSSを書いちゃいました。


↓これが、この記事の中に隠されているスタイルシートだ!


<style type="text/css">.geo {font: 17px Georgia; margin:0.5em; color:magenta; } .cur {font: 17px cursive; margin:0.5em; color:blue; }
</style>

※どうやらスタイルの記述は改行せずに横一線に書かないと効かないみたいです。

もちろん全ての記事に共通のスタイルなら話は別だが、今回しか使わないスタイルなら、あえてこんな方法もありかな~なんて・・・

で何をしたかというと、ただフォントを変更しただけです。

↓このようにクラスを指定しました。

<span class="geo">01.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">02.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">03.</span>Georgia<a href="https://www.google.co.jp/">フォント</a>
<span class="geo">04.</span>Georgiaフォント
<span class="geo">05.</span>Georgiaフォント
<span class="geo">06.</span>Georgiaフォント
<span class="geo">07.</span>Georgiaフォント

↓ちゃんと書いたらこうなりました。


01.Georgiaフォント
02.Georgiaフォント
03.Georgiaフォント
04.Georgiaフォント
05.Georgiaフォント
06.Georgiaフォント
07.Georgiaフォント


01.cursiveフォント
02.cursiveフォント
03.cursiveフォント
04.cursiveフォント
05.cursiveフォント
06.cursiveフォント

リンクを付けてるのは単なるお遊びですので、お気になさらないでね!

まぁこんなやり方はまさに邪道ですので、くれぐれも真似しないで下さいと切に願います。

Don't Try This at Home!
関連記事
スポンサーサイト

コメント

[コメント記入欄はこちら]

コメントの投稿

非公開コメント

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。