CSS編集可能デザインでオリジナルデザイン(独自の飾りつけ)をしても、スマホでは反映されません。本文にCSSを埋め込むことで解決します。
CSSを記事に埋め込む
style属性でCSSを書き込む
手順
①「HTML表示」をクリックします。
② 本文中のCSSスタイルを与えたいタグ部分に
HTML
<p style="～ # CSSを記述する ">
～ # 内容
</p>
style属性でCSSを記述します。
例
青色の枠線で囲む場合を示します。マージンとパディングも指定しています。
HTML
<div style="border: 1px solid blue; margin: 0.5em; padding: 0.5em;">
<p>青色の枠線で本文を囲みたい。</p>
</div>
表示
青色の枠線で本文を囲みたい。
CSS領域を作る
手順
①「HTML表示」をクリックします。
② 本文中の一番最後に
HTML
<p>～</p>
<p><style type="text/css">
～ # CSSを記述する
</style></p>
styleのtype属性でtext/cssを指定して追加します。
style="" では実現できなかった background-image などのurl関数を使うCSSプロパティも利用することができるようになります。
例
３色の枠線を描くCSSを埋め込む場合を示します。
CSS
<p>
<style type="text/css">
.border-green {
border: #0a0 solid 1px; padding: 0.5em; margin: 0.5em;
}
.border-blue {
border: #0af solid 1px; padding: 0.5em; margin: 0.5em;
}
.border-gray {
border: #aaa solid 1px; padding: 0.5em; margin: 0.5em;
}
</style>
</p>
<style type="text/css">
.border-green {
border: #0a0 solid 1px; padding: 0.5em; margin: 0.5em;
}
.border-blue {
border: #0af solid 1px; padding: 0.5em; margin: 0.5em;
}
.border-gray {
border: #aaa solid 1px; padding: 0.5em; margin: 0.5em;
}
</style>
</p>
本文からの呼び出し
HTML表示画面で、緑色の枠を呼び出すには下の様に記述します。
HTML
<div class="border-green">
<p>緑色の枠線で本文を囲みたい。</p>
</div>
表示
緑色の枠線で本文を囲みたい。
なお、記述したHTMLは、ブログのエディット機能により整形されますが、動作に問題はありません。
