きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編)TOPページ新着概要表示の記事本文エリアを広げちゃう裏ワザ☆

<<   作成日時 : 2012/04/14 13:29   >>

ナイス ブログ気持玉 1 / トラックバック 0 / コメント 13

今回はブログトップページの記事本文の表示エリアを有効活用するための裏技になります(@にや)


ブログTOPページの新着記事の記事本文を概要表示にした時の現象。
記事本文が右側にスペースが有るにも関わらず途中で折り返されてとても窮屈に感じられます。
これは『画像+記事本文』と『投稿日時』の2つのエリアをテーブルで分割表示しているためです。


画像



記事本文が表示されるエリアが、画像と投稿日時に挟まれる形でとても窮屈なレイアウト(@まじ)
この部分のレイアウトを見直して記事本文エリアをスッキリ見せるためのCSS編集をしたいと思います。

※ このカスタマイズは、ブログTOPページで新着記事を概要表示にしている人のためのCSS編集です。
※ 概要表示の画像は、記事内に画像を使用した時に表示されます。



TOPページ新着概要表示の記事本文エリアを広げてみよう


まずは、一般的な標準2カラムタイプのスタイル指定です。
標準では約700px程度のブログ幅になっていますので、それに合わせた数値でスタイル指定を行います。


なお、サンプルのスタイル指定はウェブリのテンプレート『プレーン・ベーシック』でおこなってます。
その他テンプレートを選択している場合は数値の見直しが必要な場合がありますのでご注意下さい。


以下の文字列を新規でスタイルシートにごっそりコピペして書き込みます。
書き込み位置は『一覧概要表示』のトコロ、「/* 一覧概要表示 */」より下に書き込むようにして下さい。


■ サンプルCSS 〜 700px(標準)・2カラム ■
/* 一覧概要表示 記事本文エリアを広げる */
/* 本文エリアの幅 */
#contents #postlist blockquote{
width:430px; /* 700px・2カラム */
display:block;
margin-bottom:25px;
}
/* 一覧データセル 溢れた領域を表示する */
#contents #postlist td{
overflow: visible;
vertical-align:bottom;
}
/* レスポンスを下に配置 */
#contents #postlist .response{vertical-align:bottom;}
/* 日付を下に配置 */
#contents #postlist .date{vertical-align:bottom;}


画像



記事本文エリアが広くなってバランスもよくなり、窮屈な感じも解消されたと思います(にこ)





パターンごとのスタイル指定の仕方

では次に、標準サイズの『700px・2カラム』以外のパターンのスタイル指定の仕方です。
ブログのスタイルと合うように前述したスタイル指定の中の文字列の一部を変更して使用します。
変更ポイントは『#contents #postlist blockquote{} 』内の赤文字で書いた文字列です。

width:430px; /* 700px・2カラム */


2カラムで標準タイプの700px と標準タイプより100px広げた800pxのサンプルを掲載しておきます。
それから3カラムで標準タイプの800pxと100px広げた900pxも用意しました。
下記に挙げますブログのスタイルパターンの文字列と上記の文字列を書き換えてご使用下さい。

それからカスタマイズによって設定数値の違いがあると思います。
ブログの仕様に合わせて数値の書き換え等なども行なって下さい。

なお、上下にサイドバー(上下にあるのにサイドバーは変ですがw)や表示しない設定もありますが、
その場合は十分にスペースの確保はされていると思いますので割愛します。


---------------------------------------- 2カラム ----------------------------------------

■ サンプルCSS 〜 700px・2カラム ■
width:430px; /* 700px・2カラム */


■ サンプルCSS 〜 800px・2カラム ■
width:530px; /* 800px・2カラム */



---------------------------------------- 3カラム ----------------------------------------

■ サンプルCSS 〜 800px・3カラム ■
width:380px; /* 800px(標準)・3カラム */


■ サンプルCSS 〜 900px・3カラム ■
width:480px; /* 900px・3カラム */






解説

今回のCSS編集の解説をしておきます。

まずは一覧概要表示エリアがどの様になっているのか画像で確認してください。
画像のスタイル指定では、わかりやすい様にパーツごとに枠線をつけてあります。
※ 下記の画像はウェブリのテンプレート『プレーン・デフォルト』です。

画像


青の枠線が『一覧データセル(#contents #postlist td)』です。
この領域はテーブルタグが組まれていて、セルで左右二つ領域に分割されています。
左のセルに一覧概要表示、右のセルに投稿日時といった感じでパーツが収まっています。

オレンジの枠線が『投稿日時(#contents #postlist .date)』です。
このパーツの配置もカスタマイズポイントのひとつになります。
こちらのセルにはクラス値が割り振られているので個別にデザイン指定が出来ます。

赤の枠線が『記事本文(#contents #postlist blockquote)』で、今回幅を広げた領域になります。
この領域をセルの分割を無視して表示するコトが今回のCSS編集のポイントになります。

緑の枠線が『レスポンス(#contents #postlist .response)』です。
気持ち玉・トラックバック・コメントの数を表示しています。

これらをバランスよく整形して配置出来るようスタイル指定します。

■ サンプルCSS 〜 700px・2カラム ■
/* 一覧概要表示 記事本文エリアを広げる */
/* 本文エリアの幅 */
#contents #postlist blockquote{
width:430px; /* 700px・2カラム */
display:block;
margin-bottom:25px;
}

/* 一覧データセル 溢れた領域を表示する */
#contents #postlist td{
overflow: visible;
vertical-align:bottom;
}

/* レスポンスを下に配置 */
#contents #postlist .response{vertical-align:bottom;}

/* 日付を下に配置 */
#contents #postlist .date{vertical-align:bottom;}


記事本文エリアを広げるわけですが、広げるコトで左のセルからパーツが一部はみ出します。
はみ出した部分を表示する為に『#contents #postlist td』に『overflow: visible;』を記述しました。

標準のブログ幅の時は投稿日時が日付と時間が折り返されて2段表示になります。
『#contents #postlist blockquote』に『margin-bottom:25px;』を指定してあるのは、
記事本文と投稿日時が重なってしまうのを回避するため。
ブログ幅を広くカスタマイズした場合は折り返しがないので、この数値は少なめでOKかと思います。

投稿日時はレスポンスと同じように、『vertical-align:bottom;』で最下に配置。
投稿日時の表示位置は記事本文に絡まない場所なら上下どちらでもOKです。
でも上だとちょっとおかしな感じになったので下方に配置で収まりました(笑)


画像



以上、今回のCSS編集のポイント解説でした(にや)





今回のCSS編集で記事本文エリアが広がって見た目も良くなってスペースにも余裕も出たと思います(ん)

これに関連してー(まじ)
ブログ全体の幅を広げるカスタマイズをすると、一覧概要表示の画像が小さく感じるコトがあるかも?
そんな時はTOPページの新着記事の画像のサイズを指定するCSS編集も掲載していますのでご覧下さい。

あと、ブログ全体の幅を広げるカスタマイズのリンクもハリハリしておきます。

【関連記事】
(ほし) CSS(小技編) トップページ新着記事の画像のサイズを指定する
(ほし) CSS(スタイル編)第7回 ブログの幅を広げてみよう♪






それでは、今回はこのくらいで(ん)

|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(13件)

内 容 ニックネーム/日時
mairisさん、ありがとうございました<(_ _*)>
説明、さすがですね。
「これがこうやから、こうなる」っていうふうに素人の私にとって凄くわかりやすい解説で、迷うことなく、すぐできました。
それに超早いアップ、感謝です! 尊敬します!
これからも宜しくお願いします。

hiroxx
2012/04/15 04:25
hiroxxさん、いらっしゃいませ(ん)
おまたせいたしました(にこ)
設定もうまくいったようでなによりでした♪

こちらの記事は随分前からアップしようと構想はあったんですが、どうやって書こうか悩んでいた記事だったりします。
ご質問を頂いたお陰でやっとこエンジンがかかりました(笑)
後押ししていただいたことに感謝いたします(ん)人
また何かありましたらお気軽にコメント頂けたらと思います☆
mairis
2012/04/15 12:07
なんとな〜く気になってたんで早速導入してみました(ん)
900pix・2カラムで(気まずい)100pixごとに、100幅広がってるので

適当に『width:630px; /* 900px・2カラム */』で上手くいったみたいです(ひょえ)
CSSの方はさっぱり分からないので、毎回助かっております(わら)
あちょ
2012/04/16 20:17
あちょさん、いらっしゃいませ(にや)
あちょさんところは画像も大きくされてますし、こちらのCSS編集されるとバランスも取れていいかと思います。
サンプルは少なめにしちゃいましたけど、900pxならそんな感じですね。
ブロブの幅を広げている場合は「(標準+広げた分)px」と考えて頂ければOKです。
mairis
2012/04/17 15:59
こちらでよかったのか(汗)
Ads by Googleの件よろしくお願いいたします(@あせ)
F
URL
2012/05/10 22:13
Fさん、いらっしゃいませ(ん)
こちらに呼びつける形になり申しわけございませんでした。
メッセージを送付させて頂きましたのでご覧くださいませ(o*。_。)oペコッ
mairis
2012/05/11 01:31
mairisさん、おはようございます。

いつもお世話になっております。メッセージ有難うございました。
さっそくやってみようと思っています。

前のコメントでニックネームが「F」になっておりました
お許しくださいませ<(_ _)>

いつもブログにお邪魔して、css編集を勉強させていただいております。
感謝です♡♡

FightKei
URL
2012/05/11 07:58
>> FightKeiさん
おつかれさまです(ん)
あんな具合になってますのでお好みで数値等変更してください。
あとメッセージを1件送信させて頂いておりますのでよろしくお願いします(にこ)
mairis
2012/05/11 12:28
malrisさん、こんばんは。
このブログの解説は本当にためになります。
ありがとうございます!

さて、ご相談があります。
既にどこかで説明済みの場合はすみません・・・。

新着記事一覧の画面で、「タイトル」と「日時」の比率をカスタムすることはできますか?
全体の幅は変えたのですが、一覧のバランスが悪くなってしまったので、方法があれば調整したいです。
タイトルの部分が異様に狭いから、もしかしたら変なところを弄ってしまったのかも・・・。(@あれ)

お手すきでしたらアドバイスお願いします!ブログURLも載せておきます。
眉上市子松
URL
2012/09/24 18:40
眉上市子松さん、いらっしゃいませ(ん)
トップページの『タイトル』『日時』のトコロですね。
実はここ、HTMLファイルに直接比率が書き込んあるんです。

<th width="77%">タイトル</th><th width="23%">日 時</th>

thタグにID値やclass値がふられてないので、残念ながらCSS編集だけで比率の調整をすることはできません。
さて、これを踏まえて「タイトルが異様に狭い」の件です。
『#contents #postlist th』のところを「display:none;」で非表示にされてますよね。
この非表示指定がバランスに影響しているようです。
「display:none;」を消してバランスの確認をしてみてください。
〜つづく〜
mairis
2012/09/24 21:37
〜つづき〜
それから別件ではありますが、スタイルシートを拝見させてもらったら記述ミス等ありましたのでピックアップしておきますね。

90行目付近 「}」を消去

140行目付近 『#contents #postlist .response a』「font-size」には単位が必要です。
font-size:13; → font-size:13px;

171行目付近 『#contents #postlist td.date』記述ミスがあります。
color:ffffff; → color:#ffffff;

241行目付近 「{」「}」が全角です。「font-size」には単位が必要です。
/*追加 QRコード*/
#utilities #qrcord{
font-size:5;

 
 ↓
/*追加 QRコード*/
#utilities #qrcord{
font-size:5px;
}

471行目付近 『#blog #comment table .sub』色指定の文字列が記述ミスです。
#FFFFF →#FFFFFF

修正ポイントは以上です。
mairis
2012/09/24 21:37
malrisさん、ありがとうございます!解決しましたー(うる)
HTMLファイルのことや他所の修正まで・・・助かります。勉強になりました。
間違えやすい所も分かったので、今後参考にさせていだたきます!
お邪魔しました(ぺこ)
眉上市子松
2012/09/25 15:12
>>眉上市子松さん
お疲れ様でした(ん)
解決して何よりです(にこ)
また何かありましたらお気軽にコメント下さいませ〜♪
mairis
2012/09/28 16:35

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(小技編)TOPページ新着概要表示の記事本文エリアを広げちゃう裏ワザ☆ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる