Bloggerでブログを書いていると何となく寂しい感じがするので、標準的なHTML表記内に出来るだけ「style」形式でまとめました。
CSS形式は一般的にはCSSファイルを何処かに置くか、＜HEAD＞．．．．．＜/HEAD＞内に挿入する必要がありますが、今回はページ毎に簡単に変更してちょっとだけ格好良くすることを目的にしました。
「小枝」と「小技」の漢字は似ています(笑)
HTML表記をコピーして「HTML」画面に変更してプレーン文字で貼り付け、後は「作成」画面で文字の変更をするだけでOKです。色の変更は以下のアドレスで色を確認してください。
色を変えるときは「WEB色見本 原色大辞典」 http://www.colordic.org/
少し目立つ区切りの直線を使ってみる
<HR style="border-color:auto; height:5px;">
<HR style="border:groove 5px; ">
<HR style="border:ridge 5px;">
見出し用区切りを使ってみる
ここに文字を入力
<div style="margin-left:auto; margin-right:auto;padding:10px; border-left:30px solid gray; border-bottom:4px solid gray;">
ここに文字を入力
</div>
文字を二重線で囲ってみる
ここに文字を入力
<div style="text-align:center;margin-left:auto;margin-right:auto;padding: 15px; border: 5px double gray; ">
ここに文字を入力
</div>
ここに文字を入力(80%)
<div style="border: 5px double gray; margin-left: auto; margin-right: auto; padding: 15px; text-align: center; width:80%;">
ここに文字を入力(80%)
</div>
文字を二重線(スマホは１個並び)で囲って表を作ってみる
ここに文字を入力(300px)
ここに文字を入力(300px)
ここに文字を入力(300px)
ここに文字を入力(300px)
ここに文字を入力(300px)
ここに文字を入力(300px)
widthを300pxにしたのはスマホ対策です。スマホのブラウザーは大体300~320pxが標準なので、改行されて1個並びになります。
<div style="background-color:khaki; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
<div style="background-color:wheat; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
<div style="background-color:khaki; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
<div style="background-color:wheat; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
<div style="background-color:khaki; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
<div style="background-color:wheat; width:300px; display:inline-block; text-align:left;margin-left:auto;margin-right:auto;padding: 5px; border: 4px double white">
ここに文字を入力(300px)
</div>
段落(リストの有無)で綺麗にリスト化してみる
リスト(ここでは2番開始)
- 横浜
- 神戸
- 料理1
- 料理2
- 長崎
- 料理a
- 料理b
- 横浜
- 神戸
- 料理1
- 料理2
- 長崎
- 料理a
- 料理b
HTMLで段落を作らなくても普通にスペース挿入でもOKなんですが、ちょっと試して見ました、便利かどうか(笑)
<p>リスト(ここでは2番開始)</p>
<ol start = "2">
<li>横浜</li>
<li>神戸
<ol type = 'I'>
<li>料理1</li>
<li>料理2</li>
</ol>
</li>
<li>長崎
<ol type = 'a'>
<li>料理a</li>
<li>料理b</li>
</ol>
</ol>
<p>リストなし</p>
<ul>
<li>横浜</li>
<li>神戸
<ul>
<li>料理1</li>
<li>料理2</li>
</ul>
</li>
<li>長崎
<ul>
<li>料理a</li>
<li>料理b</li>
</ul>
</ul>
<br>
いつもすぐにHTML構文は忘れちゃうので、これで少しは時間節約できるかな？(笑)
これぐらいのデザイン的なレイアウト追加だけでも、結構、様になったブログ画面が出来上がると思います。
また、ブロガーの「作成画面」と「実際の画面」では、特に文字はCSSファイルで指定されているらしくリンクすると色指定が上手く出来ないので確認しましょう。
＞＞『Blogger用テーマ変更の小技集』ページへ
