CHIBICO.JP by May Fushimi

デザイナーふしみまいの好奇心を書き散らしております

WEB&DTP

【アメブロカスタマイズ】告知用の枠を<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で送る

-WEB&DTP

執筆者:

関連記事

カプチーノ様セクシーショット

個人のためのSEO対策、具体的な方法【内側から1】

カプ様セクシーショット ※こちらで説明するのは個人&初心者向けの内容です。企業サイトや大規模サイトではもっと複雑に分析して対策します。 ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 ひ …

インターネットに自分の写真を載せるのは危険!?

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 先日、久しぶりにセミナーというものに出席いたしました。 とっても意義ある内容で、早速ブログの内容など変更したり、いろいろと工夫をはじめてい …

子猫に浮気写真

WEBの知識なんかなくてもSEO対策できるブログの作り方

子猫に浮気してきました 妹が飼い始めた、まだ小さな子猫まゆ八ちゃん。かわいい。。。 うちの猫たちにバレないように昼間のうちに浮気してきました。 ごきげんよう、CHIBICO.JP(チビコ)ふしみまいで …

【ブログ診断】船橋の似顔絵屋さんSmileWorks[2]

ごきげんよう、CHIBICOふしみまいです。 前回、SmileWorksさんの始めたばかりのブログにアドバイスさせていただいたお話をしました。 その続きです。 現在のブログの様子はこちら↓ 一つ前の記 …

集客に効果を発揮するピアノ教室のフライヤー

ごきげんよう、ふしみまいです。 最近あまりお仕事の記事をあげていませんが、お仕事しています。 お仕事している時ほどブログがくだらない楽しいことでいっぱいになる傾向がありますね、わたくし。忙しいので新規 …

CHIBICO.JP

スポンサーリンク

instagram

2017年11月
« 10月    
 12345
6789101112
13141516171819
20212223242526
27282930