目次のh3を出したり隠したりするカスタマイズ

MOVIE

ユーザーさんがクリックするとh3の見出しが表示されるカスタマイズです。

MENくん

このカスタマイズはね、ちょっと難易度が高いんよ

くま3号

クリックして要素を出したり隠したりするには、inputやlabelがいるからな、そこはしゃーなしやで

このカスタマイズは注意点がいくつかあります。

  1. 一括で目次を変更することができません
  2. ウィジェット(h2見出し前とか)で挿入するとうまく動作しません
  3. 記事に直接コードを書く必要があります

この3つの注意点があるため、ぼくは再利用ブロックをつかったり、有料のテンプレートエディタを使って簡単に挿入できるようにしています。

カスタマイズは自己責任でやろう

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズするための
準備

目次へ戻る

投稿画面での準備

今回は<p>タグが入ったりするだけでもずれちゃいます

ぼくは作成したHTMLをそのままこじかテンプレートエディタ(有料)にぶち込んで、ショートコードで吐き出しているため問題なく動いています。

ただし、一括でもくじの変更はできません。直書きになります。

挿入するコード

上のコードをテキストエディタに貼り付けます。

自動段落追加をしているとデザインがくずれてしまう可能性があります。

MENくん

こじテンを持ってない人はAddQuicktagで登録しておくと簡単に挿入できるよ

くま3号

まぁ、正直ぜんぶの目次を変えるのはクソめんどいよね!誰かなんとかしてほしいw

※ウィジェットに入れて一括挿入しようとしたのですが、ウィジェットで挿入すると開閉ができなくなってしまったので、やめました。

おすすめのCSSコード追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

コメントなし

かなり長くなりました(笑)

コードの下らへんにカラーと画像設定を持ってきたので、必要であれば変更してください。

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

まとめ・感想・雑談・こだわり

MENくん
今回のカスタマイズはGoogleがアップデートするっつってたので、ぼくも目次をアップデートしました。

くま3号
ブロガー辞めたら?

コメントを残す

メールアドレスが公開されることはありません。