【アメブロカスタマイズ】告知用の枠を<P>タグで作る方法

Bookmark this on Google Bookmarks
Pocket
LINEで送る

ハンドメイド作家さんやサロネーゼのみなさま、アメブロでお仕事の告知をしていきたい女性起業家のみなさまに、カスタマイズ方法をお伝えするコーナー昨日の続きです♪
ごきげんよう、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が使えるところならほぼどこでも使えます

以上、いかがでしょうか?
これならできそうでしょうか?

それでも無理。。。だったらふしみにご依頼ください。近日中に簡単なメニュー表アップいたします。

色や枠線の変え方がちょっとむずかしいかもですが、それくらいはググりましょう!
もしくは、上のものをコピペしてそのまま使っちゃいましょう♪

Bookmark this on Google Bookmarks
Pocket
LINEで送る