8/31追記【予告】「はてなブログタグ」への対応方法や注意点、確認方法について – はてなCMSヘルプセンター

平素は、はてなブログMediaをご利用いただきありがとうございます。
はてなブログ全体で「はてなブログタグ」の機能が追加されます。
ブログにタグが表示されると、ブログからの回遊や検索経由の流入増加が見込め、特定のキーワードに関心の高いユーザーから認知される機会が増えることが期待できます。

はてなブログタグ (以下「タグ」という) の追加に伴い、貴社メディアをタグに対応させるために、本ページに記載の作業をメディア対応期限までに行ってください。
こちらはデザインテーマをカスタマイズしているブログが対象となり、はてなが提供しているデザインテーマでは問題ありません。

また、本件に関して弊社では確認を行いませんので、デザインの確認や調整が必要なメディアは個別にご対応ください。

公開前にタグを確認する方法 (8/26追記)

DevToolsのコンソールで以下の手順を行うことで、タグ機能の公開前にダミータグの確認が出来ます。メディアのデザイン調整にご利用ください。

「DevTools」の名称や画面はブラウザによって異なります。
主なブラウザでのDevToolsの開き方は次の通りです。

開発者ツールが画面下もしくは画面右に表示されているか確認します。
(1)「コンソール」タブをクリック → (2)入力欄に下記をコピー&ペースト。
「Enter」キーを押して実行します。
```
document.cookie = 'epic_flag_variants=show_dummy_tags';
```
※Firefoxの場合、警告文が出る場合があります。その際は警告文の内容に沿って対応いただくことで確認が可能になります。
実行後、以下の操作をしてブラウザを更新します。
Windows → F5 もしくは Ctrl ＋ R
macOS → Command ＋ R
すると、画像の様にダミータグが表示されます。
確認後はダミータグを無効にする為、入力欄に下記をコピー&ペースト。
「Enter」キーを押して実行すると、ダミータグは無効になります。
```
document.cookie = 'epic_flag_variants=';
```
また、ブラウザを終了もしくはCookieを削除すると同様に無効となります。
無効になるまでダミータグは表示されるのでご注意下さい。

どのブラウザ（Microsoft Edge、Google Chrome、Firefox）もコンソールを使った確認方法は各ページごとに行ってください。

タグは記事とアーカイブページに表示されます。
記事につけたタグ数だけ表示されます (はてなブログでは1記事あたり3〜5個を推奨しています)
また、表示される位置はそれぞれ以下のとおりです。

記事下にタグが表示されます。

PC	スマートフォン

記事の概要の下にタグが表示されます。
/archive を含む /archive直下のディレクトリ (/archive/2020、/archive/category など) も全て対象になります。

PC	スマートフォン

デザイン編集画面のHTML記述欄などに、、以下のclassが含まれていないか確認してください。
こちらはタグに使用しているclassのため、意図しないスタイルがあたる可能性があります。

下図のアイコンや記号はタグを表現するものとして使用します。
そのため、カテゴリーでの使用は避けていただき、現在カテゴリーで使用している場合はアイコンや記号の見直しをお願いします。

特に # はタグ機能で使用するため、それ以外の要素で使用することでタグと混同されるおそれがあるため非推奨となります。

Q. 記事にタグを設定しないとどうなりますか？
- A. タグを設定しない場合、記事にタグは表示されません。また、自動的にタグが付くこともありません。
Q. タグとカテゴリーの使い分けについて
- A. 記事に適したタグをつけることで、自分と同じ興味を持つ人に見つけてもらいやすくなります。カテゴリーは、自分のブログ内で記事を分類したいときにご利用ください。

タグの意味やその他の質問は「はてなブログタグページ」をご確認ください。