WEB

WordPressの悩み相談「目次を中央寄せにしたい」を解決。

ひと昔はアメブロのカスタム相談が多かったですが、最近はWordPress(ワードプレス)に移行しているブロガーの方が多くなってきた気がします。

ココナラでの相談所でもWordPress(ワードプレス)の悩みをよく聞きますね。
その中でもコーディングの部類に入る、CSSデザイン調整が多いです。今回の悩みもCSSで解決しました。
当ブログでも↓のように使っています。これも中央寄せしてます。

相談内容

「目次を中央寄せにしたい」目次というのは、記事内のHタグを自動取得しアンカーリンクを貼ってくれるプラグイン「Table of Contents Plus」の利用が主ですね。今回もこれを利用した相談でした。

解決方法

「Table of Contents Plus」には設定がありますが、中央寄せというのはありません。なので、CSSで調整いたします。
なお、設定内の外観で「グレー(デフォルト)」である場合になります。
まず、現在のソースをみると出力している部分が以下のようになります。

一番外側のDIVにIDがありますので、これを利用しCSSを設定します。
この場合の中央寄せは、margin:0 auto; で良いでしょう。なので、CSSを適用させるには以下のように書きます。

これだけで、目次は中央寄せとなります。
CSSを追記する場所は、テーマにより異なりますが、テーマ設定にCSS項目があればそこに記載すれば良いし、無ければ「外観>テーマの編集」からCSSを選択し追記しましょう。

なお、追記する場合は表示崩れが発生する場合もありますのでバックアップは必ずとってから行いましょう。

また、テーマ自体をいじるとテーマのアップデートで上書きされる場合もあります。基本的には「子テーマ」を利用するのが推奨です。
「子テーマ」導入については、ググってください。そちらの方が分かりやすいと思います。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  2. facebookのいいねボタンに5種類の感情ボタンが出現!
  3. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  4. ヤフオクの商品説明を綺麗に!売上アップのポイント
  5. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  6. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  7. LINEで郵便局の荷物追跡や再配達ができる!?
  8. table装飾時に持っておきたいベーステンプレートとなるCSS

コメント

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

  1. この記事へのトラックバックはありません。

おすすめ記事

濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡単に色変更が出来るけど、ダーク系をキレイな白色にするのはひと手間かかるし調整がなかなか難しいねChange the dark sweater to a more difficult white.Also red and blue. – from Instagram

投稿コメント濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡…

写真合成のレタッチ。 – from Instagram

投稿コメント写真合成のレタッチ。lifezakk Instagram…

光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種類を使ってます。調整には、トーンカーブの明暗を多用。 – from Instagram

投稿コメント光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種…

GoProMAX等で撮影した360度写真をPhotoshopで簡単に編集する方法。

先日発売されたGoProMAX。360度の写真や動画が撮影できるアクションカメラですね。今回は、…

GoProMaxからのキャプチャをPhotoshopでレタッチ。 – from Instagram

投稿コメントGoProMaxからのキャプチャをPhotoshopでレタッチ。lifeza…

人気記事

  1. ホウチ帝国 攻略 戦力の上げ方。装備の「鍛錬」について
  2. アナザーエデン 魔獣城攻略 キラキラ素材や隠しアイテムなど
  3. ホウチ帝国 クエスト42ヌーマ遺跡を突破した闘士のスキルとステータス
  4. 城ドラ チビドラLv30・研究所10フル装備のステータス
  5. 城ドラ 最新「きびだんご」 7/7改定ver.のまとめ。

カテゴリー記事一覧

PAGE TOP