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

MOVIE

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

MENくん

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

くま3号

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

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

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

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

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらの記事に目を通してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

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

カスタマイズの準備

投稿画面での準備

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

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

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

挿入するコード

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

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

MENくん

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

くま3号

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

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

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

テーマをカスタマイズする際には3つの方法があります。

はじめてカスタマイズする方におすすめなのが追加CSSです。

初心者におすすめのカスタマイズ方法

追加CSSを使ったカスタマイズ方法については、こちらの記事で詳しく解説しています。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

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

コメントなし

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

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

ちゃんと反映されているか確認

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

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

キャッシュを削除

コントロールキー(Ctrl)」と「F5」をキャッシュを削除したいページで同時に押します。スマホの場合はAndroidとiPhoneでやり方が違います。詳しくはこちらのページで見てください。

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

カスタマイズをもっとやりたい方

こんなカスタマイズじゃ満足できない!!そんな方に是非見て欲しい記事がこちらです。

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

現在は50を超えるカスタマイズが紹介されており、病的なページになります。

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

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

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

くまさんからのお願い

ぼくのカスタマイズコードをそのまま(またはほとんど)コピーしてそれをブログで記事にされるのは、あまり嬉しくないです‪( ˙꒳​˙ᐢ )No!

MENくん

あれ!?この記事、、、ぼくが書いたコードかなりコピペして紹介してる!

くま3号

ちょっとこれは、、、複雑な気持ちやな

ぼくはカスタマイズコードを1から書いています。

一部、参考にしたカスタマイズ記事があれば必ずリンクを貼るようにしています。

そこんところをちょっと考慮してもらえると嬉しいです( ˶ˆ꒳ˆ˵ )

コメント( ˶ˆ꒳ˆ˵ )

avatar