目次

[JavaScript]目次の開閉状態をCookieで記憶させた

[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。 JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。 /** 2024-08-30 チェックボックスの...

2024.08.30 2024.08.31

とりあえずのメモプログラミングホームページ運用

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の...

2024.08.29 2024.08.30

とりあえずのメモプログラミングホームページ運用

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

ブログの中でもっともよくクリックされるのは、「目次」だそうです。各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。参考サイトを元に、自分のブログに合うように一部修正しました。確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。目次に戻るリンクを挿入するコード functions.phpに追加します。 /** 自動で目次に戻るリンクを挿入 */ add_filter('the_content', function($co...

2023.01.23 2024.05.12

とりあえずのメモプログラミングホームページ運用

note風スタイル第４弾！目次のデザイン

note風スタイル第４弾！目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次（table of contents）のHTML構造 .toc.toc-title.toc-contentol.toc-listlia リスト構造（ol, li）とアンカーリンク（a）の関係で、かなり複...

ニッチな話題ホームページ運用

[CSS] 目次のデザインをすっきりさせた

[CSS] 目次のデザインをすっきりさせた

style.cssに目次のデザインを追加しました。こんなふうに変更しました。違いがわかりますか？スタイルを変更したのは主に３箇所目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭くした /*目次のデザイン*/ .article .toc { border-color: #a08010 ; padding: 10px; width: 95%; } .article .toc-title { text-align: left; } .article .t...

2020.09.19 2020.11.10

ホームページ運用