解決済
ブログの記事で文章を囲みたいんですけど・・・
例えばニュースなどを何処かから転記したときに、その感想などを書き込んだ自分の文章とを解かりやすく区別するために、点線などでその内容（ニュース記事）だけを囲みたいんですが、どうすればいいのでしょかよろしくお願いします
回答(6)
5.
※注意 デフォルトで blockquote{ **** } と CSS に記述されています。これの中の記述を変更して使用しても良いのですが、将来を見越して、複数の枠の指定記述を設けるのでしたら、新たにクラスを指定した方が使いやすいでしょう。ですので、ここでは新たなクラスを指定する方法を回答しておきます。
.box{
border: 1px solid #C0C0C0;
padding: 5px 5px 5px 5px;
background: #ffffff;
}
border は四角く囲む罫線の種類をあらわしています。1px solid #C0C0C0 は、1px のグレー色 （ #C0C0C0 ） の直線を指定しているのですが、線を太くしたかったら、2px ・・・ 3px ・・・ という具合に数字を変えて下さい。線の種類を点線や破線、二重線に変えたい時は、solid の部分を dotted ・ dashed ・ double という具合に変更すれば OK です。
double の場合は 3px ぐらいにしておかないと、綺麗な二重線にはならないと思います。#C0C0C0 の部分は好きな色に変更して下さい。
padding は囲んだ四角の内側の余白です。左から上右下左の指示を表します。background は、囲んだ四角の背景色です。（ 背景色をつける必要が無い場合は、必要ありません ） 画像も指定できますが重くなりますし、本文がゴチャゴチャになりますから、あまりお薦めは致しません。
幅を指定したかったら、width: ○○○px; と追加すれば良いです。サイドバーと囲んだ線が引っ付いてしまうような場合は、見苦しいので指定した方が良いかもしれません。その際は overflow: auto; も一緒に追加しておくと安心です。あふれた文字は自動的に改行してくれます。
高さを指定したかったら、height: ○○○px; と追加して下さい。そのさい文章行の高さよりも囲んだ線が低い場合は、スクロールバーが出現します。○○○px の部分を auto にしておくと、書いた文章の改行に合わせて自動的に調節してくれます。必要であるならば、高さの数値指定をして下さい。
字数制限のため、コメント欄 >>#1 に続く
ご回答どうもありがとうございます
参考にさせていただきました
僕の記憶が正しければ、ＡＱさんに助けれれたのはこれが２回目かと・・・
毎度、毎度、ありがとうございます。精進します！！
1.
詳しい話は、ど忘れしてしまったので、ごめんなさい。
私が昔参考にしたサイトでも書いておきますか。
早速のご回答どうもありがとうございます
参考にさせていただきました
初心者の質問にもかかわらず、どうもありがとうございました
2.
早速のご回答どうもありがとうございます
参考にさせていただきました
初心者の質問にもかかわらず、どうもありがとうございました
3.
<table> <tr> <td style="border:1px dashed;"> ニュースその１ ～カメ選手チャンピオン！～ </td> </tr> </table>といった感じです☆
あつさんのブログは、"改行を反映する"にしてありますか？(ブログマイページ⇒カスタマイズ管理で確認できます)
反映するにしてある場合は、これらのタグをすべて詰めて書き込んでください。でないと正しく表示されません。
ちなみに文字にリンクを貼るには、
<a href="リンク先URL">ニュースその１</a>といった感じにします。
style="border:1px dashed" は、border(枠)の大きさが１px、枠を囲む線の種類は点線といった意味です。
線の色も変えたい場合は、dashedの後ろに半角を開けて、redなど色を指定すればいいです。#f0000でもいいです。
dashdがなければ実線(solid)で文章を囲みます。
dashd以外にもいろいろな形があります。
実用的なところでは、
・solid 実線(特に指定がなければこれになります)
・dotted 点線(dashedより丸い感じの線です)
・double 2重線
ですね☆
早速のご回答どうもありがとうございます
参考にさせていただきました
初心者の質問にもかかわらず、どうもありがとうございました
4.
そんなときは、
<table border="1"> <tr> <td> ニュースその１ ～カメ選手チャンピオン！～ </td> </tr> </table>としてください。
これは、点線ではなく実線ですが、この形が一番シンプルですので、これでしたらまず間違いなくできると思います。
では。。。<(_ _)>ペコ
6.
１・予め、CSSの適当な場所に以下を追加しておく。
.indent{
border:2px dotted #000000;
margin:20px;
padding:10px;
}
※"#000000"は引用部分を囲む点線の色です。お好きな色に。２・記事を投稿する
本文 <div class="indent">引用するニュース記事</div> 本文※プレビューの段階では点線で囲まれません。試しに一度投稿してみてください。
mannendoco_life
コメント(7)
チャンピオン、あとはよろしくです＾＾；
コメント >>#1 >>#2 Ｍ床さんに取られた ^^;
回答 >>5 の続き
さて好みの指定ができたら、CSS （ スタイルシート ） を元のところで保存し、Blog の再構築 ＞ ＣＳＳ ＞ 再構築をする ・・・ で完了です。あとは、本文の記事中で四角く囲みたい部分の文章の前に ・・・
<div class="box"> と記述し、その文章の末尾の文字の後ろに </div> と記述すれば OK です。
一度 CSS に記述して保存しておけば、本文文章の四角く囲みたい部分に <div class="box"> ～ </div> を記述するだけで、いつでも呼び込むことができます。
複数、この枠のデザインをあらかじめ作成しておけば、その記事の内容によって、枠の見た目を変化させる事ができます。
そのさいは、CSS に ・・・
.box{ *** }
.box2{ *** }
.box3{ *** }
と先に記述しておき、記事本文の中で分けるときはこうします。↓
コメント >>#4 に続く
<div class="box">こんな感じになりました (^^)</div>
<div class="box2">こんな感じになりました (^^)</div>
<div class="box3">こんな感じになりました (^^)</div>
これでいつでも自由に枠を表示させる事ができます。
初めだけですね。じゃまくさいのは (^_^;)
投稿フォームの形式が、『 WYSIWYGエディタ 』 を使用している場合は以下の事に気を付けて下さい。
この <div class="box"> ～ </div> を記述する時は、必ず記事投稿部分の左下にあるチェックボックス 『 HTML を確認 』 にチェックを入れ、HTML の画面にします。そこで必要な個所にこの上記のタグを記述し、し終えたら、またチェックを外し、画面を HTML より切り換えて投稿して下さい。
そうしないと、ブログ上にタグそのもの 『 <div class="box"> ～ </div> 』 がそのまま表示されてしまいます。わからない事があれば、下部コメント欄にその旨お書き下さい。
＞あつさん
無事に解決したみたいですね。良かったです。
ベストありがとうございました (^^)
また何かあれば、いつでもナレッジへどうぞ～ ♪
解決おめでとう。
ベターありがとうございました。
