文章の背景枠を設置する - 縦・横サイズ 自由自在 -

 

ブログの記事を書いていて
ある文章のひとかたまりを枠で囲いたい時があります。

 

 

書いている記事のなかで、ポイントとなる文章に枠を付けることで、
際立たせることができますし、見やすさが格段に上がります。

 

 

私がメンターとしている札幌のアフィリエイター・エンタメさんは、
読者やコンサル生からの質問に回答したメールを記事にしてブログに載せることで
読者全員にヒントや気づきを与えています。

 

エンタメさんは、その読者の質問と自身の回答の文面を
それぞれ枠で囲って、見やすく読みやすいスタイルにしているんです。

 

 

私もこれまで書いてきた記事のなかで
操作の手順などは、背景を灰色にした四角い枠をつけて書いたりしています。

 

 

この背景が灰色の枠は、シリウスにセットされているものです。

 

コチラ ↓ に準備されています。

 

 

  

 

 

他に、背景が色なし(通常枠)のものもあれば、点線枠もあります。

 

 

しかし、どの枠を選んでも
枠の 横幅 はというと、いつも 目一杯 なんです。 固定されているんですね。

 

もちろん、変ではないですし、いいと思います。

 

 

でも、

 

書いた文章が、横に短い場合は、
その文章を枠で囲むと、右側が結構、余ってしまうんですよ。

 

こんな感じで ↓

 

 

その手順ですが、

 

Excel の白紙ページは、格子状に線が引かれていますから
コレをまず線を取り除いた白い塗りつぶし状態にします。

 

 

そして、画像を貼り付けます。

 

そのあと、画像の上から文章を好きなように書きます。

 

もちろん、画像からはみ出てもぜんぜん大丈夫。

 

書き終えたら、その Excel のページをコピーしてペイントに貼り付け。

 

そして、範囲指定してトリミング(切り取り)すればOKです。

 

 

それをこのような枠にしたら ↓ どうでしょうか。

 

 

 

 その手順ですが、

 

 Excel の白紙ページは、格子状に線が引かれていますから
 コレをまず線を取り除いた白い塗りつぶし状態にします。

 

 

 そして、画像を貼り付けます。

 

 そのあと、画像の上から文章を好きなように書きます。

 

 もちろん、画像からはみ出てもぜんぜん大丈夫。

 

 書き終えたら、その Excel のページをコピーしてペイントに貼り付け。

 

 そして、範囲指定してトリミング(切り取り)すればOKです。

 

 

必要な部分だけに背景枠をつけた形です。

 

これは、シリウスに搭載されている機能では 出来ません

 

 

この場合、

 

指定するHTML構文は、以下となります。

 

ひとかたまりの範囲として定義する div タグで文面を挟みます。

 

 

<div style="background:#CCCCCC; width:450px; height:350px;">

 

 その手順ですが、

 

 Excel の白紙ページは、格子状に線が引かれていますから
 コレをまず線を取り除いた白い塗りつぶし状態にします。

 

 

 そして、画像を貼り付けます。

 

 そのあと、画像の上から文章を好きなように書きます。

 

 もちろん、画像からはみ出てもぜんぜん大丈夫。

 

 書き終えたら、その Excel のページをコピーしてペイントに貼り付け。

 

 そして、範囲指定してトリミング(切り取り)すればOKです。
</div>

 

 

 

 

背景色は、background で カラーコード を指定して
横 ( width ) と 縦 ( height ) の長さを決めてあげれば OK

 

どんなサイズの枠でも好きなように作ることができてしまいます。

 

 

これで、右側にスペースが空きましたから、
ちょっとした画像を載せたりすることもできますよね。

 

 

参考にしていただけると幸いです。

 

 

 

蛍光ペンって、黄色以外も出せますよ。

 

       ↓ ↓ ↓

 

蛍光ペン 黄色以外も使いたい

 



*-----------------------------------------------------------------------------------*

   最後までお読みいただき、ありがとうございます。
   記事が少しでも参考になれば幸いです。

                  ブログランキング・にほんブログ村へ