MOKUJI』を当ブログにも導入しましたところ、当然ながらTOC+のデザインが反映されておらず、デフォルトのデザインとなっていました。なんとか元々使っていたTOC+のデザインをそのまま流用できないかと、カスタマイズ方法を模索していたところいとも簡単にカスタマイズ出来ることが判明。MOKUJI』に移植することが出来るようになります。MOKUJI』に移植する方法を紹介します。MOKUJIにTOC+のカスタマイズデザインを移植する方法を確認していきましょう。所要時間は概ね10分ほどで完成するかと思いますので、肩の力を抜いてご覧ください。TOC+でカスタマイズしたCSSを確認TOC+のカスタマイズをされている場合は、追加CSSかテーマエディターのstyle.cssにカスタマイズ用のCSSを追記しているかと思います。今回使う画像に関してはカスタマイザーの追加CSSでカスタマイズしている画像を使用しますが、style.cssでのカスタマイズでも同様の手順で大丈夫なので、ご安心ください。『st_』を『#toc_』の頭に追記TOC+のカスタマイズCSSは『#toc_』というCSSが頭に来るようになっていて、そこからどのようなデザインにするかがCSSコードで記述されています。MOKUJI』のにTOC+のデザインを移植するには『#』と『toc_』の間に『st_』という記述を追記するだけでOKです。MOKUJI』のCSSとして読み込まれるようになり、記事の目次にデザインが反映されるようになります。最後にカスタマイザーの公開ボタンをクリックして完了です。CSSデザインが反映されない場合もし『st_』を追記しても反映されないという場合には、『#toc_』という記述以外にも『.toc』という記述があるので、その前に『st_』が追記できていない可能性があります。その部分に追記していただければCSSデザインが反映されるかと思いますので、反映されない場合にはお試しください。MOKUJI』はTOC+をベースにして作られているAFFINGER5専用のプラグインです。TOC+を使用して来たあなたならわかると思いますが、標準のデザインは少し味気がないというか、設定方法によっては逆に見づらいデザインになってしまいます。今回紹介した方法を使ってもらえれば、基本的なTOC+のカスタマイズCSSであれば全て適応可能です。awesomeのアイコンなどを使用するような目次だった場合は、少し苦戦するかもですが基本的には大丈夫でしょう。あなた好みのTOC+デザインを発見したらそのまま使って、デザインを反映させて目次のカスタマイズを楽しんでみてください。当ブログの目次CSSをプレゼントもし、この記事で使用している目次を気に入ってもらえたようなら、CSSコードをプレゼントしようと思います。シンプルではあるものの、読者によりわかりやすく記事の内容を伝えるには凝ったデザインよりもシンプルさが勝ると言うのが僕の考えです。実際にCSSカスタマイザーでCSSコードを使用して、エラーなしで反映される事が実証できているコードなので、すぐデザインを反映させることが可能になります。1em;}}目次のデザインで他ブログに差をつけよう素朴な目次デザインも良いと思うのですが、ユーザーにとって見やすいデザインにするのもブロガーの務めではないでしょうか。過度なカスタマイズはブログを読む側からすると逆に見づらく、逆効果になってしまいます。僕が使用している目次デザインはとてもバランスの良いものだと思うので、是非デザインがデフォルトのままで変化を少し加えたいと思ったら今回のCSSを使用して見てください。toを話題にブログで紹介しています。THORのアップデート方法は?【アップデート前には注意が必要!!】2020/02/13【規約違反注意】AFFINGER5でダブルレクタングルを設置する方法!誠太の記事をもっと見るよく読まれている記事1【最新版】AFFINGER5をレビュー!実用10特典をGETしてライバルに差をつけよう!AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。ご覧いただいてありがとうございます。ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。thorをレビュー!豪華10特典で競合に差をつけよう!誠太こんにちは、誠太です。誠太こんにちは、誠太です。WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト関連記事AFFINGER52019/5/7AFFINGER5でパソコン表示を見やすくする方法【1カラムで視野UP】AFFINGER5を使用していて、個人的に少しだけストレスに思うところがありました。それは、記事画面を見ている時にワイド感が足りなく、パソコン表示で少し窮屈に感じてしまっているところです。スマホ画面では、程よい感じに段落間で間隔が生まれて見やすくはなっているのですが、文章が多くなってくるとどうしても狭くなってしまいます。本記事では、AFFINGER5の『1カラム』表示を使用して、パソコン表示を見やすくする方法とメリットをお伝えします。このような問題を解決します。こんにちは、誠太です。AFFINGER5のサイト名は、デフォルトの表示のままだと左側に表示されているかと思います。できれば、中央揃えにしてサイト名を目立つようにしたいものですよね。今回は、そんな問題を解決するため、AFFINGER5のサイト名を中央に表示させる方法について解説します。先日、AFFINGER5のカスタマイズを行っているときに、サイトの上部にこのような変な空白が空いていることに気が付きました。こんな現象が起きたのは初めてで、すこしググって調べてみたところ3つほど対策方法があるようなので、同じ現象になっている人へ向けて解決方法をシェアしたいと思います。AdSenseの広告を自然にサイト内に馴染ませて露骨な広告感を出させず、自然な広告アプローチが出来るブロガーにとって頼もしい子テーマです。AdSenseの広告収益は、ブロガーの収入源として大きな割合を占めている重要なコンテンツです。WINGの専用子テーマ『JET』の魅力とAdSense収益が増加する理由を解説します。本記事はこのような不安を解消できる内容となっています。誠太こんにちは、誠太です。いま無料のテーマを使用していて、『うまく記事が作れないのは無料テーマを使っているからなのかな』と考えてしまいますよね。他のブログを見てみると鮮やかで整っているブログばかり。自分も本当はそうしたいけど、なかなか有料テーマに手が出ない。有償テーマ「SWALLOW」と「Affinger5」どちらが初心者にとって向いているのかをテーマに書いていきたいと思います。toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!お問い合わせ当サイト使用テーマレビュー記事を見てみる有料noteアフィリエイト入門SEO対策の基本WordPress開設講座よく読まれている記事1【最新版】AFFINGER5をレビュー!実用10特典をGETしてライバルに差をつけよう!AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。ご覧いただいてありがとうございます。ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。thorをレビュー!豪華10特典で競合に差をつけよう!誠太こんにちは、誠太です。誠太こんにちは、誠太です。WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。