D.Gray-manのクロウリーファンブログです。雑誌の感想などを書いています。(ネタバレは発売日以降)

カテゴリ: サイト制作記録  2009/07/13(月)
どうも便利ナビのページジャンプが上手く動かないなぁ…と困って
ネットをグルグル検索してたらすごくピッタリな記事が!!

FC2ブログでカテゴリの記事一覧を表示する方法  (「Webpark」様)

こ、これだー!!


■今までの「カテゴリーの記事一覧」画面

brogkategori1a.gif

これはこれで便利に使っていたのですが、色々困る面もあったんですよね。
「画面が上下に長くて次のページになかなか行けない」とか
「同カテゴリの記事を通して読めない。一気に読みたい時いちいち戻るのが手間」とか。

特に一番問題だったのは、どうも検索からこのページに出る人がいたっぽい事。
私が閲覧者でこういうページにブログ内検索が無かったら速攻でブラウザバックします。
せめて記事本文がページに出ていたら特定語句をブラウザから検索できるのに…!!

なので、希望は「1画面に収まる記事一覧+ページ送り」と
「同カテゴリの記事本文羅列」の両方。


■「Webpark」様のタグを導入させて頂いた直後の画面

brogkategori2.gif

よーしいい感じだ!!


ええと、あとは以前書いたタグを削って記事本文を出して、
このままじゃ殺風景だから装飾しないと。 装飾…。


……。

…ええと、
…どうやったらこのHTMLにCSSを対応させられるの…?(←ド素人)



とりあえずCSSの本を最初から読み返してみる。
ええと…、あ、セレクタ!!これだ!!
ええとええと、このタグはdiv class="free_category"だから
最初にピリオド付けてクラスの文字を入れたらいいのかな。


…あれ?変わらない…。
何でだ…理屈は合ってるはずなのに…!!


…あ、そうか!!ブラウザがキャッシュ読み込んでる?!
ならページの更新で!!


…あれ?なんか枠が妙に大きい…。
free_categoryで一括指定したからかな。リストとタイトルと前後ナビで別々にCSS指定しないとダメかなこれ。ええと、タイトルはpしか無いんだけどクラス名って勝手に好きなの付けていいんだっけ?


■紆余曲折しつつ完成

brogkategori3.gif

よし、1画面で全部読める!!バッチリだ!!


CSSは、最初のpをp class="contents"とクラス名付けしてから

.free_category .contents {
}
.free_category ul {
}
.content-nav {
}


こういうタグをCSSの最後に付けて、その中にバディングやバックグラウンドなどの指定を入れました。

…ううむ、CSSがやたら長い…。
もしかしてこれ重いだろうか…。プラグイン3をこっちに流用した方が良かったかなぁ。


あとまわりの枠線は、最初はoutsetで全体を一括で括ったのですが
OperaとFirefoxとInternetExplorerで色が大分違って見えたので
solidで個別に色指定しました。
(IEだと色の差がかなり大きく、Operaだと色の差がほとんど無かった)

サイト制作記録 の最新記事

トラックバック

%url