【SANGOカスタマイズ】見出しプラグインTOC+の目次前アイコンのズレを直す方法

デザインのズレは小さな違和感を生み、小さな違和感は大きな違いを生み出す。

世の中には数多く(本当にたくさん)のWordPressで構築されたWEBサイトが存在していますが、素人やプロに限らず時折「あ、なんかここズレてる」と思うようなケースに出会うことがちょくちょくあります。そしてそれと同時に「もったいない」という気持ちがあふれてくる。

 

だってデザインにちょっとしたズレがあると、たとえどれだけいいコンテンツを提供していたとしても、ずっとどこかで違和感を感じながら閲覧していくことになるじゃないですか。

そして、そんな小さな違和感は後々「大きな違い」を生み出すことにもなりかねません。「細かい配慮ができない人」「小さな違いにこだわらない人」「自分のミスを見落としてしまう人」そんなレッテルを知らず知らずのうちに貼られてしまう可能性が生まれてしまうわけです。

 

それではやはり「もったいない」ので、デザインの細かいズレや誤字脱字などには常に気を配っておくことはとても大切です。今回はそんなケースの中から、SANGOを使ったWEBサイトの「目次のズレ」にフォーカスしていきましょう。

見出しプラグインTOC+に何やらズレが…

まず、今回見ていきたいのは、WordPressテーマ「SANGO」を導入している際に、プラグイン「Table of Contents Plus(TOC+)」のデザインにズレが生じてしまうケース。聞くよりも見た方が早いと思うので、実際のズレを見てみましょう。

SANGOを導入した際に多いのですが、このようにTOC+の目次前にあるアイコンが何やらはみ出している…と。このズレに気づかない人も案外多いのですが、僕はこのズレを発見してしまうと「またか…」とけっこう萎えてしまいます(僕だけじゃないはず)。

このズレを解消することによって、次のようにスッキリと枠内に収まったデザインを実現することができます。先ほどの例と見比べてみてください。

 

このように、一見すると気づかないような箇所ではありますが、気づいてしまうとずっと気になってしまうような、そんなデザインのズレです。

もしSANGOを導入してこのズレに気づいたという方や、他人のサイトで同様のケースを発見したという方は、ぜひここからの解説をインプットしていただき「そこズレてるよ!」と積極的に指摘してあげましょう。

見出しプラグインTOC+の目次前アイコンのズレを直す方法

見出しプラグインTOC+のズレを解消するためには、非常にカンタンな設定で済ませることができます。本当に簡単です、一瞬で設定も終わるのでぜひ参考になさってくださいね。

「設定→TOC+」に移動する。

まず、WordPressのダッシュボード画面から「設定→TOC+」に移動しましょう。

「基本設定→上級者向け設定」でCSSの読み込みを解除する。

すると、TOC+のプラグイン設定画面の「基本設定」へと移るので、少し下の方にある「上級者設定(表示)」というテキストをクリック。

すると、プラグインの詳細な設定項目がいくつか表示されるので、その中にある「CSSファイルを除外」という項目を見つけましょう。

 

「プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。」と記載されていますが、ここではチェックを入れておきましょう

 

デフォルトではチェックが入っておらず、プラグイン独自のCSSスタイルが読み込まれるよう設定されていますが、SANGOでは同様にTOC+のCSSスタイルが設定されています。そのために「プラグイン自体のCSS」と「SANGOのTOC+のCSS」が競合してしまい、アイコンのズレが発生してしまうと。そういった原因があったということです。

チェックボックスを入れるだけで、SANGOで設定されているCSSが純粋に読み込まれるようになるので、無事にデザインのズレも解消されるようにもなります。

最後に

以上、見出しプラグインTOC+の目次前アイコンのズレを直す方法を解説しました。いかがだったでしょうか?

このアイコンのズレはSANGOユーザーにありがちなケースで(公式で解説されているにも関わらず)、実際にネットサーフィンの過程で発見することも少なくはありません。しかもカスタマイズを解説しているサイトでズレが見受けられることも少なくはないので、なんだか考えものだなぁとひとりでに萎えてしまうこともちょくちょくあります。

 

こういったデザインの小さなズレはシンプルにもったいないので、ぜひSANGOを導入した際には必ず設定を施すようにしましょう。

 

ABOUT ME

RIKU(坂本陸)WEBマーケター及びコンサルタント

オフィシャルメディア「LIVE YOUR LIFE」運営/オンラインスクール「THE LIFE SCHOOL」主催/早稲田大学在学中にPC1台で起業し、その後大学中退の道を選び独立。現在は個人ならびに法人向けのコンサルティング活動・メディア制作や、就職活動・進路選択に悩む大学生のキャリア相談など幅広く活動中。23歳、RADWIMPSと甘いものに目がない。

⇒詳しいプロフィールはこちら

コメントを残す

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