目次WordPress|記事の見出しを目次にしようこんにちは、WordPress初心者のがくです。今日は初心者の僕がWordPress初心者のみなさんに初心者目線の解説で目次のつけ方をレクチャーしたいと思います。かっこいいとかわかりやすいサイトやブログって必ずそう思わせる目次が付いていませんか?今回はそんなサイトからピックアップさせていただいたちょっといい感じの目次をやってみたいと思います。目次自体はとても簡単で、ターゲットへのリンクだったり、背景色などのデザインが今回のメインテーマです。目次はHTMLで記述するみなさんさすがにHTMLを少しくらい理解していることと思います。理解していなくても解説するので安心してくださいね。WordPressでHTMLを記述するには?WordPressにはビジュアルエディターとコードエディターという2種類の入力方法があるのを知っていますか?画像の右上にある点々アイコンをクリックすると中段あたりに出てくるやつです。普段皆さんが使っているのはビジュアルエディターの画面だと思うので一度切り替えてみてください。変わったように見えないかもしれませんが、もし既に何かを記述していればよくわからない記号が並んでいると思います。<p></p>これは段落を表すタグですがこういうのを自分で記述するのがコードエディターであり、これこそがHTMLです。一つの方法はビジュアルエディタの画面で『HTMLとして編集』を選択する方法です。この方法は通常は、「普段はビジュアルエディタで記事を書きたいけどどうしても形がうまくいかない時にHTMLで記述する必要がある」なんて時に利用するととても便利です。僕は改行タグ<br/>で表現したい時などちょっと使いで利用しています。目次を書いてみる目次はプラグインを使えば簡単にできてしまうのですが、あまり使用してしまうとサイトの表示速度が遅くなったりセキュリティの問題があったりと良くないようです。一から学ぶのですからHTMLで直接記述する方法を覚えましょう。HTML目次っていう日本語があるとついついそれそのものの英語訳をしたものが用意されているきになりますが、そんな都合よくはないみたいです。導入されている方々は皆さんHTMLで記述して表示させています。そこでまず使用するのがolタグもしくはulタグです。Listタグといって、上から順番に1,2,3と番号が記述されるリストタグのこと。Listタグといって番号が付かない代わりに『・』が頭に付けられます。←olタグの始まりを意味する</ol>←olタグの終わりを意味するだけどこれ自体は目次の中身を表示させるものではなく、実際に書き込む目次はliタグにやってもらいます。<ol><li>目次リスト</li><li>目次リスト</li></ol>これをプレビューしてみると1.目次リスト2.目次リストと表示されるようになるのがわかるでしょう。ulタグを使うと数字の部分が『・』に変わりますさて、これは想像していた満足のいく結果でしたか?どうもいささか足りない気がしますね。それは目次リストが表示している場所へのリンクが張られていないからです。目次から見出しに飛ぶリンクを張ろうみなさん文字をクリックしたときに違う場所に飛ぶあのリンクってどうなっているか知っていますか?あれは飛び先に名前が付けられていて、ここがクリックされたら名前の所に飛んでねって設定がされているんです。WordPressでいうとH2タグもしくはH3タグにまず名前を付けます。表示をコードエディターに切り替えて飛ばしたい見出しの所の<h2>もしくは<h3>に次のコードを書き加えます。id=”article1′′>『article1』の所は好きに変えて構いませんが日本語ではなくローマ字で書いてください。これでarticle1という名前の見出しタグが設定できましたね?では次に目次側の設定です。aタグで指定した名前に飛ぶaタグとはリンク先に飛ばすタグをさします。href=”#article1′′>目次リスト</a></li></ol>となります。href=”#article3′′>目次リスト</a></li></ol>さて、ここで一度自分のサイトの見出しに名前を付けて実際に目次として表示・移動が可能かやってみましょう。上記の『目次リスト』の部分はもちろん目次で表示する内容です。目次を階層化しよう目次にする見出しはH2タグだけではないかもしれません。H3タグや、人によってはH4タグも目次に表示したいかもしれません。HTMLの記述HTMLの基本的なルールは、『タグは同じタグで囲む』です。ここまで学習してきたタグの表記を見てもわかる通り、必ず始まりのタグと同じタグで囲っているのがわかると思います。(終了タグには/が必要)。ここまで見てきたHTML表記はとても単純なものばかりなので今から話すことは少しわかりにくいかもしれません。それは、タグの途中にタグを挿入することが可能ということです。具体的に見てみましょう。href=”#article2′′>H2タグ2</a></li></ol>赤字の部分に注目してみてください。ここまで見てきた目次の1行は<li>で始まり</li>で終わっていましたね。ところがこの記述では<li>と</li>の間に目次そのものが挿入されています。これが先ほど説明したタグの中にタグというパターンです。このページの目次のように目次と目次の間にH3タグの目次を表示するにはタグの中にH3タグに対応する目次を挿入する必要があります。H3タグの目次表記を数字ではなく『・』にしたい場合はH3タグの目次の『ol』と『/ol』を『ul』と『/ul』に変更してみてください。目次を修飾しようここまでの内容は『目次を表示させる』でした。ここからは目次をもっと見やすく修飾してみましょう。表現方法は多種ありますが、今日はこのページで表現している目次を解説します。理解ができそうにない場合はその手前までで辞めておきましょう。目次であることを明示するこの記事の目次にもある通り、目次の上には目次【本記事の内容】といった表示が記述されています。(チェックマークについては鬼のように難しいので最後におまけとして記載します)目次の表題は何でも構いませんが、読み手にわかりやすく表示することがとても重要です。CSS(カスケードスタイルシート)に記述するのですが、まだ難しいので今回はHTMLでの記述を学んでいきましょう。指定した部分の表現を変更するstyle属性style属性はタグで囲まれた部分を修飾する機能を持っています。内容をこの記事に限定にして説明すると、目次の一番上の<ol>と一番下の</ol>で囲まれた部分にいろいろな修飾をほどこすことができるというものです。#4865b2;”>この間に目次リスト</ol>では解説です。今赤で表示されたところが目次の始まりと終わりのolタグです。初めのolタグが『>』で閉じられる前にstyle属性が記述されていることがわかりますね?これによってolタグで囲まれた『この間に目次リスト』と書かれた部分すべてが記述された内容に修飾されます。#4865b2;背景色を#f8f9ffに、そして枠線を1ピクセルの点線で色は#4865b2に指定しています。まとめこれがHTMLを利用した基本の目次の作り方です。いろいろなタグが出てきたので多少戸惑うかもしれませんが、順を追って記述していけばそれほど難しくはないはずです。それでは以上をまとめたHTMLを最後に記載しておきますので必要に応じて流用してみてください。href=”#article2′′>H2タグ2</a></li></ol>ウィジェットWordPress|カスタムHTMLが保存できない件この記事にたどり着いた人は、WoardPressでカスタムHTMLのウィジェットを保存したいのにずーっとプログレスサークルがくるくるしている状態だと思います。その原因と解決策は簡単です。2-2.セキュリティタブ2-3.慌てないで!2-4.WAFを有効に戻そう3.まとめそもそもなぜ今回このような現象に遭遇したかというと、このブログでもついにGoogleAdsenseの広告を導入するようになったからです。Adsense広告の張り方なんて当然知るはずもなくググりながら作業をしていると『ウィジェットのカスタムHTMLに広告コードを張って使うんだよ』と教えていただいたので言われるがままにやったらこうなりました。保存できない原因それはレンタルサーバーにロリポップを使っているからです。『なに!?ロリポップはあかんのか!!』ということではなく、ロリポップの設定がデフォルトでは保存できないようになっているからなんです。WAF設定|ウェブアプリケーションファイアウォールロリポップによるとウェブアプリケーションのやり取りにおける不正侵入を防ぐことができるサイト改ざん対策の一つとされています。これは外部ウェブアプリケーションが自サイトに変更を加えないためのファイアウォールと言えます。GoogleAdsenseの広告Scriptを受け付けてくれないのではないでしょうか?(推測)保存できるようにしようこれはとても簡単です。次の手順に従って操作してください。1.ロリポップのユーザー専用ページにログインするユーザー専用ページにログインするのですが、アカウント情報がブラウザに保存されていれば問題ありませんが万が一のことを考えてFacebookアカウントでログインできるように連携しておいたほうがいいです。2.セキュリティータブ左のセキュリティタブをクリックすると上から2番目にWAF設定(ウェブアプリケーション設定)があるのがわかります。これをクリックしてみましょう。赤丸の所に注目してください。デフォルトではここが有効になっています。『無効にする』ボタンをクリックすることでWAFを無効にしカスタムHTMLが保存できるようになります。3.慌てないで!せっかちさんはここで『そうかわかった!』と離脱していることでしょうがちょっと戻ってきてください。設定を変更してから5分程度時間を空けてから保存してみてください。4.WAFを有効に戻そうWAFは自サイトを外部から守る大事なファイアウォールです。そのまま無効にしていると外部アプリケーションによって何をされるかわかりません。保存が終わったら必ず有効に戻すことを忘れないでください。まとめ今回はGoogleAdsense広告を張ろうとしてウィジェットのカスタムHTMLが保存できないというものでした。原因はレンタルサーバーで利用しているロリポップ側のファイアウォールで、そこを一時的に無効にすることで保存ができるようになります。ユーザー専用ページにログインし、セキュリティタブのWAF(ウェブアプリケーションファイアウォール)を開きます。該当するサイトのWAFを無効にししばらく時間をおいてからWordPress側のカスタムHTMLを保存してみてください。保存が完了したら必ずWAFを有効に戻して終了してください。プロフィールAuthor:Gaku今の自分があるのはいままでの苦労や経験があるから。たくさんの人たちに教えられ得た今の自分のIdentityは何物にも変えがたく、感謝の日々。そんな経験や今の感性、生活の中のちょっとしたEssenseをお届けします。SiteOrigin.。