〜 さら さら さらり 〜     

アクセスカウンタ

zoom RSS 【 CSS 】 ウェブリブログ <3>

<<   作成日時 : 2014/12/21 00:00   >>

トラックバック 0 / コメント 0





 スッキリ! 記事一覧!








前回 【 CSS 】 で トップページ 【 記事一覧 】
行間を広げ、文字サイズ 大きくなりました。



ワタシは、記事一覧に 「画像 設定」 をしていないので
「タイトル / コメント・トラックバック / 日時」 の表示が
2行になってしまいました。







---------------------------------------------------------
|【メッセージを…                  |2014/12/21 00:00|
|            トラックバック / コメント
---------------------------------------------------------






1行にしたく 再び maggothandさん に教えていただきました。
抜粋させていただきます。





+++   +++   +++ 




テーブルという枠組みで構成されていて、
2行で1つの新着記事を表示している状態です。


つまり、【メッセージを…の下が開いているのは、
"トラックバック / コメント"という部分が2行になっているためです。


この隙間を詰める方法は2つあって、
ブログ >設定 >オプション >CSS編集で表示されるCSSを編集します。


編集する前に、戻せるように表示されているCSSを全行コピーして
メモ帳などに貼り付けておいて、作業された方が良いと思います。




1つは、"トラックバック / コメント"を消してしまう方法です。

これは、下の部分で非表示になり、一行で表示されるようになります。



#contents #postlist p.response{
display:none; /* <- この部分を追加 */
}







2つめは、タイトルを左に寄せて、
トラックバック / コメント"を右に寄せて1行で表示する方法です。


この方法はタイトルが長くなった場合に
2行で表示されてしまう可能性があるのですが
おそらくCSSにないので、全行をを新しく追加します。


タイトルとトラックバック表示が1行内で左右に表示されるようになると思います。



#contents #postlist p.response{
display: block; /* <- この部分を追加 */
float:right; /* <- この部分を追加 */
}







+++   +++   +++   




2 『 タイトル左寄せ ・ トラックバック / コメント"右寄せ 1行表示 』





/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/


/*---------------- タイトル(大) ----------------*/


/*---------------- プロフィール ----------------*/


/*------------------ 新着記事 ------------------*/


/* 一覧概要表示 */



前回 同様 この下にコピペでOK!







画像


















おかげ様で 希望通り スッキリしました!



反省点 … 【 テ−マ設定 】 しなかったコト。
いざ 前記事 探す時 ひや汗モン

目指すは Simple! この1点!



maggothandさん … 本当に ありがとうございます。



アホなワタシに わかりやすくに教えていただき
心から感謝しています。

この場を借りて 御礼 申し上げます。


深謝!




ブログ整理のため 日時 改めて直します。
どうぞ よろしくお願いします。




おっちょこちょい no せっかちん!  さら   














■ メッセ−ジフォ−ム ■
  

  




 
 










 
















月別リンク

【 CSS 】 ウェブリブログ <3>  〜 さら さら さらり 〜     /BIGLOBEウェブリブログ
文字サイズ:       閉じる