ページTOPへ

Seesaaブログ新デザインシステムのパンくずリストを設置する方法

Seesaaブログ新デザインシステムのパンくずリストを設置する方法



当サイトからご購入の方に豪華特典付き!






Seesaaブログ新デザインシステムのパンくずリストを設置する方法

 

パンくずリストとは、訪問者がサイト内の階層をすぐに判断しやすくするための簡単なサイトマップのようなものです。

 

トップページに連結したリンクを貼るため、訪問者が現在閲覧しているページの場所がわかりやすくなるため、迷子にならないようになります。

 

ちなみにパンくずリストというのはこんなものです:

 

 

 

パンくずリストを設置することによって、トップページの被リンク数が自動的に増えていき、より強力なSEO対策が可能です。

 

今回Seesaaブログ新デザインシステムのパンくずリストを設置する方法をご紹介します。

 

 

パンくずを設置する手順

 

まずはseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したデザインタイトル」をクリックします。

 

 

「HTML編集」をクリックします。

 

するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。

 

<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">
<a href="<% blog.page_url %>">トップページ</a> >
<% loop:list_article -%>
<a href="<% article_category.page_url %>"><% article_category.name %>
</a> > <% extra_title %>
<% /loop -%>
</div>
<% /if %>

 

 

追加できたらこれで「保存」をクリックします。これでパンくずリスト自体は設置されていました。

 

 

パンくずリスト位置を調整する

 

 

パンくずリスト位置を調整しないと、グローバルナビとくっついてるので、調整する必要があります。

 

先ほど同様にseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したデザインタイトル」をクリックします。

 

次の画面で今度は「スタイルシート編集」というタブをクリックします。

 

 

スタイルシートのコードの一番下までスクロールして次のコードを追加します。

 

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

 

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

 

「20」という部分は上への余白。この値を大きくすればパンくずを下にずらす事が可能です。

 

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

 

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

 

関連ページ

Seesaaブログ【新システム】のヘッダー画像を設置する方法
Seesaaブログ【新システム】のヘッダー画像を設置する方法について解説します。
Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法
Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法について解説します。
Seesaaブログ【新システム】の背景や文字を自由に変更する方法
Seesaaブログ【新システム】の背景や文字を自由に変更する方法について解説します。
Seesaaブログ【新システム】をSearch Consoleと連携させる方法
Seesaaブログ【新システム】をSearch Consoleと連携させる方法について解説します。
Seesaaブログにファビコンの作成と設置方法【新システム】
Seesaaブログにファビコンの作成と設置方法について解説します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材