WEB

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

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

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

相談内容

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

解決方法

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

<div id="toc_container" class="no_bullets">
<p class="toc_title">目次 <span class="toc_toggle">[<a href="#">hide</a>]</span></p>
<ul class="toc_list">
<li><a href="#i"><span class="toc_number toc_depth_1">1</span> 見出し1</a></li>
<li><a href="#i-2"><span class="toc_number toc_depth_1">2</span> 見出し2</a></li>
<li><a href="#i-3"><span class="toc_number toc_depth_1">3</span> 見出し3</a></li>
</ul>
</div>

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

#toc_container {margin:0 auto;}

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

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

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

 

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. table装飾時に持っておきたいベーステンプレートとなるCSS
  2. facebookのいいねボタンに5種類の感情ボタンが出現!
  3. 川沿いの景色 – α6400 – sig…
  4. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  5. 合成する時のトーン調整レタッチ
  6. Photoshopで対象物の色を変更する簡単な方法。
  7. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  8. CSSグリッドレイアウトについて。flexboxより使いやすいが…

コメント

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

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

CAPTCHA


おすすめ記事

SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

投稿コメントSNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラする…

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版いたしました。初めての方でもレタッチが楽しめるよう解説した一冊です。電子書籍では試し読みもできます。プロフィールのリンク先を掲載してますので良かったらご覧ください。 – フォトレタッチ

投稿コメント雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版…

夕焼けシルエット。 – フォトレタッチ

投稿コメント夕焼けシルエット。rezakk399 Instagram…

人気記事

  1. ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ
  2. 事前予約10万人突破「エアリアルレジェンズ」豪華な特典が大量にゲットできるキャンペーンを実施中!
  3. カワウ – from Instagram
  4. 城ドラ 新キャラ「コロポックル」2017.04.03(月)登場!スキルや特徴をチェック。
  5. マジックアワー α6400 – sigma 30mm f1.4

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます

エラー: フィードが見つかりません。

アカウントを接続するには、Instagram Feed の設定ページに移動してください。

カテゴリー記事一覧

PAGE TOP