左右ブロック部分の変更。
[tag:テーマクッキング]
今回は左右ブロックの変更をします。
左右２箇所を同時に説明しますが考え方は同じです。
左右ブロックは解りやすいように黒い枠で囲みました。
これから
左右カラムブロックのタイトルを変更したい。
左右カラムブロックのデザインを変更したい。
を参考に見ていきます。
まず左右ブロックタイトルのデザインを修正します。
PtextbookLCR/custom.cssの
/* 左ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 5px 0;
（外側の余白）
padding: 10px 0 5px 10px;
（内側の余白）
background: transparent;
（背景の指定）
border-bottom: 1px solid #e7e7e7;
（下段のボーダー線）
color: #000000;
（文字の色）
font-size: 110%;
（文字の大きさ）
font-weight: bold;
（文字の太さ）
}/* 右ブロックタイトル */
div#rightblocks div.block-right h2 {
margin: 0 0 0.5em 0;
padding: 10px 0 5px 10px;
background: #fcfcfc;
border-bottom: 1px solid #E7E7E7;
color: #000000;
font-size: 110%;
font-weight: bold;
}
を見つけてください、該当部分の解説はcustom.cssには書かれてません。
左右ブロックのタイトルに画像を指定します。
画像の大きさは縦25px横40pxのPNG画像で名前はbh2l.pngです。
このサイズのPNG画像で名前をbh2l.pngにすればこの画像でなくても使えます。
左ブロックと右ブロックのbackgroundを以下の様に書き換えます。
background: #ffffff url(images/custom/bh2l.png) repeat-x top left;
これの内容は「背景色を白色にしてbh2l.png画像を左上から横に繰り返して表示する。」です。
さらにメリハリをつけるために border を修正します。
border-bottom: 1px solid #999999;
次は左右ブロック本体のデザインを修正します。
PtextbookLCR/custom.cssの
/* 左ブロック */
div#leftblocks div.block-left {
margin: 0 5px 5px 5px;
（外側の余白）
padding: 0;
（内側の余白）
background: #fcfcfc;
（背景の指定）
border: 1px solid #cccccc;
（ボーダー線の指定）
color: #000000;
（文字の色）
}/* 右ブロック */
div#rightblocks div.block-right {
clear:both;
（回り込みを解除する）
margin: 5px 5px 10px 5px;
padding: 0;
background: #fcfcfc;
border: 1px solid #CCCCCC;
color: #000000;
}
左右ブロック本体の背景色を以下のように修正します。
background: #e7e7e7;
さらにメリハリをつけるために border を修正します。
border: 1px solid #cccccc;
ここまでの修正したものをまとめたものと画像です。
/* 左ブロック */
div#leftblocks div.block-left {
margin: 0 5px 5px 5px;
padding: 0;
background: #e7e7e7;
border: 1px solid #cccccc;
color: #000000;
}/* 左ブロックタイトル */
div#leftblocks div.block-left h2 {
margin: 0 0 5px 0;
padding: 10px 0 5px 10px;
background: #e7e7e7 url(images/custom/bh2l.png) repeat-x top left;
border-bottom: 1px solid #999999;
color: #000000;
font-size: 110%;
font-weight: bold;
}/* 右ブロック */
div#rightblocks div.block-right {
clear:both;
margin: 5px 5px 10px 5px;
padding: 0;
background: #e7e7e7;
border: 1px solid #cccccc;
color: #000000;
}/* 右ブロックタイトル */
div#rightblocks div.block-right h2 {
margin: 0 0 0.5em 0;
padding: 10px 0 5px 10px;
background: #e7e7e7 url(images/custom/bh2l.png) repeat-x top left;
border-bottom: 1px solid #999999;
color: #000000;
font-size: 110%;
font-weight: bold;
}
画像を見るとわかりますが「検索」の部分が変更されてません。
質問数BEST10に入る部分なので要チェックです。
PtextbookLCR/custom.cssの
/* 検索ブロック */
div#leftblocks div#block-left-search {
clear:both;
（回り込みを解除する）
margin: 5px 5px 5px 5px;
（外側の余白）
padding: 0 0 10px 0;
（内側の余白）
background: #fcfcfc;
（背景の指定）
border: 1px solid #cccccc;
（ボーダー線の指定）
}
この部分の background と border を左ブロックと同じ修正をします。
/* 検索ブロック */
div#leftblocks div#block-left-search {
clear:both;
margin: 5px 5px 5px 5px;
padding: 0 0 10px 0;
background: #e7e7e7;
border: 1px solid #cccccc;
}
PtextbookLCRにはすでにcustom.cssに該当部分を書き出してますが
custom.cssに書き出す場合の
ProfessionalCSSの該当CSSファイルは form.css です。
以下の画像はここまで修正したものです。
独り言(´･д･｀)ﾎﾞｿｯ
＜＜左右ブロックコンテンツは？＞＞
今回は修正してませんが
PtextbookLCR/custom.cssの
/* 左ブロックコンテンツ */
div#leftblocks div.block-left div.block-left-content {
margin: 0;
padding: 0 10px 10px 10px;
background: transparent;
border: 0px solid transparent;
color: #000000;
}/* 右ブロックコンテンツ */
div#rightblocks div.block-right div.block-right-content {
margin: 0;
padding: 0 10px 10px 10px;
background: transparent;
border: 0px solid transparent;
color: #000000;
}
この部分もCSSでデザインを変更する時に良く書き換えます。
参考CSSと参考画像を参照して推理してくださいね。
参考CSS
/* 左ブロックコンテンツ */
div#leftblocks div.block-left div.block-left-content {
margin: 0;
padding: 0 10px 10px 10px;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
}/* 右ブロックコンテンツ */
div#rightblocks div.block-right div.block-right-content {
margin: 0;
padding: 0 10px 10px 10px;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
}
参考画像
＜＜左右ブロックタイトルが消えてる秘密＞＞
各画像を見ると左カラムのカレンダーとランダムギャラリーのブロックタイトルが
消えてます（表示されてない）。
これはIvyさんが配布しているテーマハック:タイトルを表示しない for 1.5 and 1.4.1を
使用しています。
すでにPtextbookLCRには同梱していますのでタイトル名に.（ピリオド）をつけると
タイトルの表示が消えてくれます。
詳細は配布ページを参照してください。