各記事部分の変更
[tag:テーマクッキング]
今回は各記事の変更をします。
通常記事と注目記事を同時に解説しますが考え方は同じです。
PtextbookLCRでは通常記事は青色で注目記事はオレンジ色の
ボーダー線で囲っています。
まず各記事のボーダーのデザインを修正します。
PtextbookLCR/custom.cssの
/*--------------------------- 通常の記事 -----*/
/* コンテナ */
div#centerblocks div.storytext {
margin: 0 0 2em 0;
（外側の余白）
padding: 0 0 1em 0;
（内側の余白）
background: #ffffff;
（背景の指定）
border: 1px solid #666699;
（ボーダー線の指定）
color: #000000;
（文字色）
}/*--------------------------- 注目記事 -----*/
/* コンテナ */
div#centerblocks div.featuredstorytext {
margin: 0 0 2em 0;
padding: 0 0 1em 0;
background: #ffffff;
border: 1px solid #ff6600;
color: #000000;
}
通常記事、注目記事とも border を変更します。
border: 1px solid #999999;
次に各記事のタイトル部分を修正します。
PtextbookLCR/custom.cssの
/*--------------------------- 通常の記事 -----*/
/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
（左に回り込ませる）
margin: 0 0 5px 0;
（内側の余白）
padding: 10px 10px 5px 10px;
（外側の余白）
background: #ffffff;
（背景色の指定）
color: #000000;
（文字色）
font-size: 120%;
（文字サイズ）
font-weight: bold;
（文字の太さ）
}/*--------------------------- 注目記事 -----*/
/* 記事タイトル */
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 5px 0;
padding: 10px 10px 5px 10px;
background: #ffffff;
color: #000000;
font-size: 120%;
font-weight: bold;
}
今回は左側に２種類のワンポイントの背景画像を使います。
画像の大きさは縦40px横40pxのPNG画像で名前は
注目記事はfh2.png通常記事はnh2.pngです。
このサイズのPNG画像で同一名であればこの画像でなくても使えます。
/*--------------------------- 通常の記事 -----*/
background: #ffffff url(images/custom/nh2.png) no-repeat top left;
/*--------------------------- 注目記事 -----*/
background: #ffffff url(images/custom/fh2.png) no-repeat top left;
このように修正します、これの内容は
「背景色を白色にしてnh2.png(fh2.png)画像を左上から繰り返さず表示する」です。
このままだと画像のようになってます。
これを修正するには記事タイトルの文字を背景画像と重ならないように表示します。
それには内側の余白で文字をよせますので padding を以下のように修正します。
各記事共通
padding: 10px 10px 5px 40px;
これは「表示内容を内側余白から上から10px右から10px下から5px左から40pxの位置に表示する」です。
これのチェックすべき所は左から40pxの位置です。
なぜなら背景で表示した画像の横幅サイズは40pxでしたよね。
ここまでの修正CSSと画像は以下の通りです。
/*--------------------------- 通常の記事 -----*/
/* コンテナ */
div#centerblocks div.storytext {
clear: both;
margin: 0 0 15px 0;
padding: 0 0 10px 0;
background: #ffffff;
border: 1px solid #999999;
}/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
margin: 0 0 5px 0;
padding: 10px 10px 5px 40px;
background: #ffffff url(images/custom/nh2.png) no-repeat top left;
font-size: 120%;
font-weight: bold;
}/*--------------------------- 注目記事 -----*/
/* コンテナ */
div#centerblocks div.featuredstorytext {
clear: both;
margin: 0 0 15px 0;
padding: 0 0 10px 0;
background: transparent;
border: 1px solid #999999;
}/* 記事タイトル */
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 5px 0;
padding: 10px 10px 5px 40px;
background: #ffffff url(images/custom/fh2.png) no-repeat top left;
font-size: 120%;
font-weight: bold;
}
独り言(´･д･｀)ﾎﾞｿｯ
＜＜実は記事関係の修正はこんなものではない＞＞
今回の修正は見た目の修正にとどまってますがこれは、
ProfessionalCSSと同じ背景色を（白色）を変更無く、かつ
PtextbookLCRである程度修正をかけてるからです。
本来の手順は
- 各記事のブロック部分の大きさを決める。
- 各記事の記事タイトル部分を決める。
- アイコン部分を決める。
- 記事の情報部分を決める。
- 記事の本文部分を決める
- 話題画像部分を決める。
これで背景が白色の場合は見た目だけは何とかなります。
背景色に白色以外を使った場合は最低限
- コメント部分
- トラックバック部分
- 検索ページ表示部分
- プラグイン絡みで表示される部分
の修正が必要になります。
よく解らない間は背景色は白色を使うのが無難かもしれません。
＜＜タイトル横のアイコンの罠＞＞
目に付きやすく便利になったタイトル横の「メール」「編集」「プリント」ですが
記事タイトルをデザインする時にその存在感をアピールしすぎます（邪魔？）。
これがある限り記事ブロック最大幅の記事タイトルは使えずアイコン手前で切れてしまいます。
これの修正にはthtmlを書き換えることになるので「テーマクッキング隠し味」で紹介します。
修正自体は簡単です、問題は「アイコンを何処に持っていくか！」これが意外と難しいです。
何処へ持っていくのがベストか色々考えてみてください。
＜＜話題画像の残像＞＞
各記事の設定で「話題アイコンを表示しない」を選べば話題リンクアイコン画像は消えます。
しかしその残像はしっかり残ってます。
当サイトの記事でも変な改行になっている部分があると思います、
（特にTOPページで表示されてる時）
これは仕様です・・・と言ってしまうと「完全表示」になってしまいますが
thtmlの該当部分を削除すればいいので「テーマクッキング隠し味」で紹介したいと考えてます。