パンくずリスト

パンくずリストをリッチリザルト対応にカスタマイズ 構造化データ(microdata形式)記述例

Categories | ホームページ ブログ(WordPress) SEO

パンくずリストをリッチリザルト対応にカスタマイズ

構造化データ(microdata形式)記述例

小難しいことは抜きにして、SEOにヨサげそうなリッチリザルト

これらは何タイプかあるようですが、手始めにパンくずリストをリッチリザルト対応にしてみます。

 

リッチリザルト対応にカスタマイズしたページはHCZ TVです。

https://www.hcz.jp/hcz-tv.html

 

リッチリザルトされてない時は、Google検索結果にはこう表示される。

※キーワードは「ゼファー1100 動画集」にて検索。

17617b337ddd1c8582181d8ece005388 400x156 パンくずリストをリッチリザルト対応にカスタマイズ 構造化データ(microdata形式)記述例

リッチリザルトに対応されると上記赤枠(パンくずリスト)が若干変わるようです。

変更・更新されるのには少し日数が掛かるようです。

なので、リッチリザルト対応のページになっている確認は、

Googleが提供する リッチリザルト テスト

を行なえば直ぐにわかります。 ↓

2c634cd07abd287c51abf8cc4a31a6df 400x266 パンくずリストをリッチリザルト対応にカスタマイズ 構造化データ(microdata形式)記述例

 

パンくずリストのテスト結果 詳細には空白(赤枠)があります。

1448ce8f8770ad7aa82f354b61cc8d49 400x291 パンくずリストをリッチリザルト対応にカスタマイズ 構造化データ(microdata形式)記述例

これらは特にエラーではないので、そのまま放置しても大丈夫です。

 

元々当サイト(HTML)にはパンくずリストを設置しています。

それらをカスタマイズ(コードを追記)するだけでリッチリザルト対応になります。

では、カスタマイズ前・後のHTMLを見比べて違いを理解して下さい。

以上

 

カスタマイズ前

<ul>
    <li><a href="https://www.hcz.jp/" title="トップページ">HOME</a></li>
    <li>HCZ TV</li>
  </ul>

 

カスタマイズ後 (microdata形式)

<ul vocab="https://schema.org/" typeof="BreadcrumbList">
    <li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://www.hcz.jp/" title="トップページ">
<span property="name">HOME</span></a><meta property="position" content="1"></li>
    <li property="itemListElement" typeof="ListItem">
<span property="name">HCZ TV</span><meta property="position" content="2"></li>
  </ul>

 

追伸

4日後ググってみたら、何も変化が見られない。

反映までには比較的日数が掛かるのであろうか?

はたまたGoogle側で認証を拒否った?

念には念にで、最新の「sitemap.xml」をサーバーにアップロードしてみました。

 

Comment(0) | Trackback(0)

TAGS: / / / / / | 2022年5月27日 |

DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の2

Categories | ブログ(WordPress) DW Question Answer

DW Question Answer(ワードプレス・プラグイン)のレイアウト「パンくずリスト」を

カスタマイズ 其の2。

その1ではトップページのフィルターナビゲージョン的なパンくずリストをカスタマイズ

しましたが、今回は投稿ページのパンくずをカスタマイズ。

デフォルトだとこんな感じ・・・

 

1104 01 400x300 DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の2

 

当自作テーマだと、パンくずリストの文字サイズがでかすぎて、全体的な文字バランスが

悪いです。改良方法は、スタイルシートの変更だけで見栄え良くシンプルしていきます。

 

バージョンは DW Question Answer1.4.3.4  いじるファイルはstyle.css

保存先階層は ・・・

/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

※ 何かしらstyle.cssに手を加えている場合、変更するところ(行数)が変わります。

どこをいじるかは「 /* Breadcrumbs */ 」で、css内を検索して探してください。

 

432行~435行

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin-bottom: 20px;
}

 

変更後

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin: 30px 0;
 font-size:12px;
 line-height:26px;
}

.dwqa-breadcrumbs .dwqa-current{ display:none}

.dwqa-breadcrumbs a {
 padding: 0em 1em 0em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 }

.dwqa-breadcrumbs a:hover{
 background: #33F6F8;
}

.dwqa-breadcrumbs a::after,
.dwqa-breadcrumbs a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em; 
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
}

.dwqa-breadcrumbs a::after{ 
 z-index: 2;
 border-left-color: #ddd; 
}

.dwqa-breadcrumbs a::before{
 border-left-color: #ccc; 
 right: -1.1em;
 z-index: 1; 
}

.dwqa-breadcrumbs a:hover::after{
 border-left-color: #33F6F8;
}

.dwqa-breadcrumbs .current,
.dwqa-breadcrumbs .current:hover{
 font-weight: bold;
 background: none;
}

.dwqa-breadcrumbs .current::after,
.dwqa-breadcrumbs .current::before{
 content: normal; 
}

 

1104 02 400x300 DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の2

 

結果的にスタイルの指定が多くなってしまいましたが、利用される方はコピペでね。

レスポンシブにも対応してます。

施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。

しまい

Comment(0) | Trackback(1)

TAGS: / / | 2016年11月4日 |

DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の1

Categories | ブログ(WordPress) DW Question Answer

DW Question Answer(ワードプレス・プラグイン)のレイアウト「パンくずリスト」を

カスタマイズしました。パンくずリストとは、下画像のようにウェブページ内で自分が

今どのページにいるのかを示すリストです。

 

1102 01 400x300 DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の1

 

デフォルトは英語で、日本語化すると下画像のような表示になります。

ただ単語が羅列してるだけで、芸がないように思えます。また現在どの場所のページが

表示されているかさえ分かりづらい。

 

1102 02 400x300 DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の1

 

個々のテーマスタイルシートに依存(文字サイズなど)しているところもあるでしょうが、

私的にカスタマイズしてみました。

参考まで

 

バージョンは1.4.3.4 いじるファイルはstyle.css 保存先階層は ・・・

/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

 

504行~521行

/* Question Filter */
.dwqa-question-filter {
	margin-bottom: 20px;
}

.dwqa-question-filter span,
.dwqa-question-filter a {
	margin-right: 10px;
}

.dwqa-question-filter a {
	border: none !important;
	text-decoration: none;
}

.dwqa-question-filter a.active {
	border-bottom: 1px solid #ddd !important;
}

 

 

変更後

/* Question Filter */
.dwqa-question-filter {
	border-bottom: 1px solid #C0C0C0;
	margin-bottom: 30px;
}

.dwqa-question-filter span{
	display:none
	}

.dwqa-question-filter a {
	border: 1px solid #C0C0C0 !important;
	border-bottom:0 !important;
	margin-left:10px;
	margin-bottom:-1px;
	text-decoration: none;
	font-size:13px;
	padding:2px 10px;
	background-color:#E3E7E4;
	word-break:break-all;
	word-wrap:break-word;
	display:inline-block
}

.dwqa-question-filter a.active {
	border-bottom: 0px !important;
	background-color:#FFFFFF;
}

 

1102 03 400x300 DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の1

 

いちおレスポンシブにも対応していると思いますが、

あくまでも当方が作った日本語化ファイルでのカスタマイズです。

枠からはみ出す場合、おのおの微調整するか、下記URLから日本語化ファイルを

ダウンロードして下さい。

 

DW Question Answer 日本語化|ファイルダウンロード 【 WordPress プラグイン 】

 

施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。

投稿ページのパンくずリスト カスタマイズはその2もご覧下さい。

 

DW Question Answer レイアウトをカスタマイズ パンくずリスト偏 其の2

 

Comment(0) | Trackback(0)

TAGS: / / / | 2016年11月3日 |