2021/08/26 (更新日: 2022/03/14)

【コピペOK】WordPressでタグクラウドを設定する方法【Manablog Copy対応】

Web design

WordPressのタグクラウトってなんか変…。と思ったので、ボタン風のタグクラウドを作りました。よかったら使ってください。

カテゴリをまたがって関連性のある記事を書いたときや、まだカテゴリが定められてないブログ初心者にとって、タグの設定は便利ですよね。

そう思ってタグクラウドを作ったのですが、便利なタグに落とし穴もあります。上手に使って、書き手にも読み手にも意味あるタグ使いをしたいですね。

この記事では下記についてシェアいたします。

• WordPressデフォルトのタグをカスタマイズする方法（ほぼコピペ）
• おまけ 『タグの落とし穴』

↓ ちなみにデフォルトのタグクラウトはこちら

うん…。やっぱなんか変だよな、って思う。

ではさっそくいい感じのタグクラウトを設置していきましょう！
10分もあればできちゃいます♪

【コピペOK】WordPressでタグクラウドを設定する方法【Manablog Copy対応】

タグクラウドの設定場所はサイドバーのこの位置

カスタマイズするウィジェットはこちら

こちらのコードを『追加CSS』に追記

サイドバーにデフォルトのタグクラウトを設置できたら、こちらを『追加CSS』にコピペです。

/*ボタン風タグクラウドのデザイン*/

.wp-block-tag-cloud{
 margin-bottom: 30px;
}
.wp-block-tag-cloud a {
 display: inline-block;
 background: #60B590; /* 背景色 */
 font-size: 14px !important; /* 文字のサイズ */
 line-height: 1em;
 color: #fff; /* 文字色 */
 text-decoration: none;
 white-space: nowrap;
 padding: 5px 7px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を丸くする */
 border: 1px solid #60B590; /* 線の太さ・タイプ・色 */
}


/* マウスホバー時の設定 */

.wp-block-tag-cloud a:hover {
 background: #fff;　 /* 背景色 */
 color: #41A77B;  /* 文字色 */
 border: 1px solid #60B590;  /* 線の太さ・タイプ・色 */
}


/* ハシュタグ風に「#」を追記 */
.wp-block-tag-cloud a:before {
 content: "# "; 
}

色については、ご自身のブログのイメージカラーに合わせるのがベター

上記コードの中の、「#」と６つの数字とアルファベットの羅列が色のコードです。

色選び参考サイト

おまけ 『タグの落とし穴』

タグは便利だけど、使い方に注意が必要です。

ブログを書く側からしたら手軽だし、SEOの観点からしても内部リンクを増やせるタグは良いと言われています。

とはいえ、やみくもにタグを増やしてしまうと読者さんを迷わすことになりかねません。

なぜかと言うと、やみくもにタグを増やしてしまうと、タグをクリックしても関連記事がほとんどない…という状態になってしまいますよね。クリックしてページを開くという読者さんの時間を奪ってしまいます。

また、増やしたタグに似たタグが増えてしまうと、それは類似コンテンツのページを増やすことにもなりSEO的にもよろしくないんですね。

ここらを気をつけつつ、タグ設定して内部リンクを増やすのはいいのかな。と思ってます。

やはりどこまでいってもユーザー目線は大切なんですね。学びとなったタグクラウド制作でした。

参考にした記事

• facebook
• Tweet
• LINE