何かに書きたいのです。2019.01.26この記事は約7分で読めます。更新履歴20.01.08初期の内容は不必要と判断したため一部内容を削除ブログ運営初心者のころ、カスタマイズに困った目次。本記事では、その目次についてカスタマイズなどをまとめております。完成!ホバー・タップ時に変化をつけたい文字色を変える文字に動きをつけるCSSコードまとめ目次ってそもそも何だっけ(思考)長い記事では特に大事な役割をしてくれる目次。表示しているだけだと、かえって読みにくくなることも。いい記事を書こうとすると、つい目次のボリュームも増えてしまうんですよね。目次は、その内容を検索する際において利便性を与えるために付与される箇条書き形式のページもしくはその集まりである。情報処理分野の情報検索においてはインデックスという考えもあるが(中略)ネット上の文書においては各節・章へのリンクを列記している場合が多い。https://ja.wikipedia.org/wiki/%E7%9B%AE%E6%AC%A1箇条書きだって。目次ってもっとシンプルでいいはずなんだ。読んでもらうために使う機能なのに、目次に情報を詰め込んだばっかりに離脱されたら意味がない、と。私の親切心が見づらさに繋がってしまったようでした。いうことで、カスタマイズの前にまず「ひたすら説明していた目次」を洗練しました。新聞の見出しを作る感覚で、文字数を削ったり、表現を他の言葉に変えたりして洗練することも有効ですね。何か」を考えながら、削る。この位なら見られますかね。目次の準備ができたところでカスタマイズに取り組みます。デフォルト目次は、こんな感じ。今回のカスタマイズイメージです。「見出し3は小さめ文字」でまとめられたらいいかなと。私が確認できたコードを置いていますので、作業環境によって反映できるコードが異なるかも。編集しやすくするため日本語で要素をあわせて書いてますが、無くても大丈夫。表示準備(Cocoon設定)コードを書く前に、テーマ側で設定する目次の状態を確認します。目次タブ参考までに私の設定画面です。目次カスタマイズに関係のない項目は省略。close目次表示の深さ:H4見出しまで目次ナンバーの表示:表示しないカスタマイズ(CSS)では、カスタマイズしていきます。目次の背景(全体のデザイン)を設定。背景色とか目次枠のデザインはココ。text-decoration:none;}目次タイトル「目次」というタイトルの文字を変更できます。「もくじ」など表記をひらがななどにしたい場合は、カスタマイズではなくCocoon設定から変更します。「目次」というタイトルの隣にアイコンを表示する。ひよさんアイコン不要なら飛ばしてくださいアイコンは以下サイトを使います。CSSへ貼り付け個性的なアイコンにするのも面白いですね。目次内の各見出しの設定です。15px;}これで太字にできるんだけど、見出し3が上手く反映されず。対策として以下の方法で表示しました。見出し3をデフォルトにするというイメージです。16px;}ひよさんスマホでタップしにくいから、小さくしすぎに注意ね完成!見出し2と3の項目が区別できて、見やすくなりました。パソコンとモバイルでの表示が若干違うのですが、調整方法がいまいちつかめません。ここからはオマケです。需要のないちょっとした遊び。ホバー・タップ時に変化をつけたい目次にカーソルを置く・タップした時に選択部分がわかりやすいと良いかなと思い、ホバー時のカスタマイズも追加。実際はスマホからタップても挙動なんかわからんけど、まぁ見えた方がいいかな程度ですね。6px;/*動く幅*/}これで目次内の項目をホバー・タップするとヌンって動いたり、色が変わったりします。初心者でも簡単にできるのでオススメ。゚ω゚)))動く幅を変えたければ『margin-left』の値を調整。大きく動かすこともできます。パソコンで操作した時の画面の様子です。※再生できない場合は閲覧ブラウザを変えてみて。そこまでして見なくていいです。https://tonikaki.net/wp-content/uploads/2019/06/20190602_163447.mp4もっと適切なコードがあるかもわかりませんが、異常なく表示されたらオッケー!ということで。参考になれば幸いです。人気ブログランキングちゅるとにかき。―とにかく何かに書きたいのです。サイト運営(&定期報告)【運営5~6カ月目】アクセスがなく落ち込むのは半分違う―目的がないからへこむんだ更新作業にも慣れ、結果を期待してしまう時期。期待通りのアクセス数にならなかったら?今回はそんな記事です。2019.11.26サイト運営(&定期報告)【運営9~10カ月目】マジで何も考えられない5秒前(MN5)サイト記事更新も日常になってきましたが、なんか疲れてきた...迷いが出てきた...これって、○○がないんですよね。今回はそんな弱気になっている時に書きました(解説じゃないんかい)。2019.11.27サイト運営(&定期報告)【運営3~4カ月目】ド新規サイトでも変化が見えてくる時期―更新して気付くことが必ずあるガチで新規ドメインの個人サイトでも、変化はある―そんなちょっとした動きと、やってよかった&やればよかったことをまとめております。技術面以外のサイト運営記事を探している方に参考となれば。2019.11.26サイト運営(&定期報告)【例文つき】実は個人サイトでも必要?プライバシーポリシーをわかりやすく作ってみた【ワードプレス向け・文例コピペOK】企業が使うものと思いがちな「プライバシーポリシー」。個人サイトやブログでも使えるように、作り方と文章の例をまとめました。2020.01.11コメントをキャンセルメールアドレスが公開されることはありません。※コメントは承認制です。内容確認後に反映します。現在、承認まで数日お時間をいただく場合があります。いい言葉・話ちゅる食べること・文章を書くことが好きな北海道の30代女性。人生がうまくいかないのは「自分の思考」だと気がつく。失敗談などを基にしてわかりやすくまとめた“ココロの話”などを発信してます。いい言葉・話ちゅる食べること・文章を書くことが好きな北海道の30代女性。人生がうまくいかないのは「自分の思考」だと気がつく。失敗談などを基にしてわかりやすくまとめた“ココロの話”などを発信してます。完成!ホバー・タップ時に変化をつけたい文字色を変える文字に動きをつけるCSSコードまとめタイトルとURLをコピーしました。