地味ながらも日々

目標 モノではなくお金を貯める。  ふるさと納税8年目 お得情報、節約、日々のこと

Seesaaブログのタグページをリッチにカスタマイズ

      2015/07/23

Seesaaブログのタグページはデフォルトでは以下のような素っ気ないページですが、
タグ自体はサブカテゴリのように使ったり、違うカテゴリの記事を結びつけたりと色々と使いようはありそうです。

タグページデフォルト今日はカテゴリページのようなリッチな見た目にタグページをカスタマイズする方法をご紹介しようと思います。
このカスタマイズで下記のような表示になります。(パンくずリストは「SeesaaブログにGoogleに認識されるパンくずリストを追加」のカスタマイズでつきます。)

カスタマイズタグページ1 

カスタマイズタグページ2

タグページにAdSense広告を貼るには必須の変更

Seesaaブログのタグページはデフォルトではタイトルと日付のみしか載っていないので、コンテンツ無しとしてAdSenseのポリシー違反となることがあるようです。
この対処としては以下の3つが考えられます。

タグページに広告を貼らない

タグページに広告を貼らなければ、ポリシー違反にはなりません。

コンテンツHTMLの編集で挿入した広告であれば、タグページには表示されません。
注意しないといけないのはサイドバーの広告など自由形式のパーツを使って表示しているページです。

自由形式のパーツはトップページに表示しているとタグページにも表示されるので、トップページでの表示を消す必要があります。

タグページへのリンクを削除

タグを使わないならタグページへのリンクを削除してしまうのもありです。
デザインタグクラウドというパーツをコンテンツから削除すれば、タグページへのリンクがなくなります。

タグページに記事の内容を表示

カテゴリページのように、記事の内容を表示するようカスタマイズすればタグページに広告を貼っても問題ありません。

以下カスタマイズの方法です。

カテゴリページのような見た目にタグページをカスタマイズ

タグページのカスタマイズは全体HTMLの編集となります。

元のHTMLのハイライトしている部分を削除して変更後のHTMLになるようコードを追加します。

元のHTML

<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><a href="<% article.page_url %>"><h2><% article.subject %></h2></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div>
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(240) | tag_strip %></div>-->
</div>
<% /loop -%>

4行目はタグ検索用のリンクですが、Seesaa全体の検索は特に必要なさそうなのでこれも削除しています。

変更後のHTML

<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="blog">
<div class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></div>
<div class="blogbody">
<h2 class="title"><a class="title" href="<% article.page_url %>"><% article.subject %></a></h2>
<div class="text"><% article.entire_body | text_summary(240) %><a href="<% article.page_url %>" >続きを読む</a></div>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
<% if:article.accept_comment_show -%>
| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:article.accept_tb_show %>
| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:blog.fan_setting.accept_fan %>| <a href="<% blog.fan_regist_url %>" title="このブログの読者になる"><img src="<% site_info.blog_url %>/img/fan_read.gif" alt="このブログの読者になる" border="0" /></a><% /if %>
| <a href="<% blog.fan_blog_reader_url %>" title="更新情報をチェックする"><img src="<% site_info.blog_url %>/img/fan_received.gif" alt="更新情報をチェックする" border="0" /></a>
</div>
</div>
</div>
<% /loop -%>

ソーシャル系のリンクはタグページでは許可されていないようなので設置できませんでしたが、なかなかそれっぽくなったのではないかと思います。

カスタマイズタグページ2

CSSの編集

テーマによってはCSSの編集をしたほうが良い場合もあります。
今回の変更ではtag,tag-bodyというclassが残っていて、CSSがあれば記事表示部分にも適用されます。
カテゴリページと比べて表示に違和感がある場合はCSSから.tagもしくは.tag-bodyの箇所を削除してみてください。

私の使っていたテーマでは.tagを消すと表示がカテゴリページとほほ同じになりました。

変更したHTML

今回変更したHTMLを以下に公開しています。revisionを見ると変更した箇所がわかりやすいかと思います。

全体HTML


https://gist.github.com/kantan2015/afe161226bc225e1930e/f2ed4ced17ed7c65b7bda6423fbe1bd6a75474f9

 - Seesaaブログ

Message

メールアドレスが公開されることはありません。

CAPTCHA


  関連記事