お客様の声を枠で囲む方法のわかりやすい解説

● お客様の声を枠で囲む方法のわかりやすい解説

おはようございます、名村剛一です。

お客様の声を枠で囲む方法をお尋ねいただいたので、解説させていただきますね。

では、サンプルをご覧ください。

今日はありがとうございました。

デコ巻きずし初体験ですが、とても楽しめました。

先生が、とても面白くて、親しみやすかったです。

この枠囲みをするには、次のようにします。

まず、通常表示で、普通に文章を打ちます。

次にHTML表示にすると、次のようになっています。

文章の最初に枠を囲むためのＨＴＭＬを入力します。

<div style="border:2px dotted #FF00CC;padding:10px;">

このＨＴＭＬの意味は、こうです。

border 2pxというのは、囲み線の太さは２ピクセルです、dotted　は、点線です。
＃FF00CCはカラーコードで、今回はピンクを表しています。
最後のpadding:10pxというのは、枠線と文章の間に１０ピクセルの空きを設けるという意味です。
枠線と文章がくっついちゃうと、読みにくいですからね。

次に、どこまで囲むのかを示すHTMLを入れます。

それが、</div>です。

追加すると、次のようになります。
 

これで、通常表示に戻すと、囲みたい文章が枠で囲まれています。

僕の場合、<div style="border:2px dotted #FF00CC;padding:10px;">と入力するのが面倒なので、パソコンに単語登録しています。

よみを「かこみぴんく」にして、語句を「<div style="border:2px dotted　#FF00CC;padding:10px;">」にして、単語登録しておくんです。

そうすると、かこみぴんくと入力して、変換すると、上記のHTMLコードが表示されるので、覚える必要がありません。

ぜひ、やってみてくださいね。



 

基礎からアメブロをお仕事ブログに変える
ブログパーソナルサポート

名村剛一（なむら　こういち）

・　お仕事ブログの基礎を作るコツ（無料メール講座）

・　２ヶ月ゆったりサポートコース（おススメ）

・　１ヶ月重点項目改善コース

・　お問合せフォーム