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

執筆者:

関連記事

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

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

facebookでやたら招待を送ってくる迷惑な人、フレンドを外さずに招待だけブロックする方法

ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 こちら、私的ブログで書いてたことの再掲です。友人と飲んだりしていてよく話題に上がるので、facebookの便利な使い方の設定方法をご紹介。 …

セクシーカプ様

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

あられもないお姿のカプ様 先日のカプ様写真がなぜか好評だったので、さらに過激なお姿のカプ様写真を無駄に載せてみました。 ごきげんよう、CHIBICO.JP(チビコ)ふしみまいです。 写真と本文はびっく …

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

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

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

no image

LionからYosemiteにするかしないか、adobe先生に選択をせまられている件

本日はわたくしのお悩み相談です。 CHIBICOふしみまいです。気づけばMacユーザー歴も15年以上経ってました。 adobeからですね、次のCCメジャーアップデートではYosemite以降が必須だよ …

CHIBICO.JP

スポンサーリンク

instagram

2017年9月
« 7月    
 123
45678910
11121314151617
18192021222324
252627282930