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

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

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

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

 

 

  

 

 

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

 

 

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

 

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

 

 

でも、

 

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

 

こんな感じで ↓

 

 

その手順ですが、

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

 

 その手順ですが、

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

この場合、

 

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

 

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

 

 

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

 

 その手順ですが、

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

 

 

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

 

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

 

 

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

 

 

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

 

 

 

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

 

       ↓ ↓ ↓

 

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

 



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

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

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

関連ページ

電光掲示板の文字配置について
電光掲示板のメッセージって、誰でも足を止めてでも見入ってしまいますよね。文字が横や縦に流れているから否応にも目につき、目を離してしまうと何のメッセージだかわからなくなってしまう。そんなメッセージの設置をあなたのサイトやブログに設置しませんか?
HTML構文をそのまま記事として載せるためには・・・
HTML構文をブログやメルマガ上で紹介している人なんて、まずいませんが、もし、紹介する場合、構文をそのまま書いてもサイトに反映されるのはHTMLの結果であり、構文が反映されるわけではありません。では、どうすればHTMLの構文をそのままサイトに出すことができるのか? それは < > だけをいじくればOK。 その方法とは・・・
点滅 - イヤでも人の目を奪う文字装飾 -
チカチカ・・・・ピコンピコン・・・・ウルトラマンのカラータイマーじゃありませんが、「点滅」って、どうしても目がいってしまいますよね。あなたのブログやホームページで「点滅」させてみたい!というメッセージがあったら、ここでご紹介する仕掛けを試してみてください。
電光掲示板 - 流れるメッセージをあなたのサイトに -
あなたのブログやホームページに、これは見逃してほしくない!という大事なメッセージあると思います。そのようなメッセージは、どのようにして目立つようにしていますか?蛍光ペンやマーク・目印をつけたり、様々な表現方法がありますが、電光掲示板タイプはいかがでしょう。その仕掛けはこちら。
ブログに貼ったリンクをピョコピョコ動かす方法
ネットサーフィンして、いろいろなサイトを見ていると ありますよね。文字や画像がピョコピョコっと動くやつ。マウスのカーソルを合わせたときにです。それはリンクなんですが、動いたりすると、ついついクリックしたくなりますよね。 その仕掛けをご紹介します。
サイトの内窓、外窓って何?
ブログやホームページを閲覧中、そこに貼り付いているリンクをクリック。そして、そのリンクの画面を見終わったから 閉じようとXボタンをクリック。そのとき 「あっ!」 それまで見ていたブログ、ホームページまで閉じちゃったぁ〜という経験ないですか?ありますよね? そうならない手があるんです。こちらを。 こんな経験ないですか?
改行したのに改行してくれない理由
「あれ?改行したのに何で改行されてないの?」 テキスト入力エリアに文章を打ち込んだときにそう思ったことありませんか? その理由は、そこの入力エリアがHTML構文モードになっているからなんです。 え!?あのゴチャゴチャした記号と英字をいれなきゃいけないってこと? いや大丈夫です。

 
トップページ プロフィール 目次 オススメ 商品 メルマガ SNS お問い合わせ