■Seesaaブログのタグ一覧ページを編集
■ページ上部のタグクラウドとタグサーチを、記事の下に移動
■HTMLで「<div class="tag-cloud">」と「<div class="tag-search">」を移動
■ページ上部のタグクラウドとタグサーチを、記事の下に移動
■HTMLで「<div class="tag-cloud">」と「<div class="tag-search">」を移動
タグ一覧ページは、ページタイトルの下に「タグクラウド」(タグ一覧リスト)があります。
タグクラウドの下には「"○○"でSeesaa全体を検索する」という案内リンクが表示されていて、その下から記事リスト(短文表示。「続きを読む」で折りたたまれている)が始まります。
タグ一覧ページは、タグを付けている記事を一覧表示させるページです。
閲覧者はタグ付けされている記事を見るために「タグ」を選択して、そのタグ一覧ページを開くわけだし、まずは「記事」を表示させた方がいいのではないかと思うんですよね。
「タグクラウド」や「"○○"でSeesaa全体を検索する」という案内リンクを、ページを開いてすぐ上の目立つ場所に表示させておく必要はない、というのが私の考えです。
タグ一覧ページで最初に記事を表示させた方がいい理由
もう一度同じ画像を掲載しておきますが、この画像はデモブログの画像だし、カスタマイズをしている最中の画像なので「タグクラウド」にはまだ3つしかタグが入っていません。
3つの単語しか入っていないので画像を見てもピンとこないかもしれませんが、もしもタグを30個設定していたら、ページ上部に30個のタグが並んで表示されるわけです。
邪魔、です。
それに、「"○○"でSeesaa全体を検索する」というリンク(これを「タグサーチ」と言います)もページ上部に設置しておく必要があるのか、私には疑問です。
タグ一覧ページは記事に付けられたタグをクリックして表示させるページです。どんな内容の記事があるのかを知りたいから、タグをクリックして開いているページなのです。
ということは、先に自分のブログ内の記事を確認してから、その上でSeesaaブログで同じような内容について書かれた記事をチェックしてもらう方がいいと思います。
せっかく書いたのだから、自分のブログ記事を読んでもらった方がいいでしょう?
いきなりSeesaaブログ全体から同じようなタグが付けられた記事を検索するならば、自分のブログにそのタグを付けた意味は何?って話です。
(もちろん、私のように「自分が把握したいから」「ナビメニューで表示するために」タグを付けている場合もあると思いますが、どちらにしても、まずは自分の記事を読んでもらった方が、記事を書いた甲斐があると思います)
ということで、タグ一覧(タグクラウド)と「"○○"でSeesaa全体を検索する」リンク(タグサーチ)は、ページの一番下、つまり「もっと見る」ボタンの下に表示させます。
(別の場所に表示させたい方は、ご自分で好きなようにコードを移動させてください)
タグクラウドとタグサーチをページ下部に移動する
HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<div class="tag-cloud">」というタグを検索します。
350行あたりにあると思います。
「<div class="tag-cloud">」と「<div class="tag-search">」が続けて記述されていますので、この部分を編集します。
上段が「タグクラウド」、下段が「タグサーチ」のコードです。
コード全部を選択している状態で、キーボードの「Ctrl」+「X」で切り取り、「Ctrl」+「V」で移動(貼り付け)させます。
移動させる場所は、455行あたりのこの部分です。
切り取ったコードは必ず「<% /loop -%>」の上に置いてください。
ちなみに、「タグクラウド」と「タグサーチ」の全部のコードを移動させるために、コードを選択して「Ctrl」+「X」で切り取ると、移動先は441行あたりになります。
切り取られたコード分、HTMLの記述が減るわけですから、行も減るわけです。
‥‥この説明、わかりにくいでしょうからコードを切り取った後の画像も掲載しておきます。
コード移動後のHTML
この図のようになります。
しつこいですが、切り取ったコードは必ず「<% /loop -%>」の上に置いてください。
コード編集後のタグ一覧ページ
コードを編集した後(タグクラウドとタグサーチをページの一番下に移動させた後)は、このようなページ構成になります。
記事の下にタグクラウドとタグサーチを移動させましたが、「もっと見る」ボタンとタグクラウドがくっついています。(そりゃそうです)
ということで次の記事で、タグクラウドを調整して余白を設定したいと思います。
■【Seesaaブログ新デザインシステム】タグ一覧ページのタグクラウドを編集する
タグクラウド自体もあまり目立たない配色、というかやけにシンプルですので、余白と合わせて調整したいと思います。まずはタグクラウドのスタイルを編集します。その後で、余白を付けたいと思います。‥‥
タグクラウド自体もあまり目立たない配色、というかやけにシンプルですので、余白と合わせて調整したいと思います。まずはタグクラウドのスタイルを編集します。その後で、余白を付けたいと思います。‥‥