FC2ブログ

毎日更新!LuckyDuckyDiary

いらっしゃいませ。毎朝6時には更新します。さっくり読んでいってください。コメントくださった方はリンクさせてください、相互リンク歓迎、リンクがダメな方は連絡お願いします。

ブログに、線で囲んだ文章や、写真をいれるには。

基本編

----------ここから
<div style="border-style: dashed; border-width: 2px; margin: 0px; padding: 15px; background-color: none; border-color: green; color: blue ; font-size: 80%; width: 90%; border-radius: 6px;">テキスト</div>
----------ここまで

この線の間の文章をコピーして、パソコンの、ワードパッドや、メモ帳に右クリックで貼り付け。
そのあと、「<」と「>」を半角に変える。(前準備終了)

自分の好きな枠に変えるには…。いろいろな数字や、文字を変えてみる。

border-style: dashed; この、dashedの部分を、「dotted」にすると、枠が丸い点が連なった線に、「solid」にすると、普通の線に、「double」にすると、2本線になる…のだが、この場合、線の太さを「3px」以上にしないとダメ。dashedの場合は、破線になる。

border-width: 2px;  この部分は、数字が大きくなればなるほど枠線が太くなる。2本線で囲む場合は3pxより太くしておく。

margin: 0px; padding: 15px;  これは、位置がどこになるか、文字がどのあたりに入るかだけれども、とりあえずこのままで。

background-color: none; この部分は、「none」にしておくと、背後の色が透ける。「white」にすると背景色が白く、「black」にすると背景色が黒く。ほかにどんな色の名前を書けるか…については、【こういう時に使える色名の書いてあるサイト】などを参考にされたし。

border-color: green; この部分は、枠線の色。上のサイトに書いてある色名なら、どれでも受け付けるっぽい。(red, orange, yellow, green, blue, purple, pink, brown, blackなど、ありがちな色名で試してみるとわかりやすい)

color: blue ; これは、枠内の文字の色。背景色と同じにしてしまうと溶け込んでしまって、見えなくなり、「ドラッグで反転させて読んでください」なんていうのが出来る。

font-size: 80%; width: 90%;  これは、ブログの文章を書いている地の文章に比べて、どのぐらいのサイズの字を出すか、というところ。100%にすると、ブログの本文と同じサイズに。120% にすると大きく、50%にすると小さくなる…けど、どのぐらいになるかは、プレビューを見て調整したほうがいい。widthのところは、ブログの本文欄に対して、どのぐらいの幅で枠を出すか。私は、ブログの本文よりもちょっと狭いのがいいので、9割、つまり90%にしているが、これも数字を減らせば狭く、減らさなければいっぱいいっぱいに出るはず。本文の幅より、太いのは、出したらはみ出て、右側の線がなくなっていたので、やらないほうがいい。

border-radius: 6px;" これは、枠の四隅がどのぐらい丸くなるか。0pxだと、角ばったのが出来るし、20pxだと、丸っこくなる。

</div> この「テキスト」と書いてある部分に、枠内に入れたい文章をいれる。

テキスト

見本通りに張り付けると、こういうの(↑)が、出来るはず。
プレビューを見ながら、いろんなところを変えて、どんなのが出るか、やってみると結構面白いものが出来るのでお勧め。

応用編

アップロードした画像と幅を合わせるとこんなこともできる。もっと長い文章をいれたらどうなるのかと思ったけどいれた感じだと、下に延びるだけなのね。

この枠線入りの絵は、↓の文章で作成。(「<」と「>」は、半角に変更してください)

--------ここから-----
<p><div style="border-style: solid; border-width: 1px; margin: 0px; padding: 6px; background-color: yellow; border-color: orange; color: brown ; font-size: 80%; width:100px; border-radius: 6px;float:left; margin:15px;"><img src="画像のURL" alt="" border="0" width="100px"/>枠内の文章はここに入れる。</div>画像の横に回り込ませる文章はここに入れる。なにも入れなければ空白に。</p><p style="clear:both";></p>ここに文章をいれると、写真の下に出る。
-------ここまで----
この場合、アップロードした画像の横幅のサイズと、枠の横幅のサイズを合わせておかなくてはならない。(上の文章の赤文字の2ヶ所)写真と、枠線の間隔は、paddingの数字で変更。

こうやって見ると、ややこしく見えるけれども、どこを変えたらどうなるのか、わかってしまえばこっちのもの!【普通に画像を貼って、回り込ませる方法を書いた記事】も、このブログにあるので、ややこしい枠がいりません、という場合はそちらもどうぞ。

« 家事をこなすコツ|Top|子供の傘 »

コメント

コメントの投稿

管理者にだけ表示を許可する

Top

HOME

    思ったことを何でも書くゲーマーブログ。リンクはご自由にどうぞ。

    まこ

    Author:まこ
    どこをクリックしても一銭にもならない、ただの主婦の日記帳です。
    ゲーマーで、本好きで、クラフト好きです。

    06 | 2020/07 | 08
    - - - 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 -

    名前:
    メール:
    件名:
    本文:

    この人とブロともになる