Seesaaブログにパンくずリストを設置する方法【新システム】

今回はseesaaブログの新システム版でパンくずリストを設置する方法を紹介していきます。パンくずリストは多くのブログで設置されていて、これによって内部リンクにもなりますし、SEO対策としても効果が期待できます。

ちなみにパンくずリストというのはどのカテゴリーの中の記事なのか？という道案内的なリンク。

意外にクリックされることも多く、SEOやPV（ページビュー）の増加も期待できるかも。それでは早速設置をしていきましょう。

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2020.04.21

スポンサーリンク

売れないのは記事のせいかも？

⇒真似してOK！商標ライティングマニュアル詳細はこちら

パンくずリストを設置する手順

まずはseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「HTML編集」を選択。

するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。このテンプレートだと17行目から22行目付近。

<header role="banner" class="l-header">
		<div class="header">
			<h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
			<p class="description"><% blog.description | nl2br | mark_raw -%></p>
		</div>
	</header>

このコードの下に次のコードを追加して下さい。

<% if:page_name eq 'article' -%>
<div class="crumb">
<div itemscope itemtype="https://schema.org/BreadcrumbList">
<!-- 1.blog.title -->
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% blog.page_url %>">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1" />
</span>
＞
<!-- 2.category.name -->
<% loop:list_article -%>
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% article_category.page_url %>">
<span itemprop="name"><% article_category.name %></span>
</a>
<meta itemprop="position" content="2" />
</span>
＞
<!-- 3.article.title -->
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name"><% extra_title %></span>
</a>
<meta itemprop="position" content="3" />
</span><% /loop -%>
</div>
</div>
<% /if %>

追加できたらこれで「保存」しておきます。これでパンくずリスト自体は設置されているはず。さらに位置の調整もしておきます。

パンくずリストの位置調整

さて、パンくずリストの位置調整。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「スタイルシート編集」というタブが選択されている事を確認。

スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。

.crumb {
margin: 5px 0px 10px 0px;
font-size: 14px;
line-height: 18px;}

ここの「margin」という部分で位置調整ができます。「上、右、下、左」と時計回りの順番で調整ができます。

「5px」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができますし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能です。

また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開きます。

「font-size」で文字の大きさを変更する事ができますし、「line-height」で高さも調整できるのでお好みで数値を変更すればOKです。

以上Seesaaブログにパンくずリストを設置する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】