ハンドメイド作家さんやサロネーゼのみなさま、アメブロでお仕事の告知をしていきたい女性起業家のみなさまに、カスタマイズ方法をお伝えするコーナー昨日の続きです♪
ごきげんよう、CHIBICOふしみまいです。
昨日はブログに使われているデザインのCSSごと書き換えて枠を飾る方法をお伝えしました。
でも、
- それでは難しすぎるー！
- CSSを下手にいじってレイアウト崩れたらどうしよう
- 今のブログデザインを使い続けたい
という方に、もっと簡単な方法をお伝えします。
<p>タグに直接要素を書き込んで枠を作る方法です
<p>タグのPは、パラグラフのP、段落を表すタグのことです。
この<p>タグに直接装飾の要素を書き込んで、ひと段落まるごと飾ってしまうのです。
やりかたは、記事を書く時に枠の中に入れたい文章を<p></p>で囲むだけ。
その<p>タグをあれこれ装飾して枠を飾ります。
装飾要素を勉強するのは大変ですから、下の例を参考に、タグ部分をまるまるコピーして貼ってみてください。
「ここに書きたいこと書く」の部分を書き換えていただければ使えます。
こちらももちろん、HTML表示で作業するのをわすれずに！
とりあえず線だけで囲みます。背景に色のあるスタイルをお使いなら、枠内が白く塗られます。↓
<p style=”background-color: #FFFFFF; border: 1px solid #999999; padding: 10px;”>ここに書きたいこと書く。</p>
ここに書きたいこと書く。
CHIBICOカラー。背景を薄いグリーン、線を濃いグリーンの破線に↓
<p style=”background-color: #f6fde8; border: 2px dotted #66cc00; padding: 10px;”>ここに書きたいこと書く。</p>
ここに書きたいこと書く。
黄色系。線を太く、余白を広くしました。↓
<p style=”background-color: #ffffcc; border: 3px dotted #FF9900; padding: 20px;”>ここに書きたいこと書く。</p>
ここに書きたいこと書く。
注意とか警告用、赤の点線。↓
<p style=”background-color: #FFFFFF; border: 5px dotted #FF0000; padding: 20px;”>ここに書きたいこと書く。</p>
ここに書きたいこと書く。
- 枠の幅は、それぞれのブログの幅に合わせて変化します
- アメブロでなくても使えます
- むしろ、HTMLが使えるところならほぼどこでも使えます
以上、いかがでしょうか？
これならできそうでしょうか？
それでも無理。。。だったらふしみにご依頼ください。近日中に簡単なメニュー表アップいたします。
色や枠線の変え方がちょっとむずかしいかもですが、それくらいはググりましょう！
もしくは、上のものをコピペしてそのまま使っちゃいましょう♪
