最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
TopSeesaaカスタマイズ>タグを有効にするためにカスタマイズしてみよう

■タグを有効にするためにカスタマイズしてみよう

スポンサードリンク

タグとは、Seesaaの説明にもあるが、自分が書いた記事に関するキーワードを登録しておくことで、他のユーザーが設定したキーワードと関連性を持たせることができるツールのことをいいます。

タグを使えばアクセスアップや記事の関連付けが簡単にできるので検索されやすくなります。

私は、タグは使って損はないと思います。

Seesaaブログをカスタマイズせずに使っている人は、タグを使うのは簡単です。Seesaaガイドツアーに書いてある通りにすれば、問題ありません。

しかし、カスタマイズして使っている人は、自分でHTML、CSSを編集しなければいけません。

タグを使いたい人は、カスタマイズしてみてください。



Seesaaブログ にはもう登録した?

但し、今回は大幅な変更になりますので、必ずバックアップを取ってからカスタマイズしてくださいね。

まず、記事コンテンツのHTML編集から行います。

分からない人は、カスタマイズしていないと思いますが、記事コンテンツのHTML編集の仕方が分からない方は、こちらの記事を参考にしてください。

真ん中ぐらいにありますので、以下の文字列を探してみてください。そして、見つかったら赤の文字列を追加します。

<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %>

<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
</div>
次にHTML全体の編集を行います。

<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div>
</div>

</div>
<% /loop %>
<% /if -%>
の後に
<% if:page_name eq 'tag' -%>
<div class="tag">
<script language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" id="tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div>
<script language="javascript"><!--
tag_cloud("tag_cloud");
--></script>
<br />
<% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%>
<br />
<% 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 %>"><% article.subject %></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 -%>
<% /if -%>
<% if:tag_service.service_key eq 'photos' -%>
<% loop:list_data -%>
<div class="tag-photos">
<% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%>
<table>
<tr>
<td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td>
</tr>
</table>
<div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br />
<% if:photo_info -%>
サイズ:<% photo_info.width %>×<% photo_info.height %><br />
<% if:photo_info.size %>容量:<% photo_info.size | filesize %><% /if %>
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'audios' -%>
<% loop:list_data -%>
<div class="tag-audios">
<div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=
no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a>&nbsp;
<span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>&nbsp;&nbsp;<% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>&nbsp;&nbsp;<% /if %><% if:audio_info.size %><% audio.size | filesize %>&nbsp;&nbsp;<% /if %><% /if -%></span></div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'videos' -%>
<% loop:list_data -%>
<div class="tag-videos">
<table>
<tr>
<td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=
no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td>
</tr>
</table>
<div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=
no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br />
<% if:video_info -%>
<!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>-->
時間:<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br />
容量:<% video.size | filesize %><br />
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if %>
<% if:tag_service.service_key eq 'files' -%>
<% loop:list_data -%>
<div class="tag-files">
<div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div>
</div>
<% /loop -%>
<% /if -%>
<% if:pager -%>
<div class="tag-navi">
<% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %>&nbsp;&nbsp;<% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %>
</div>
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%>
</div>
<% /loop -%>
</div>
<% /if -%>
これでHTML編集は、完了です。

CSS編集については、自分の好きなようにしていいですが、私は他のブログ(無料ブログでビジネスブログ)を参考に以下のようにしています。

.tag-word{
margin:20px 0px 0px 0px;
line-height:1.4em;
}
.tag{
padding:10px;
position:relative;
font-size:80%;
color: #333;
}
.tag a{
color:#0000FF;
}

#tag_cloud{
border:1px solid #CCC;
padding:10px;
text-align:left;
position:relative;
}
#tag_cloud a {
padding:2px;
}
.tag-title{
font-size:120%;
font-weight:bold;
text-align:left;
}
.tag-body{
margin:10px 0px;
padding:10px 0px 0px 0px;
position:relative;
}
.tag-service{
text-align:left;
font-weight:bold;
border-bottom:1px solid #CCC;
padding:0px 0px 5px 0px;
clear:left;
position:relative;
}
.tag-search{
text-align:right;
padding:5px 0px;
margin-bottom:10px;
font-weight:bold;
position:relative;
}
.tag-article{
padding:0px 10px 10px 10px;
text-align:left;
position:relative;
}
.tag-article-title{
text-align:left;
padding:0px 0px 5px 0px;
font-weight:bold;
position:relative;
}
.tag-article-posted{
font-weight:normal;
position:relative;
}
.tag-article-summary{
padding:0px 10px;
line-height:1.4em;
position:relative;
}
.tag-more{
text-align:right;
margin:10px 0px;
clear:left;
position:relative;
}
.tag-photos{
float:left;
margin:10px;
position:relative;
width:150px;
height:200px;
}
.tag-photos-title{
line-height:1.4em;
padding:5px 0px;
text-align:left;
position:relative;
}
.tag-audios{
margin:5px;
position:relative;
}
.tag-audios-title{
text-align:left;
font-weight:bold;
padding:0px 0px 5px 0px;
position:relative;
}
.tag-audios-posted{
font-weight:normal;
position:relative;
}
.tag-videos{
float:left;
margin:10px;
position:relative;
}
.tag-videos-title{
line-height:1.4em;
padding:5px 0px;
text-align:left;
position:relative;
}
.tag-navi{
clear:left;
text-align:center;
margin:10px 0px;
position:relative;
}
これで、HTML、CSS編集ともにおしまいです。再構築してください。



ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ
スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック

このページのトップへ▲
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。