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. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  2. マーケティングオートメーションの「Mautic」導入について
  3. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  4. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  5. 合成する時のトーン調整レタッチ
  6. Photoshopで対象物の色を変更する簡単な方法。
  7. テーブルの見出しを固定できるjsがとても便利。
  8. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…

コメント

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

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

おすすめ記事

カメラを持って瞬間を狙ったPhoto retouch。

投稿コメントカメラを持って瞬間を狙った。lifezakk Instagram…

背景のぼかし系レタッチ – from Instagram

投稿コメント背景のぼかし系レタッチlifezakk Instagram…

光のぼかしレタッチ。

投稿コメント光のぼかしレタッチ。lifezakk Instagramぼかしレンズ…

合成する時のトーン調整レタッチ

投稿コメント合成する時のトーン調整レタッチlifezakk Instagram背景と…

Pixar風レタッチ。 – from Instagram

投稿コメントPixar風レタッチ。lifezakk Instagram…

人気記事

  1. Pythonの実行結果をGoogleスプレッドシートに出力してみた。グラフ表示も簡単。
  2. フォックス 城ドラの新キャラ10/17登場 気になるスキルやステータスなどまとめ
  3. OVERHIT(オーバーヒット) ギルド対抗戦 5日目 ランキング・変動順位更新
  4. 2月はビットフライヤーFXにデビュー。知識ゼロですが、ボットにも初挑戦。
  5. iPhone7/7Plus の手帳型スマホケースを購入する前に確認しときたい5つのメリット・デメリット。

インスタグラム

カテゴリー記事一覧

PAGE TOP