目次

[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($content) ...
2023.01.23 2024.05.12
とりあえずのメモプログラミングホームページ運用
note風スタイル第４弾！目次のデザイン ニッチな話題

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

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

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

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