まりふのひと

コピペで、はてはブログの目次をカスタマイズし、随時、目次へ戻れるようにできた‥‥かも

f:id:ogohnohito:20130520050353p:plain

 長文になる時等はツールバーの[目次](右図)を使って目次を作成しているが、ある時、無視されていることがあった。
どうもスクロールして探す方が(慣れていて)いいようだった...
 そういう背景もあり、目次をカスタマイズしてみた。

🌐はてなブログ【目次カスタマイズ】コピペで使えるデザイン集|フジブロっ! 2020-05-03

www.fuji-blo.com

 この記事では目次の部分的なカスタマイズから、コピペするだけですぐに使えるコードまで用意したので、良ければお使いください。
 記事内のコードは全て「このコードをコピーする」というボタンを押すだけで、コピーすることが出来ますのでご利用ください。
最初にCSSを貼り付ける場所を確認しておきます。記事内のコードを下記の手順に従い「デザインCSS」に入れてください。

  1. ダッシュボードの【デザイン】を選択
  2. 【スパナマーク】 【デザインCSS】の順に選択し、 枠内にコードを貼り付ける

 ということで、上記サイトの

  1. ルーズリーフ風の目次の[このコードをコピーする]をクリック
  2. 管理メニューの[デザイン]⇒[カスタマイズ]⇒[デザインCSS]をクリック
  3. 枠内にコードを(追加)貼り付けた。
  4. [変更を保存する]



 確認のため、2021-07-16の まりふのひとのブログ「Excelリボン/ユーザー設定のコマンド用マクロをドライブC直下に置き、パスワード保護共有を試行]」を見たら‥‥
目次のデザインが変わっていたぁ~~~

🌐【はてなブログ】上に戻るよりも<目次に戻るボタン>を設置しよう!|るいのブログ 2020-12-22

 前述のまりふのひとのブログには f:id:ogohnohito:20210807150458p:plain:w56 が所々に出てくるが、これは全くの手作り。るいのブログ さんが言う <目次に戻るボタン> とは左下に常時表示されており、何時でも目次に戻れるという優れもの。
コピペで出来るようなのでやってみた。

  1. デザインCSSCSSを書き込む
    1. ダッシュボード ⇒ デザイン を開く。
    2. パナマーク ⇒ デザインCSS を開く。
    3. るいのブログにあるコードをコピペする。
    4. 変更を保存する。
  2. 「記事下」にhtmlを書き込む
    1. ダッシュボード ⇒ デザイン を開く。
    2. パナマーク ⇒ 記事 を開き、
    3. 記事下」に
      <a href="#link" class="hi-mkj"></a>
      を入れる。
    4. 変更を保存する。
  3. 各記事、、、にリンクを貼る(編集モード:はてな記法の例)
    1. 目次を作ってある[記事を編集]する。
    2. "[:contents]" の真上に
      <a name="link"></a>
      を入れる。
      • アッ! これは自分で「▲目次へ」を作る場合と同じなので、苦にはならない...
  4. アイコンの三本線が表示されなかったので‥‥
    1. ダッシュボード ⇒ 設定 を開き、
    2. [詳細設定]をクリックする。
    3. 「headに要素を追加」までスクロールし、
    4. 枠内に
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      を入れた。
    5. 最後までスクロールし、[変更する]をクリックして、
    6. 閉じた。