CSS で BOX
アメブロで記事を書くとき・・・・
引用の設定がないじゃん!!
ほかのブログでは、引用のBOXが用意してあって、
その中に書かれていることは他からの引用文だということが一目でわかるようになっている
引用だけでなく、文章を強調させたいとき、わかりやすくしたいときなどにつかえるCSSだけでできるBOXぽい？ものを紹介してみます
手を抜いてh4だのh5だの使っちゃっていますが・・・4、5、くらいなら、まっいいか・・
よくはないけど、次はちゃんとクラス名を設定して紹介しますから・・・・・
でも、書くときに初心者の方にはわかりやすいんだな・・・
（h4・h5の意味はわかっていないんだろうけど・・・・）
前に同じ写真を載せていますのでくらべたらおかしいことがわかります
大きくなった写真をクリックしても確認できます A
前に同じ写真を載せていますのでくらべたらおかしいことがわかります
大きくなった写真をクリックしても確認できます B
大きくなった写真をクリックしても確認できます C
例のごとく青字部分をCSSの下あたりにコピペしてください
_/*■■■■■■ entry box ■■■■■■*/
.entry h4{
margin:1em;
padding:3px 10px;
font:12px #999999; line-height:1.5;
background-color:#EAF2FF;
border-left:7px solid #8FAEBE;
}
.entry h5{
margin:1em;
padding:3px 10px;
font:12px #666666;
line-height:1.5;
border-left:7px double #EEEEE0;
border-right:7px double #EEEEE0;
｝
.box{
margin:0px 10px;
}
.box_g{
display:block;
}
.box_g *{
display:block;
height:1px;
overflow:hidden;
background:#EEEEE0;
}
.box_g1{
border-right:1px solid #f7f7f1;
padding-right:1px;
margin-right:3px;
border-left:1px solid #f7f7f1;
padding-left:1px;
margin-left:3px;
background:#f2f2e7;
}
.box_g2{
border-right:1px solid #fdfdfb;
border-left:1px solid #fdfdfb;
padding:0px 1px;
background:#f1f1e5;
margin:0px 1px;
}
.box_g3{
border-right:1px solid #f1f1e5;
border-left:1px solid #f1f1e5;
margin:0px 1px;
}
.box_g4{
border-right:1px solid #f7f7f1;
border-left:1px solid #f7f7f1;
}
.box_g5{
border-right:1px solid #f2f2e7;
border-left:1px solid #f2f2e7;
}
.box_g_content{
padding:0px 20px;
background:#EEEEE0;
}
_/*■■■ ここまで ■■■*/
文章を書いた後、HTMLタグを表示で設定します
Aの場合
<h4>前に同じ写真を載せていますのでくらべたらおかしいことがわかります<br />
大きくなった写真をクリックしても確認できます</h4>
Bの場合
<h5>前に同じ写真を載せていますのでくらべたらおかしいことがわかります<br />
大きくなった写真をクリックしても確認できます</h5>
Cの場合
<div class="box">
<b class="box_g">
<b class="box_g1"><b></b></b>
<b class="box_g2"><b></b></b>
<b class="box_g3"></b>
<b class="box_g4"></b>
<b class="box_g5"></b>
</b>
<div class="box_g_content">
前に同じ写真を載せていますのでくらべたらおかしいことがわかります<br />
大きくなった写真をクリックしても確認できます
</div>
<b class="box_g">
<b class="box_g5"></b>
<b class="box_g4"></b>
<b class="box_g3"></b>
<b class="box_g2"><b></b></b>
<b class="box_g1"><b></b></b>
</b>
</div>
※タグの非表示 で書いた記事をみると
h4とかh5を使っていますので大きく表示されますが
プレビュー確認する で確認するとBOX内に表示されているはずです
>記事の中で小見出し入れたいときに使ってみました。
・・・・あれっ？？
これって、h4、h5のまったくもって正しい使い方ですよね・・・
引用、文章装飾から入ってしまったため、h4、h5を使っていながら
「見出し」って頭にありませんでした・・・・
>（h4・h5の意味はわかっていないんだろうけど・・・・）
意味がわかっていてこんなこと書いてしまって・・・・
恥ずかしい・・・です・・・
SEO的にも多少の効果はありますので堂々と使ってください
CSS ブログの日付を消す方法
企業サイト、あるいはアフェリエイトを主体にしているサイトで
日付はいらないってことありませんか？
デザインの変更 → スキンCSSの編集 で、
枠内の1番下に下記の部分(青字部分)をコピペする
.entry .date{
display:none;
}
逆に日付を強調したければ、
こんなのはどうでしょう？？当サイトが見本です（そのうちに元に戻します）
.entry .date{
color:#999999;
font-size:35px;
font-family :'Impact';
}
※別に既存のCSSの .entry .date を書き換えてもいいのですが・・・・
最後に加えておいたほうが、元に戻すのも簡単だしね・・・・