前回は使用したコードの解説でした。記事内にサンプル表示用に2つ目次を設置していましたが、セレクタが干渉して期待した通りに動作しませんでしたので該当箇所を削除致しました。記事内に目次を1つだけ設置する際には問題なくご利用頂けます。...続きを見るしかし毎回テキストエディタなどからコピーアンドペーストするのも大変ですよね。PrintWhatYouLikeを使用して楽にする方法をご紹介します。Chromeの拡張機能は使用せずにClipy(PhraseExpress)のみの運用でも、十分楽に目次作成が出来ますので他のブラウザをお使いの方や拡張機能に興味のない方は、拡張機能についての項目は読み飛ばして頂いて結構です。Clipyを使おうClipyはMacで使えるスニペットアプリです。主な機能はクリップボードにコピーした履歴を複数記憶&呼び出しできる定型文を登録していつでもペーストできるようにするなのですが、これが今回の目的に超!マッチしたんです。日本語入力の辞書登録機能で済ませようと思っていたのですが、コード内の改行が上手くいかず困りました。Clipyでは複数行であっても登録した通りに挿入されるので、この機会に導入することをおすすめします。ClipyのインストールClipyはこちらのURLからダウンロードします。https://clipy-app.com/ダウンロードが終わったら、dmgファイルをダブルクリックし、Clipyのアイコンをアプリケーションフォルダに移動します。これで導入が完了です。スニペット登録いよいよClipyに必要なHTMLコードをスニペットとして登録します。ここで登録するのは以下のコードです。href="#識別名">目次の項目</a></li>id挿入用id=""※「H2〜H4までの項目用」のコードは人それぞれかと思いますので、必要な個数分用意して下さい。識別名と目次の項目は記事毎に作成しますが、クラス名は各サイズの見出しに与えてあるものを記入した状態で登録しておきます。スニペットの登録は、[メニューバーのClipyアイコン]をクリック→[スニペットを編集]で開くスニペット編集ウィンドウから行います。[フォルダを追加]から好きな名前のフォルダを追加し、その中に前述したコードを登録していきます。これで登録したショートカットを使用すれば、WordPressのテキストエディタ上ですぐに使いたいコードを呼び出すことが出来ます。使用する際はWordPressのテキストエディタ上でClipyを呼び出し、作成したスニペットを順次配置していきます。メモ呼び出すショートカットキーは[メニューバーのClipyアイコン]→[環境設定]→[ショートカット]から確認できます。メイン:上の画像のように、コピー履歴とスニペットが両方出てきます。履歴:コピーした履歴のみ表示されます。スニペット:登録したスニペットのみが表示されます。実際に目次を書いていく準備が出来たので、これから目次を作成していきます。大まかな流れは・HTMLのベースを置く・記事に沿って項目を増やしていくというだけですが、この記事に沿って項目を記述していく際に「PrintWhatYouLike」が役に立ちます。この拡張機能を利用すると、長〜い記事の構成を俯瞰する事ができるようになるのです。記事の大まかな流れを掴むことでブログ記事のレイアウトがひと目で分かるようになり、投稿済みの記事の目次を作成したり、記事投稿前に目次の配置が合っているかを確認したりするのが楽になります。拡張機能「PrintWhatYouLike」についてGoogleChrome用の拡張機能「PrintWhatYouLike」はこちらのリンクよりブラウザに追加することができます。https://chrome.google.com/webstore/detail/printwhatyoulike/npgfabafajliaooeicdoahbpoajfmbbe拡張機能を追加したら、まずは目次を作成したい記事を「プレビュー」で表示します。ブラウザ右上のPrintWhatYouLikeのアイコンをクリックして、PrintWhatYouLikeの画面を表示します。画面左の[PagePropeties]の[Images]と[Margins]のチェックをHideに変更します。すると記事内の画像や余白などが消え、見出しと本文のみの表示になるので、この画面を見ながら目次を作成していくことが出来ます。目次の作成ビジュアルエディタのままでHTMLを記述すると目次が作成されずにHTMLがそのまま掲載されてしまうので、テキストエディタに切り替えるのを忘れずに作業して下さい。href="#toc-large3">大見出し3</a></li></ul></div></div>前回の記事にも書きましたが、識別名は任意のものでも構いません。識別名との紐付けを間違えると違う項目にジャンプさせてしまったりというミスに繋がり兼ねませんので、midashi-1、midashi-2のようなものよりもmake-cheesecakeやosusume-diet-recipeなどの項目内の内容が想像できるものにしておくのが好ましいです。記事内の見出し(Hタグ)にidを割り振る目次内に設定した識別名を実際にジャンプする先の見出しに設定して、目次の項目をクリックしたら該当の見出しに移動できるようにします。記事内の見出しはデフォルトでは<h4>目次の作成</h4>のようになっています。これにスニペット登録したid挿入用のコードを追加します。id="">目次の作成</h4>id=""の中に4.で設定した識別名を書き込みます。id="make-toc">目次の作成</h4>これで、目次につけた識別名と見出しに設定された識別名がリンクして、指定した箇所にジャンプできるようになります。後は目次のジャンプ先が合っているか、見出しの文章が合っているかなどを確認して完了です。【Mac版RockSmith2014】"Rocksmith.ini"の場所Mac版SteamにてRockSmith2014を購入した場合の、設定ファイル(Rocksmith.ini)の場所です。ページが全て表示できない状態になってしまったことがありました。問題解決スマホを初期化したらAuthyにログインできなくなった【解決済】スマホを初期化(出荷時リセット)してAuthyを再インストールしたところ、電話番号を入力してもアカウントにログイン出来ませんでした。...WordPress初心者の私がWordPressブログを作るまで6(BASIC認証設定編)sebu最後の仕上げに、「WordPressのログイン画面」に鍵をかけてしまいましょう。これを設定するとこのようなログイン名とパスワードを求めるポップアップウィンドウが表示されるようになります。初心者の私がWordPressブログを作るまで5(セキュリティ対策〜.htaccess設定〜)当記事では、実践した.htaccessファイルに関する設定の中からいくつかをご紹介します。Chromeを使っている全ての方へ!オススメ拡張機能3選コゲラカジュウパソコンやスマートフォンに触れるのが好きです。ブログ運営やパソコン・スマホ使用時に直面した問題とその解決法などを書いています。お絵かきやDTMにも興味があるこの頃です。色んなジャンルの方と繋がりたいので、Twitterのフォローもお待ちしております。