【Seesaaブログ新デザインシステム】タグ一覧ページの記事を線で囲む|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。記事を書いた時に設定している「タグ」をクリックすると記事一覧を表示することができます。この、タグをクリックして開くページのことを勝手に「タグ一覧ページ」と呼ぶことにします。現時点でのタグ一覧ページです。現時点のタグ一覧ページ記事ページやコメント記入ページとは違って、タグ一覧ページは、選んだタグが付けられた記事を全部表示します。リスト表示、みたいな感じでしょうか。タグ一覧ページでは、1ページに6件の記事が表示されます。記事に書いた内容全部が表示されるのではなく、設定された文字数が表示されて「続きを読む」リンクで折りたたまれる、いわゆる「短文」表示です。何もカスタマイズしなければ、記事と記事の間がよくわかりません。記事タイトルで区別する、という感じですかね。中途半端だと思いますので、記事の1つ1つを線で囲んで、境目をハッキリさせたいと思います。トップページと同じようなイメージです。タグ一覧ページの記事部分を線で囲む点線で囲むという指示を出すclassは「article_kobetu」です。私が記事ページ設定の時に作りました。コメント記入ページ<■コメント記入ページの記事を線で囲む>でも使いましたね。■【Seesaaブログ新デザインシステム】記事ページを線で囲む(1)線で囲むというclassを作る私は、以前書いた記事で、Seesaaブログのトップページの記事コンテンツを線で囲みました。トップページに枠線を入れてしまったので、個別記事ページでも点線の枠線を入れようと思います。....点線で囲むというclass「article_kobetu」は使いまわすために作ったclassです。作ったのだから、今回のタグ一覧ページでも利用します。点線枠「article_kobetu」は既にCSSに記述しているので、HTMLだけを編集すればいいです。【注意】この記事では「article_kobetu」がCSSに記述されていることを前提に話を進めますので、「article_kobetu」を作っていない場合は、上記記事を参考にしてください。HTMLのタグ一覧ページ部分に「article_kobetu」を追加HTMLを編集します。-%>」タグで検索すると1ヶ所がヒットしますので、この部分を編集します。あ、もしかしたら「tag-search」で検索したらいいかもしれません。「tag-search」関連の下部分が、今回編集するコードです。この部分がHTML上でのタグ一覧ページの「記事」部分です。class="article_kobetu">」というタグを使用して枠を入れ込みます。終了タグ「</div>」も追加します。ついでに、HTML上でも何の指示を出しているのかわかりやすくするために見出しを入れておきます。コメント記入ページで懲りたので(笑)、コードをそのままコピペすることはおススメしません。下記の赤色の文字のように直打ちで追加してください。-%>●これで、タグ一覧ページの記事1つ1つが点線で囲まれることになります。●CSSで「article_kobetu」の設定は終わってますので、記事を点線で囲む作業はこれで終わりです。タグ一覧ページに表示される文字数を変更するついでと言っては何ですが、文字数も変更してしまいます。-%>」というコードがあります。このコードの中の数値「240」の部分が、タグ一覧ページの記事に表示する文字数(バイト)です。ご自分の好きなように変更してください。私は「150」にしてみました。コード編集後のタグ一覧ページこんな感じで、記事1つ1つを線で囲むことができました。次の記事の紹介タグ一覧ページには、ページの上の方にタグクラウドや案内リンクが入っています。ページの上部にこういうのが存在していると、正直、邪魔です。次の記事では、タグ一覧ページの各パーツ(タグクラウドや案内リンク)を入れ替えて、もう少しスッキリ表示させたいと思います。■【Seesaaブログ新デザインシステム】タグ一覧ページのパーツ(タグクラウド・タグサーチ)の順番を変更するタグ一覧ページは、ページタイトルの下に「タグクラウド」(タグ一覧リスト)があります。[必須入力]※画像の中の文字を半角で入力してください。