みずー工房

気ままライフを綴るブログです

トップ > ブログ開発記 > 【HTML】STYLEタグを記事内で利用する

【HTML】STYLEタグを記事内で利用する

ブログ開発記

記事内にスタイルシート(styleタグ)を埋め込む方法を紹介します。
はてなブログでstyleタグを埋め込むには、少し工夫が必要です。



styleタグは、スタイルシート(CSSなど)を埋め込むことができるタグです。
はてなブログでは「デザイン→カスタマイズ→デザインCSS」から、CSSを記述できますが、
この記事限定で使いたいデザインがあるなど、記事単位でCSSを記述したい時に有効です。
なおCSSについては、別途記事にする予定です。


記事にCSSを埋め込む

はてなブログでCSSを埋め込む場合は「はてな記法」 モードを利用することをおすすめします。
「見たまま」モードのHTMLは、勝手に修正されてしまうため思ったような動作にならない場合があります。
反対にPro限定編集モードの「HTML」モードでは、以下の制約を気にせず利用できると思います。(試せないのであしからず)

過去記事
編集モードについて、くわしくはこちら


制約

はてなブログでは、styleタグを通常のように利用できません(おそらくHTMLモードとの差別化のため)。
とはいえ、全く利用できないわけではありません。以下の制約を頭にいれておけば利用できます！

  • style内で何も文字のない行(空行・空白行)を作らない
  • styleタグに隣接するように別のタグを配置する


制約を守って実際に使ってみる

文字だけだとわかりずらいと思うので実際に使ってみましょう。
例えば、このようなスタイルを適用したいと思います。(CSS自体の説明は省略します)
もちろんですが、こちらのコードは制約を守っていないので正常に動作してくれません。

HTML 
<style>
.border {
    width: 100%;
    color: #888;
    
    border: solid 1px #777;
    padding: 5px;
    margin: 10px 0;
}
</style>

<div class="border-test">
CSSのテストです
</div>

ちなみに、このスタイルを正常に適用できると以下のように表示されます。

CSSのテストです


1つ目の制約

空行(空白行)が入ってしまっているので、取り除きます。
 空行がなくなって見にくくなる場合もあるので、CSSの編集自体はメモ帳などでやるといいと思います。
 以下みたいになると思います。

HTML 
<style>
.border {
    width: 100%;
    color: #888;
    border: solid 1px #777;
    padding: 5px;
    margin: 10px 0;
}
</style>

ちなみに空行があると、空行以降のスタイルが適用されなくなります。


2つ目の制約

styleタグの左隣に別のタグを書き込みます。
 タグはなんでも大丈夫と思いますが、spanタグやdivタグを使うと良いでしょう。
このように書き換えます。

HTML 
<span></span><style>
.border {
    width: 100%;
    color: #888;
    border: solid 1px #777;
    padding: 5px;
    margin: 10px 0;
}
</style>

囲ってしまってもOKです。

HTML 
<span><style>
.border {
    width: 100%;
    color: #888;
    border: solid 1px #777;
    padding: 5px;
    margin: 10px 0;
}
</style></span>

これでスタイルを適用できます。いろいろ試して使ってみましょう！

ヒント

コメントアウトは利用できない

CSSが非対応のブラウザに対して、非表示を目的としてコメントアウトする場合がありますが、
コメントアウトしてしまうとスタイルが利用できません。
非表示について回避方法があるわけではありませんが、コメントアウトは解除する必要があります。
HTML 
<span></span><style>
<!--
これは利用できないです
-->
</style>


おわりに

私の場合、記事限定の汎用性のないスタイルを利用したい時が結構あって、
デザインCSSに足すほどのものでもないという場合がよく出てきます。
デザインCSSがごちゃごちゃしちゃうの嫌なので。。。
 非常に便利なので、もし良ければ利用してみてください！