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

lifezakk

投稿者の記事一覧

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

関連記事

  1. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  2. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  3. facebookのいいねボタンに5種類の感情ボタンが出現!
  4. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  5. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  6. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  7. table装飾時に持っておきたいベーステンプレートとなるCSS
  8. マーケティングオートメーションの「Mautic」導入について

コメント

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

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

おすすめ記事

カミナリ- from Instagram

投稿コメントカミナリ#カミナリを撮ってみました。現像で黒い部分を暗くしたりして雷光をキワだしてる…

カワウ – from Instagram

投稿コメントカワウrezakk399 Instagram…

ランタナ – from Instagram

投稿コメントランタナrezakk399 Instagram…

Zinnia(ジニア) – from Instagram

投稿コメントZinnia(ジニア)rezakk399 Instagram…

Building. – from Instagram

投稿コメントBuilding.rezakk399 Instagram…

人気記事

  1. 放置少女 序盤攻略!最初に知っておくべき5つのポイント。シリアルコードやリセマラについても
  2. 合成する時のトーン調整レタッチ
  3. Photoshop CC 導入。バナー作成時に楽する複数アートボードとスマートオブジェクトの活用方法
  4. 黒い砂漠モバイル 序盤で知っておきたい7つの便利な機能と知識
  5. Sunset. – from Instagram

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP