• Topページのタブ(新着記事及び各カテゴリー)から最新8記事が閲覧できます(過去記事はブログ全記事または、カテゴリーからご覧ください)
  • [広告](補足

【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色見本 原色大辞典」、最近は「えもいろ」さんの「くすみカラーのカラーコード50選」など。

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

  5. レイアウトを変更できました!(ビフォア → アフター)

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

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

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

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

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

    スマートフォン

    スマートフォン

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

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

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

さいごに

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

avatar

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

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

関連記事

ブログ作成環境

ふわり

ふわり

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

関連記事

ピックアップ記事

カテゴリー

週間ランキングTop10

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

    【栽培記録】レウイシア:初めての2番花と下葉むしり & 花がら摘みの手入れ風景(2021年6月~7月)

  8. 8

    【CyberLink】すんなりアカウントを削除できなかった原因と2つの解決方法、アカウント削除手順 [IT備忘録]

  9. 9

    予算5万円で缶コーヒーより軽い高級コンデジを発見!Canon PowerShot G9 X MarkII

  10. 10

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

最近の記事 Natural Life モンステラ
  1. キーコーヒー 京都イノダコーヒ 有機珈琲 古都の味わいブレンド【ナチュラルフード】【レビュー】

  2. 【お散歩写真】春の本牧山頂公園2. 小さな草花 [2024年4月](神奈川県横浜市)

  3. 【エバーフレッシュ】2024年春の栽培記録と剪定

  4. 【築古賃貸住宅メンテナンス】室内編:備え付けの天井照明の直管スタータ形蛍光灯とグロー球を初めて交換した話

  5. 【お散歩写真】生田緑地ばら苑で撮影したバラの写真18枚(神奈川県川崎市)[2015年10月]

  6. 【お散歩写真】春の本牧山頂公園1. タンポポの綿毛♪[2024年4月](神奈川県横浜市)

  7. 【レビュー】SOLSHADE one 晴雨兼用の折りたたみ日傘:遮光率 & UVカット率100% / 10本骨の頼りになる1本

  8. 多摩川浅間神社の見晴台から見た富士山と夕景(東京都大田区)【作例】SONY NEX-5N + SAL100M28(2013年11月)

  9. 【お散歩写真】緑道で咲いていた麗しき藤の花 [2014年~2016年]

  10. 【横浜公園】2. ピンク色以外のチューリップの写真19枚(神奈川県横浜市)[2024年4月]

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

  2. インセントのアロマシャワーは安全な芳香消臭アロマスプレー【ナチュラルライフ】

  3. 重曹とアルミホイルでシルバーアクセサリーの黒ずみを落とす方法【ナチュラルライフ】

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

  5. コジット カッサリフトプレートで顔のコリをほぐしてリラックスしましょ【フェイスケア】【ナチュラルライフ】

  6. 手作りの炭酸入浴剤でゆっくり疲れを癒やしませんか?【ナチュラルライフ】

  7. 【ナチュラルフード】マルドン シーソルト:まろやかな旨味が美味しくミネラルも摂れます♪ソテーの仕上げにオススメ☆

  8. 【レビュー】ナチュラグラッセ メイクアップクリームN:つややかで肌が楽なUVカット下地クリーム

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

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

  1. モンステラの挿し木と茎伏せに初挑戦(8) 約7カ月半後に行った親株の植え替え [2022年5月]【栽培記録】

  2. モンステラの挿し木と茎伏せに初挑戦(7) 約7カ月半後に行った挿し木と茎伏せの鉢上げ [2022年5月]【栽培記録】

  3. モンステラの挿し木と茎伏せに初挑戦(6) 67日目~植え替え直前の212日目までの栽培記録:親株と茎伏せ編 (2021年11月~2022年4月)

  4. モンステラの挿し木と茎伏せに初挑戦(5) 67日目~植え替え直前の212日目までの栽培記録:挿し木編 (2021年11月~2022年4月)

  5. モンステラの挿し木と茎伏せに初挑戦(4) 2か月間の栽培記録:親株編(2021年9月~11月)

  6. モンステラの挿し木と茎伏せに初挑戦(3) 植え付け後2か月間の栽培記録:茎伏せ編 (2021年9月~11月)

  7. モンステラの挿し木と茎伏せに初挑戦(2) 植え付け後2か月間の栽培記録:挿し木編 (2021年9月~11月)

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

ソニーストア
楽天トラベルのバナー

ブログ作成環境

TOP