本文を枠線で囲おう！ [実践編：記事本文]
説 明
本文の周りに枠線がないテンプレート（スキン）に、本文を囲う枠線を付けます。
完成形
※ 本記事では「グッドモーニング」スキンをベースに使用しています。
準 備
編 集
１本文の周りに枠をつける
まず、.articlesを変更します。
borderにて本文を囲う枠線をつけます。
ソースコード：
.articles {
：
：
border:1px solid #5A2522;
}
：
：
border:1px solid #5A2522;
}
もともと存在したタイトル上部の線が、新しく付けた枠線と重なって太く見えてしまっています。
よって、タイトル上部の線を消すため、.articles-titleを変更します。
ソースコード：
.articles-title {
：
：
border-top:1px solid #5A2522;
：
：
}
：
：
border-top:1px solid #5A2522;
：
：
}
２文字と枠線の距離の設定をします
文字と枠線が近すぎるため、paddingにて10pxほど文字を枠より内側に入れます。
尚、10pxとはだいたいの値ですので、お好きな値を設定してください。
まず、タイトル部の設定から。
.articles-titleを変更します。
サンプルではすでにpaddingの設定が書かれているので、後で混乱しないよう削除します。
ソースコード：
.articles-title {
：
：
padding:3px 0;
padding:10px;
：
：
}
：
：
padding:3px 0;
padding:10px;
：
：
}
注）単位[px]をお忘れなく！
次に記事部の設定。
.articles-bodyを変更します。
ソースコード：
.articles-body {
：
：
padding:10px;
}
：
：
padding:10px;
}
注）単位[px]をお忘れなく！
次に、記事の下の記事情報部の設定。
.postedを変更します。
サンプルではすでにpaddingの設定が書かれているので、後で混乱しないよう削除します。
ソースコード：
.posted {
：
：
padding:10px 0;
padding:10px;
：
：
}
：
：
padding:10px 0;
padding:10px;
：
：
}
注）単位[px]をお忘れなく！
ここまでで思い通りのデザインになった方は終了です。
本記事ではデザインをもう少し整えていきます。
３余分なスペースを削除する
[２]でパディング（間隔）を加えたことにより必要以上に余分なスペースが空いてしまった箇所があるので、直します。
タイトルと記事のスペースは、もともと.articles-titleのmargin-bottomによって15pxの間隔が空いていましたが、[2]の変更によりさらに10px間隔を広げてしまったので、marginの値を10px減らせば、元の間隔（15px）に戻ります。しかし、タイトル部にも10pxゆとりを持たせたために15pxも空いている必要がないと思われるので、margin-bottomの値は0pxにしてしまいます。
.articles-titleを変更します。
ソースコード：
.articles-title {
：
：
margin-bottom:0px;
：
：
}
：
：
margin-bottom:0px;
：
：
}
注）単位[px]をお忘れなく！
次に、記事の下のスペースを考えます。
もともと.articles-bodyのmarginによって20pxの間隔が空いていましたが、[2]の変更によりさらに10px間隔を広げてしまったので、marginの値を10px減らせば、元の間隔（20px）に戻ります。しかし、すでに10pxもゆとりがあるため、20pxも空いている必要がないと思われるので、marginの値は0pxにしてしまいます。
.articles-bodyを変更します。
もともとあったmarginの設定部分は、後で混乱しないよう削除します。
ソースコード：
.articles-body {
：
：
margin:0 0 20px 0;
margin:0px;
：
：
}
：
：
margin:0 0 20px 0;
margin:0px;
：
：
}
注）単位[px]をお忘れなく！
次は、記事情報部分の下のスペースを考えます。
そもそも.postedに「margin-bottom:30px;」という設定が書かれている理由は「記事と記事の間のスペースを空けるため」だろうと推測できますが、本来、この使い方は間違っています。
なので、この設定自体、なかったことにします。
.postedを変更します。
ソースコード：
.articles-body {
：
：
margin-bottom:30px;
：
：
}
：
：
margin-bottom:30px;
：
：
}
注）単位[px]をお忘れなく！
最後に、記事と記事のスペースが狭くなってしまったので、正しい方法でスペースを広げます。
但し、本文の下に30pxも挿入すると、[前の5件]などのリンクが遠く離れてしまいますので、適度に20px程度にします。本文の上にも10pxのスペースが既に挿入されていますので、本文と本文との間は30pxとなります。
.articlesを変更します。
margin-bottomに20pxを設定します。
ソースコード：
.articles {
：
：
margin-bottom:20px;
}
：
：
margin-bottom:20px;
}
注）単位[px]をお忘れなく！
これでほぼ完成ですが、本記事ではさらに装飾してみたいと思います。
４タイトル部と記事情報部を装飾する
タイトル部と記事情報部の背景にbackgroundにて色をつけます。
色はどちらとも、サイドバーのタイトルにも使われている薄いベージュ色（#fdfbf5）で。
.articles-titleおよび.postedを変更します。
ソースコード：
.articles-title {
：
：
background:#fdfbf5;
}
.posted {
：
：
background:#fdfbf5;
}
：
：
background:#fdfbf5;
}
.posted {
：
：
background:#fdfbf5;
}
さらに、.postedを変更して、記事情報を右寄せにします。
text-alignにrightを設定します。
ソースコード：
.posted {
：
：
text-align:right;
}
：
：
text-align:right;
}
以上。
関連項目
■ 【背景】background [リファレンス]
■ 【文字】text-align [リファレンス]
■ 【ボックス】margin [リファレンス]
■ 【ボックス】padding [リファレンス]
■ 【ボックス】border [リファレンス]
■ 本文を囲う枠線の角を丸くしよう！ [実践編：記事本文]
かほりんさん こんばんは。はじめまして。
いつも拝見してあれこれ自分のブログに取り入れさせてもらっています。とても分かりやすい説明で助かります!!
本文中にかほりんさんのように枠線で囲んだ文章はどのようにして入力するのでしょうか?
2重点線もどのようにしたらいいのでしょう?良ければ教えてもらえませんか??
by keep-9 (2009-07-28 00:35)
＊ keep-9さん ＊
はじめまして♪
すでにお役に立っているようで、嬉しく思います♪
本文中に字を枠線で囲うには、CSSを設定するためのHTMLのタグも使いますが、説明すると長くなるので、まずはマネをしてみてください。(^^)
＜例１＞
<div style="border:1px solid #COCOCO;">枠線で囲います</div>
<div>〜</div>の中の文章が枠で囲われます。
そして「style="〜"」の中にCSSを設定します。
CSSは、このブログでも紹介しているものはだいたい設定出来ますよ。
例えば、枠線と文章の間を10px空けたければ[padding:10px;]とか、背景に色を付けたければ[background:#00FFFF;]とか。
これらは「セミコロン（;）」で区切られていればいくらでも続けて書くことが出来ます。
で、2重点線ですが、実は点線を指定した<div>タグを入れ子（タグの中にタグを入れること）にしています。
＜例２＞
<div style="border:1px dotted #eab2b2;padding:1px;"><div style="border:1px dotted #eab2b2;padding:10px;text-align:center;">これが2重点線です</div></div>
ちょっとゴチャゴチャしてしまうのが欠点ですね。(^^;;
ただ、もし良く使うスタイルであるなら、テンプレートのCSS編集の中に独自のスタイルを設定すれば、多少スッキリします。
そのやり方は、もし興味があれば、遠慮なくおっしゃってくださいね。
是非また遊びに来てください♪
by かほりん (2009-07-28 20:32)
＊ keep-9さん ＊
追記です。
<div>〜</div>の中に書かれた文章の改行について書き忘れました。
＜例３＞
<div>これは
テスト
です</div>
例３では、キーボードのEnter（Return）キーで改行しましたが、これでは改行されず・・・
「これはテストです」
と1行で書かれてしまいます。
これは
テスト
です
と改行したい場合は・・・
＜例４＞
<div>これは<br>
テスト<br>
です</div>
と、改行したい場所に<br>というタグを挿入しなければなりません。
これが意外と面倒で、忘れちゃうんですよね〜。(^^;;
by かほりん (2009-07-28 21:02)
かほりんさん、早速ありがとうございます!!!
今日のブログに試行錯誤しながら1か所真似っこして使ってみました♪とっても可愛くて満足です(*^^)v
元々リッチテキストで書いていたので、HTMLの直接入力というところでやってみるとばっちり上手くいきました♪
テンプレートの中に設定出来るんですか？私に出来るか分かりませんが、是非教えてもらえますか？もうこういうの大好きなんです♥何時間でもやってしまう自分が怖いです(笑)
by keep-9 (2009-07-28 23:15)
＊ keep-9さん ＊
お返事遅くなりました。(^^;;
テンプレートの中にCSSの設定を埋め込むの、やっぱり興味ありましたか♪(^^)b
では、テンプレートの中に、本文中で良く使うCSSの設定（style="〜"）を記述し、そのスタイルをタグ（<div 〜>）の中で設定する方法です。
＜例５＞
--- テンプレート側 ---
.kaholin_soto {
border:1px dotted #eab2b2;
padding:1px;
}
.kaholin_naka {
border:1px dotted #eab2b2;
padding:1px 7px;
text-align:center;
color:#777777;
}
--- 本文中のタグ側 ---
<div class="kaholin_soto"><div class="kaholin_naka">例題です</div></div>
＜説明＞
テンプレート側は、先頭行以外はどこに埋め込んでも構いません。また、kaholin_xxxのような名称に制限はありませんが、テンプレート内に存在するような名称にしないために、自分の名前などを先頭につけるようにするのがポイントです。
本文中のタグの中は、kaholin_xxxの名称を呼び出すだけです。
二重点線の設定をテンプレート側に入れてあるので、ちょっとスッキリしますよね。(^^)b
これの欠点は、新しいテンプレートに変更したときに、同時にこの設定も移設してあげないといけないことです。
以上、こんな感じでどうでしょう？
私もやり始めるとハマっちゃう性格なので、テンプレートをいじり始めると何時間でもPCの前に座ってしまい、危険です。（笑）
by かほりん (2009-08-01 22:43)
かほりんさん こんばんはー♪
またまたありがとうございます!! これはテンプレートの中であれば先頭行以外のどこに入れてもOKなんですね。
リッチテキストで書いている中では二重点線が見えないんですね。プレビューをして点線が引かれていることが確認できました!なるほど～こういうやり方があるんですね。これは便利かも♪
前のやり方だとHTMLの直接編集で入力して挿入すると通常の文章入力画面で点線も表示されてたので…
リッチテキストの中で改行しちゃうと点線の枠が1行挿入されちゃうんですね(^_^;)焦った!! HTMLの直接編集で挿入した後にそのまま文章を入力すると点線がまた新たに出来て何か凄いことになりました(ToT)/
<br>を入れてから次の行を書くと今度は点線なしの文章がちゃんと書けました♪ 色々と面白いです(*^^)v わーい!!ありがとうございました。これからボチボチ活用していきます!! もうこういうの大好きなんでまた質問させてくださいね<m(__)m>
by keep-9 (2009-08-02 22:11)
＊ keep-9さん ＊
早速試してみたのですね！(^^)
私はリッチテキスト入力じゃないので、こちらこそいろいろと教えていただいて、参考になりました〜♪
「なんか凄いことになった」のが、想像出来ておかしいデス。（笑）
初めてやることって、想像しないことが起きたりして、わー！ってなるときありますからね。
そんなときは落ち着いて、元に戻すのが一番です。(^^)/
また何かありましたら、いつでもいらしてくださいね〜♪
by かほりん (2009-08-02 22:22)
かほりんさん、質問！
この記事と全く関係なくてごめんね；；
あのオリジナルデザイン講座の下に「ブログトップ」とか
「ブログ全体」とかリンク貼られてるじゃない？
あれってどうやるの？？良かったら伝授してくださいまし♪
by keep-9 (2009-11-21 15:11)
＊ keep-9さん ＊
やっほぅ。(^^)
記事と関係なくてもおっけ〜ですよん♪
タイトルバナーの下のリンクは、HTMLを編集してます。
そっちもいじってみる気、ありますか？
あるなら、伝授いたしましょう。(^^)b
by かほりん (2009-11-22 00:25)
やほやほ～♪
やっぱり並の設定じゃないと思ってたのです～～!!
興味ありありだけど、HTMLの編集って私に出来るかな??
かなり心配ーーーーーー出来るかは別として（笑）
伝授お願いしまーす(｡-人-｡)
by keep-9 (2009-11-22 01:51)
＊ keep-9さん ＊
では、管理画面から「デザイン → HTML編集」の画面にしてください。
「HTMLの追加」を選び、新しいHTMLを編集します。
書いてある内容を削除しないように気を付けながら作業してください。
また、怪しいことをしたと思った場合は、デフォルトHTMLに戻してくださいね！
（１）レイアウト配置の開始を示す「<body>」タグを探します。
（２）（１）の4行下に「<div id="banner">」があります。ここがタイトルバナーの設置箇所になります。
（３）（２）の2行下にあるバナーの設置の終了を示す「</div>」の下に少し多めに改行（return）を入れてスペースを空けてください。（いくら改行を入れても、デザインには影響しません）
（４）（３）のスペース内に試しに文字を挿入してみてください。
例：あああ
（５）「表示確認」ボタンにて、バナーの下に「あああ」が表示されましたか？
以上が、文字の挿入方法です。(^^)b
keep-9さんがどのような設定（文字？メッセージ？リンク？）をイメージしているかわからないので、今回の説明はここまでとなりますが、さらにわからないことがあればおっしゃってくださいね〜♪
by かほりん (2009-11-22 23:54)
かほりんさん、こんばんは。
「表示確認」ボタンがないのでどうしようと思いつつ保存してみて
あああが表示されていることを確認しました！これってリッチテキスト形式だからなのかなぁ～それともメールアドレスでソネットに登録してるからかな?
真ん中に表示されるんですが、これはどこかにcenterとかって表示があるんですかね?どうやら、デフォルトはそのままあって、新しく追加したHTMLが別名で登録出来るみたいです。
私がやってみたいのは、リンクを貼ってみたいなぁと思っています(*-∀-)ゞ
by keep-9 (2009-11-23 23:29)
＊ keep-9さん ＊
おー♪やってみたのね！(^^)
「表示確認」のボタンはあると思うんだけどな〜。
私もそうなんだけど、もしやkeep-9さんも目が節穴だったりして？！ぷっ
でも保存してみる方法でもいいわけだから、無くても大きな問題じゃないですよね！(^^)b
さすが！真ん中に表示されちゃうのは、おっしゃる通るどこかに「center」があって、その設定が引き継がれてるんでしょうね。
リンクを左寄せにする場合など、HTMLに追加する分に新しいCSSを追加したければ、本文中に点線をつけたときのように、<div>タグを使ってスタイルに名前を付けてあげればOKです。
＜例＞
--- HTML側 ---
<div class="kaholin_toplink">
■ <a href="...">Diet</a> ■ <a href="...">etc</a>
</div>
--- テンプレート側 ---
.kaholin_toplink {
text-align:left:
color:pink;
padding:10px 0px;
}
＜説明＞
前述の説明の「あああ」を埋め込んだ箇所に、<div>〜</div>を挿入します。<div>タグで囲われている中は同じスタイルが有効です。また<div>タグの中は改行を挿入しても改行されないので、改行を示す<br>タグで改行させます。
尚、リンク先（href="..."）はご自分で設定してください。
テンプレート側は、先頭行以外はどこに埋め込んでも構いません。また、kaholin_xxxのような名称に制限はありませんが、テンプレート内に存在するような名称にしないために、自分の名前などを先頭につけるようにするのがポイントです。
以上。
という感じで一応一般向けの説明を書きましたが、keep-9さんはもう説明なしでも見ればだいたいわかっちゃいますよね。(^^)
ちなみにこのブログでは、表（<table>タグ）を使って、文字の長さに関わらず等間隔に配置されるように整列させています。
by かほりん (2009-11-24 16:26)
かほりんさん、説明は必要です!!
やっぱり私の目は節穴でした（笑）表示確認ボタンありました!
一度保存してから出てくるので全然気付かなかったよ～（爆）
<table>タグを調べながら悪戦苦闘の末、やっと出来ましたよん♪
2つしか作ってないけど、一応形にはなりました(^O^)
タグって本当に面白い～～昨日夜中までやってしまった；；
楽しくって（*^_^*） 色んな事出来ちゃうんだね♪
今回も沢山教えてくれて+｡:.ﾟヽ(*´∀')ﾉﾟ.:｡+ﾟｧﾘｶﾞﾄｩ
また質問しちゃうと思うけど、(ﾉ・ω・)ﾉﾟ+｡:.ﾟ宜しくお願いします♪
by keep-9 (2009-11-28 17:26)
＊ keep-9さん ＊
あ〜、私としたことが、お返事したつもりになってました。(^^;;
遅くなってゴメンナサイ！
やっぱり目が節穴だったのね。（爆）
一度始めちゃうと何時間でもやり続けちゃいますよね〜。
keep-9のブログの今のスキン、可愛らしくて好きですよん♪
またいつでも・・・質問カモ〜ン！(^^)/
by かほりん (2010-01-29 16:33)
こんにちわ！はじめまして！わかえでといいます
いつも読ませていただいております＾＾
質問よろしいですか？
お忙しい中、申し訳ありません＞＜
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1237731657
↑のURLにも詳しく書きましたが、（Yahoo知恵袋です）
記事にスクロールバーをつけて、全体のスクロールバーを消すことは可能でしょうか？
いろいろ試してみたのですが、さっぱり分かりません＞＜
もしよろしければお返事ください！
この記事でもYahoo知恵袋でも結構です！
では宜しくお願いいたします！＞＜
by わかえで (2010-03-12 15:01)
＊ わかえでさん ＊
ハジメマシテ！
ご訪問ありがとうございます。(^^)
ご質問の件、Yahoo!知恵袋の方も拝見しました。
図もあったので、質問のイメージがすぐわきました！
で、早速回答ですが。
「可能 or 不可能」かと言われると、「可能」だと思います。
但し、CSS（スキン編集）だけでは「不可能」かと。
HTMLをまだちゃんと見てないのですが、HTML編集が必要になると思われます。
そうなると、残念ながら簡単ではないですね〜。
まとまった時間があれば試してみたいところですが、今ちょっと時間が取れそうにないので、この件に関しましては現在はお力になれそうにありません。
ゴメンナサイ！
もしわかえでさんのイメージしているようなレイアウトの方がいらしたら、その方に直接お尋ねするのが一番早いかもですね。
今回はお役に立てませんでしたが、また何かありましたらいつでもいらしてくださいね！
今後ともよろしくお願いします♪
by かほりん (2010-03-12 15:33)
わぁ！ 回答ありがとうございます＾＾
編集、もう何年もやっていないから大変そうだなぁ＞＜
でもまた頑張ってみます！！
わたしの考えているデザインをしている方は
なかなかいないと思います・・＞＜；
わたしは見たことありません＞＜
本当に回答ありがとうございました！
ではまた遊びに来させていただきますね＾//＾
by わかえで (2010-03-14 17:32)
＊ わかえでさん ＊
私もわかえでさんのイメージしているようなデザインの方はまだ見たことないかなぁ。
アイディアは結構斬新だと思いますよ！(^^)b
HTMLの編集の経験がおありでしたら、次の箇所を探してみてください。
・記事本文の内容をHTMLに書き出している箇所
そこのタグが現在何になっているかはわかりませんが、INPUTタグのスクロールドテキスト（コメントを書く欄と同じもの）にすると、イメージしているものに近くなると思います。
このタグに変更出来れば、次は、入力を禁止させたり、枠組みを変更したりといった詳細設定が必要となります。
以上、デザイン編集のきっかけになれば幸いです。(^^)
by かほりん (2010-03-14 21:47)
何度も申し訳ありません＞＜
HTMLさっぱり忘れていて・・＞＜
全然分かりませんでした＞＜；
詳しくやり方を教えていただきたいのです＞＜
お忙しいのならば回答は結構です＞＜
本当に申し訳ありません＞＜
宜しくお願いいたします＞＜
by わかえで (2010-03-19 14:27)
＊ わかえでさん ＊
お返事遅くなってごめんなさ〜い！
う〜ん、キーワードで先に進めませんでしたか・・・。
詳しいやり方は私も調べてみないとわからず、以前も申しました通り、今はまとまった時間が取れないのでこれ以上はお教えすることが出来ないのですぅ。
本当にごめんなさい！！
by かほりん (2010-03-22 00:00)
こちらのブログ、本当に分かりやすいですね！！
すばらしいでっす☆
nice×100000個！
by お茶屋 (2010-04-14 11:27)
＊ お茶屋さん ＊
わ〜、見つかっちゃった。（笑）
最近更新してないにも関わらず、たくさんの方に見ていただいてます。(^^)v
Webではなかったのですが、WS上のGUI設計の仕事をしていたので、
こういうの、好きなんですよね♪えへっ
by かほりん (2010-04-14 15:17)