【カテゴリ:パソコン ブログカスタマイズの記録】
記事の本文の右上(=記事タイトルの右下の位置)に、その記事のカテゴリを表示するように変更したので、その覚え書きです。今回参考にさせていただいたのは、以下のブログです。
SeesaaブログのHTMLカスタマイズへのリンク集: 「塑田久子、お話を作る」の記録ブログ:
http://hisakoko.seesaa.net/article/282931741.html
http://hisakoko.seesaa.net/article/282931741.html
以下は、変更後のカテゴリ表示箇所をキャプチャした画像です。
変更箇所ですが、参考にさせていただいた前記のブログでは、タイトルと本文テキストの間に挿入されていました。
しかし、自分の場合は本文テキストの先頭に横線を表示していた関係で、仕方なく本文テキストの中(の先頭)に挿入する形になりました。
あと、前記ブログではスタイルシートを使用されていましたが、自分はタグの中に直接style属性を記述することでスタイルを適用させました。
...
以下は、今回自分が変更した際の手順です。
スポンサーリンク
(2) 『記事』のコンテンツをクリックします。
以下のような画面が表示されます。
(3) 右上の『コンテンツHTML編集』をクリックします。
以下のような編集画面が表示されます。
(4) 表示されているHTMLのソースコードに、以下のコード(1行全て)を追加します。
<div style="text-align:right; margin:-5px 0px 3px 0px; font-size:11px">【カテゴリ:<a href="<% article_category.page_url %>"><% article_category.name %></a>】</div>
『text-align:right』で右寄せにし、『font-size:11px』でフォントのサイズを 11 ピクセルにしています。
『margin:-5px 0px 3px 0px』の箇所ですが、上方向に 5 ピクセルずらし、下に 3 ピクセル分の余白を入れています。(ここはケースバイケースで調整が必要です。)
具体的な挿入箇所は、以下となります。
変更前の箇所(該当箇所のみ抜粋)
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_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 %>
<% 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 %>
<% /if -%>
変更後の箇所(該当箇所のみ抜粋)
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text">
<div style="text-align:right; margin:-5px 0px 3px 0px; font-size:11px">【カテゴリ:<a href="<% article_category.page_url %>"><% article_category.name %></a>】</div>
<% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_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 %>
<% else -%>
<div class="text">
<div style="text-align:right; margin:-5px 0px 3px 0px; font-size:11px">【カテゴリ:<a href="<% article_category.page_url %>"><% article_category.name %></a>】</div>
<% 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 %>
<% /if -%>
『<div class="text">』と『<% if:diet_log %>』の間に挿入しました。
2箇所に入れたのは、テキスト表示部が条件文で分かれていたためです。
(ちなみに上側では『本文+追記文』(=全部)の表示をしており、下側では『追記文言を含む本文』のみの表示をしています。)
(5) 『保存』ボタンをクリックして保存します。
以下のように『編集を完了しました。』と表示されます。
(6) 右上の『×』マークをクリックして『記事のHTML編集』画面を閉じ、更に『保存』ボタンをクリックします。(この『保存』は行わなくても反映されますが、念のためです。)
以下のように『設定を変更しました。』と表示されます。
これで、記事本文の右上にカテゴリを表示させるようにする手順は完了です。
以上です。
スポンサーリンク
【カテゴリ:パソコン ブログカスタマイズの記録】の最新記事
- 今更ですが、サイドバーにアクセスカウンターを設置した
- 『Seesaa』ブログでカテゴリの一覧表示をツリー化した
- 『Seesaa』ブログで『記事のコンテンツHTML』を新しいソーシャルボタンの仕様に対応させた
- 『Seesaa』ブログで記事の中の画像に枠を付ける方法について
- 『Seesaa』ブログでCSS(スタイルシート)やHTMLを編集する際の手順
- 『Seesaa』ブログで『続きを読む』の文言を表示させる方法を変更した
- 『Seesaa』ブログでディスク使用量が2GBに到達したので『ストレージプラン』を申し込んでみた
- 『Seesaa』ブログのスマホ用ページに『Google Analytics』を設置する手順
- 『Seesaa』ブログに『3D球体タグクラウド』を設置してみた
- 『ブログカスタマイズ』最近変更した箇所のまとめ
- 『Seesaa』ブログでカテゴリの一覧を『メニューバー』のように表示させてみた
- サイドバーに『CUBACLOCK』のブログパーツを設置した
- 『Seesaa』ブログで『続きを読む』の文言を画像で表示することができた
- 『Seesaa』ブログに『LinkWithin』を導入した
- 『我RSS』を利用して『最近の記事』の一覧を画像付きで表示するようにした
- ユニクロのブログパーツ『UNIQLO CALENDAR』と『UNIQLOCK』をサイドバーに設置した
- 『ACR WEB』の『ページランキング』で画像が表示できた
- 『Seesaa』ブログで記事タイトルの右上に画像を表示させてみた
- 『Seesaa』ブログに『ファビコン』を設置した
- 『最近のコメント』と『最近の記事』の一覧にスクロールバーを付けた