記事内の一部の文章を枠で囲み、記事にメリハリを出す方法(エディタ編) | アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザイン

長い文章を書く場合に、文字数が多くなって強調したい部分が分かりづらかったり、
メリハリがなく読者が読みづらかったりします。

そこで、画像を挟んだりするのもメリハリを出すには良い方法ですが、
大切で読んで欲しい文章や、強調したい文章を枠で囲ったりするのも、
メリハリを出し、読者を飽きさせない良い方法ですァゲァゲ

CSSに書く方法もありますが、今回はエディタに直接タグを書く方法を説明しますね。


【エディタ貼り付け用タグ】

チェックグレー実線枠+白色背景 の場合

<p style="background-color:#FFFFFF;border:1px solid #999999;padding:5px;">こちらに文章が入ります。</p>


チェックグレー点線枠+水色背景 の場合

<p style="background-color:#E3F2FB;border:1px dotted #CCCCCC;padding:5px;">こちらに文章が入ります。</p>


チェックピンク破線枠+ピンク背景 の場合

<p style="background-color:#FFE2E8;border:1px dotted #FF99CC;padding:5px;">こちらに文章が入ります。</p>



![タグの説明]
分かりやすいようにタグを分解して説明します。

<p style="
background-color:#FFFFFF; /* 背景色 */
border:1px solid #999999; /* 線の太さ 線の種類 線の色 */
padding:5px; /* 枠と文字の隙間 */
">
こちらに文章が入ります。
</p>



![標準エディタ使用の場合の貼り付け方]
標準エディタの下部にある [HTMLタグを表示] タブに切り替えて、貼り付けてください。
標準エディタ


!枠を囲む際に、<blockquote></blockquote> を使う方がいらっしゃいますが、
こちらは 引用文専用タグ ですので、引用以外はできるだけ使用しないようにしましょう。

 

アメブロをカスタマイズ 魅せるブログデザインを作ろう!アメブロのカスタマイズ本を出版しました!

[ 出版キャンペーン ] をおこないます!
9月16日(木)~9月17日(金)


たくさんの特典をご用意しておりますので、振ってご参加ください♪

やじるし「アメブロでカスタマイズ 魅せるブログデザインを作ろう!」詳細
やじるしAmazonでのご購入はこちら