サイト上部にカテゴリーリンクを設置する

Twenty Twenty-Threeの初期状態では、ホームの右上に「固定ページ」のリンクがあるが、これをカテゴリー一覧に変更。

※この方法ではスマホ画面で折りたたまないので、ホームの右上は「ナビゲーション」ブロック推奨

ヘッダーテンプレートの「固定ページリスト」ブロックを「カテゴリー一覧」ブロックに変えてみたところ、横並びにするための設定がめんどい。「タグクラウド」ブロックのほうが僅かにマシだったので、今回はこちらを使った。

Twenty Twenty-Three、カテゴリー一覧ブロック
Twenty Twenty-Three、カテゴリー一覧ブロック

「タグクラウド」ブロックは、タクソノミーを「カテゴリー」にすると、カテゴリー一覧ができるし、デフォルトに縦並びの指定がないのでサイトの上部に並べやすい。

Twenty Twenty-Three、タグクラウドブロックの設定
Twenty Twenty-Three、タグクラウドブロックの設定

代わりに、記事数が多いと大きく、記事数が小さいと小さく表示されるので、最小サイズと最大サイズを同じサイズに指定する。

あとは、見た目の問題で、リンクを示す下線は不要なので、「高度な設定」の「追加CSSクラス」にクラス名を作って、スタイル設定で「追加CSS」を記述する。

追加CSSクラスを作る方法は、

  1. デザインを変更したいブロックを指定した状態で、
  2. 設定メニューのブロックタグを選択
  3. 高度な設定の中に「追加CSSクラス」があるので、そこに適当な英数字のクラスを作る
  4. 全体に適用
  5. 保存
Twenty Twenty-Three、追加CSSクラスの設定
Twenty Twenty-Three、追加CSSクラスの設定

実際のスタイルを指定する方法は、

  1. ワードプレスにログインした状態で編集したいページを表示させ、ヘッダーメニューから「サイトを編集」
  2. 編集したいテンプレートを選択
  3. 鉛筆マークで編集にはいると下の画像のようなメニューが出ているので「スタイル」アイコンを表示させ
  4. 「スタイル」の帯の横の縦3点アイコンの設定メニューから「追加CSS」を選ぶと追加CSSを記述するエリアが出現する
  5. ここに先程作った追加CSSクラスに対するスタイルを記述する
Twenty Twenty Three、追加CSSスタイル記述
Twenty Twenty Three、追加CSSスタイル記述

上の画像は、リンクの下線を外して、リストアイテムの左側に1rem(=16px)の余白を入れる記述。

.header-tagcloud-list-link-underbar a {
text-decoration: none;
margin-left: 1rem;
}


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です