* 本ブログはアフィリエイト広告を含みます

【WordPress】タグ一覧表示方法とタグ一覧表示のレイアウト調整方法（初心者向け） [IT備忘録]

IT・ブログ関連

こんにちは。ふわりです♪
IT備忘録「WordPress」編。今回はタグ一覧表示方法とタグ一覧表示のレイアウト調整方法（初心者向け）です。
PHPファイルやテーマファイルは直接編集しません。WordPressのウィジェット「タグクラウド」と私が使用しているWordPressテーマ「Muum」のオプション「カスタムCSS」を用いることで、安全にカスタマイズする方法です。
レンタルサーバー ConoHa WING を使用している場合の事前準備と事後処理も書きます。
似たような環境で簡単にシンプルなタグ一覧表示をしたい方の参考になれば幸いです(^^)

完成形

avatar

完成形はこちら♪

タグにカーソルを合わせるとこのように表示します。
実際に私のブログでご確認いただくとわかりやすいと思います（PC：右サイドバーアーカイブの下、スマホ：アーカイブの下）。

大まかな手順

  1. WordPressのウィジェット「タグクラウド」でタグ一覧表示設定を行う
  2. テーマオプション「カスタムCSS」にCSSの記述を追加しレイアウトを調整する

1. タグ一覧表示方法

WordPressのウィジェット「タグクラウド」でタグ一覧表示設定を行う

PCのTopページ右サイドのアーカイブ下に表示する例で書きます。

  1. WordPressにログインし、外観 > ウィジェット の順にクリック

  2. タグクラウドの「トップページ」を選択し「ウィジェットを追加」をクリック

  3. アーカイブ一覧の下にタグクラウドを移動し、タグクラウドをクリックして設定画面を開く

  4. タイトルを入力。タクソノミーは「タグ」を選択。タグの数も表示する場合はタグの数を表示に「チェック」し、「保存」をクリック

  5. 第一段階は完成です(^^)/
    PCのTopページ、右サイドのアーカイブ下に「よく使用するタグ一覧」が表示されました。

    アップにするとこんな感じです。

この表示でOKな方はここで作業は終わりです。

avatar

お疲れさまでした♪

文字の大小が気になるなぁ。文字のサイズを統一したいなぁ。

avatar

という方は引き続き「2. レイアウト調整方法」をご覧くださいね(^^)



2. レイアウト調整方法

対象環境

このような使用環境の方向けの方法になります。
使用環境が異なる方は、「(2) カスタムCSSにCSSを追記しレイアウトを調整する」で「どのようなCSSを追記するのか？」ご参考までどうぞ♪

補足：使用しているテーマのカスタムCSS機能について

私が使用している株式会社デザインプラスの有料テーマ WordPressテーマ「Muum」 には、テーマオプション機能の一つとして「カスタムCSS」があります。

こちらを利用しCSSの記述を追記すると、テーマファイルを直接編集することなく安全にカスタマイズを行うことができます。今回はこの機能を利用し、レイアウトを調整します。
ちなみに、テーマのバージョンアップをした時にもリセットされることなくCSSの記述内容が引き継がれますので、安心してバージョンアップができます。この点がとても気に入っています(^^)

では設定していきます。

(1) 事前準備（ConoHa WINGでWAFを利用している方）

ConoHa WING にログインし、「WAF」の設定を「ON」から「OFF」にする。

ポイント
環境によってはWAFの誤検知が原因で設定した内容を保存できない場合があり、この作業を行うと保存できます。自分のIPアドレスを除外設定する方法もあります。

(2) カスタムCSSにCSSを追記しレイアウトを調整する

  1. WordPressにログインし、TCDテーマ > 基本設定 > カスタムCSS・スクリプト をクリック

  2. すでにカスタムCSS欄に何かCSSを記述していた場合は、コードをコピペしてバックアップしておく（万が一何かあったときにすぐに戻せるように）

  3. カスタムCSS欄にCSSの記述を追加する

    ～ CSSの記述内容 ～
    背景色、文字色などはお好みの色でどうぞ♪

    /* タグクラウドのデザイン　2023/7/20 */
.tagcloud a {
 font-size: 13px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #777; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}

.tagcloud a:hover {
 background: #eee; /* マウスホバー時の背景色 */
 color: #661F4E; /* マウスホバー時の文字色*/
}

    ご参考）色の設定で参考にしているサイト
    約20年お世話になっている「Mariのいろえぴつ」さんの「トーン別のカラーチャート」や、「WEB色見本 原色大辞典」、最近はくすみカラー系の情報もチェックしています。

  4. 「設定を保存」をクリック

  5. レイアウトを変更できました！（ビフォア → アフター）

    左）ビフォア → 右）アフター

    左）ビフォア → 右）アフター

    タグにカーソルを合わせるとこのように表示します。
    実際に私のブログでご確認いただくとわかりやすいと思います（PC：右サイドバーアーカイブの下、スマホ：アーカイブの下）。

    【PC：Topページ全体のイメージ】

    【スマートフォンのイメージ】

    スマートフォン

    スマートフォン

(3) 事後処理（ConoHa WINGでWAFを利用している方）

事前準備を行った方は、最後に ConoHa WING の WAF 設定を「OFF」から「ON」に戻します。

ポイント
「WAF」の設定が「OFF」のままだとセキュリティ上良くないためお忘れなく♪

さいごに

このブログを運営する前に約6年間運営していたブログ時代のこと。だんだん記事が増えるにつれ、

avatar

ブログを見に来てくださった方がカテゴリーから情報を探すには記事数が多すぎて面倒そうだなぁ。
情報を探しやすくするためにタグを活用したいな。

と、考えるようになりました。その第一段階が今回のタグ一覧表示です。設定している内の40個くらいしか表示されませんが、ないよりはいいかな？と(^^)
カテゴリーもタグもあまり数は増やさず、また細かく設定しない方が良いようですが、私は他の人の情報を探すときピンポイントで探しやすいタグを結構利用させてもらってるのですよね(^^) なので「もっとタグを使った視認性の良い方法がないか？」引き続き考えたいと思います。何かいい案がまとまりましたら書きます♪
では、また～(^^)/

avatar

私が使用している株式会社デザインプラスから無料のWordPressテーマ「GLUE」が提供されました☆
ブログを始めてみたい方はダウンロードして試してみませんか？
（これがリリースされていたら私は有料のWordPressテーマ「Muum」を買っていなかったかも（笑））

関連記事

ブログ作成環境

レンタルサーバー
ConoHa WING(コノハウィング)

WordPressテーマ
TCD WordPressテーマ「Muum」

ネット環境
GMOとくとくBB WiMAX +5G
レビュー記事：一人暮らしのネット環境

ふわり
ふわり

お花大好きふわりです♪ SONY 7IIで撮ったお花や自然の写真、ナチュラルライフ、ガーデニング、国内旅行etc... についてつづります(^^)

関連記事

ピックアップ記事

掃除

【エアコンクリーニング】おそうじ革命：予算1万円以内でエアコン内部をキレイにしたい方に【レビュー】
愛用品

【愛用品】台所：調理器具、食器、掃除・メンテナンス用品
雑貨

【レビュー】SOLSHADE one 晴雨兼用の折りたたみ日傘：遮光率 & UVカット率100% / 10本骨の頼りになる1本
ナチュラルライフ

合成洗剤からナチュラル洗濯洗剤への移行案をタイプ別に7つご紹介【ナチュラルライフ】
楽器とツール

ヤマハぷりんと楽譜：すぐに1曲から楽譜を購入しダウンロードできて便利♪（レビュー）
写真関連グッズ

カメラバッグ Endurance ExtII【開封の儀】

コメント

この記事へのコメントはありません。

週間ランキングTop13
  1. 1

    Microsoft Wordで文章を入力中に文字が少し下がる時の解決方法 [IT備忘録]
  2. 2

    【栽培記録】レウイシア：初めての2番花と下葉むしり & 花がら摘みの手入れ風景（2021年6月～7月）
  3. 3

    モンステラの挿し木と茎伏せに初挑戦(1) モンステラのカットから植え付けまで [2021年9月]【栽培記録】
  4. 4

    シャボン玉せっけんハミガキのレビューと経皮毒のこと【ナチュラルライフ】
  5. 5

    【カメラバックパック探し】一泊二日撮影旅行用 オールシーズン快適に背負えるものはあるかしら？
  6. 6

    手作り化粧水：グリセリンと水だけで作れます♪【ナチュラルライフ】
  7. 7

    手作りのクエン酸柔軟剤で合成香料の不快感とさようなら♪ 【ナチュラルライフ】
  8. 8

    白色ワセリンとエッセンシャルオイル（精油）で作るハンドクリーム
  9. 9

    【Windows11】スクロールバーを常に太い状態で表示する方法
  10. 10

    シンセサイザーの音をポータブルスピーカーで鳴らす方法（初心者向け）
  11. 11

    【暑さ対策】屋外編：バルコニーにサンシェードを取り付けて窓から入る日差しと熱を遮ろう！
  12. 12

    プラスチック製のヘアブラシの汚れ落としは重曹で♪【ナチュラルライフ】
  13. 13

    モンステラの挿し木と茎伏せに初挑戦(4) 2か月間の栽培記録：親株編（2021年9月～11月）
楽天トラベルのバナー
最新記事
Natural Life

  1. 【カメラ】SONY a7II：9年も使えば少しずつガタが来ますね(^^;

  2. 【エアコン】カビの繁殖スピードは環境によることを知りました

  3. 【前編】約25年間で使用してきた精油を楽しむ道具：置くだけタイプ3商品のレビュー

  4. 【エアコンクリーニング】おそうじ革命：予算1万円以内でエアコン内部をキレイにしたい方に【レビュー】

  5. 【お散歩写真】横浜公園のお花や草木の写真20枚 [2025年4月]（神奈川県横浜市）

  6. 【旅レポ】秋の名古屋2泊3日旅：1日目 ②名古屋城散策 & 名古屋グルメ [2020年11月]（愛知県）

  7. 【お散歩写真】横浜公園のチューリップの写真28枚 [2025年4月]（神奈川県横浜市）

  8. 【旅レポ】秋の名古屋2泊3日旅：1日目 ①ノリタケの森散策［2020年11月］（愛知県）

  9. 【モンステラ】水挿しに初挑戦5. 鉢上げ後2024年10月～2025年4月まで7か月間の栽培記録

  10. 【アミノ酸シャンプー】ハーベストシーズン アロマのやさしさ：頭皮と髪に優しいしっとりタイプ【レビュー】

  1. 【UVケア】ナチュラグラッセ UVプロテクションベースN：オールシーズン肌を守ってくれる強い味方☆【レビュー】

  2. アルカリ電解水クリーナー（激落ちくん）でレンジフード掃除が楽にキレイに♪【ナチュラルライフ】

  3. 白色ワセリンとエッセンシャルオイル（精油）で作るハンドクリーム

  4. 12年間で使用してきたナチュラル洗濯洗剤7点 [2011年～2023年]【ナチュラルライフ】

  5. 合成洗剤からナチュラル洗濯洗剤への移行案をタイプ別に7つご紹介【ナチュラルライフ】

  6. 手作り化粧水：グリセリンと水だけで作れます♪【ナチュラルライフ】

  7. 3年8か月続いている手作りアロマスプレー：精油と無水エタノールで簡単に作れて体に優しくコスパ良し【ナチュラルライフ】

  8. 手作りのクエン酸柔軟剤で合成香料の不快感とさようなら♪ 【ナチュラルライフ】

  9. 粉石けんと精油で作る食器用洗剤【ナチュラルライフ】

  10. インセントのアロマシャワーは安全な芳香消臭アロマスプレー【ナチュラルライフ】
こんな写真を撮っています♪
サイト内検索
カテゴリー
アーカイブ
よく使用するタグ45個
2泊3日旅 3月 4月 5月 10月 11月 2017年 2024年 camera:SONY NEX-5N camera:SONY α7II How to lens:SEL24F14GM lens:SEL24F18Z lens:SEL90M28G lens:SEL135F18GM お散歩写真 ガーデニング シンプルライフ ナチュラルライフ レビュー 一人旅 上旬 下旬 中区 中旬 作例 公園 午前 午後 建築物 旅レポ 晴れ 曇り 東京都 栽培記録 桜 植物 横浜市 水の風景 神奈川県 紅葉 花 観葉植物 開封の儀 雑貨

過去記事は「ブログ全記事、サイトマップ、カテゴリー」からどうぞ♪

TOP
CLOSE