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

執筆者:

関連記事

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

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

Facebookの新しい楽しみ方

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 すっかり、Facebookから離れています。 週に1度くらい、パトロールすれば良い方でしょうか…。 自分宛のコメントやメッセージがないかを …

やっぱりアメブロがいいんですか?のお答え

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 すでにブログをやっている方からも、これからブログを始めたい、という方にからもよく訊かれるのがこの質問です。 「やっぱりアメブロがいいんです …

【アメブロカスタマイズ】ヘッダー画像変更とメニュー追加

ごきげんよう、CHIBICOふしみまいです。 最近、「デザイナー」の枠をひろげて、いろいろなお仕事をするようになっております。 バッグやアクセサリーのデザインに加えて、元々やっていたwebやDTPのデ …

超初心者向けお客の集まるブログの作り方#4 投稿テーマを決める

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 気づいたら、新年明けて相当経ってました。。。 ブログを始めたみなさま、続いていらっしゃいますか? 最初のうちはよかったけれど、続かない。。 …

CHIBICO.JP

スポンサーリンク

instagram

2018年2月
« 1月    
 1234
567891011
12131415161718
19202122232425
262728