こんにちは！ゆきおです。
今回は、はてなブログのカスタマイズや記事作成に役立つ便利な記事を紹介します。
当ブログのデザインテーマはMinimalismを使っています。
サイドバーの一番下に目次を設置
他の方のブログを見ていて前から自分のブログに設置したかったんですよ。
色んな記事を参考にやってみるもなかなかうまくいかなかったんですが、やっと自分のブログに設置できる記事を見つけました！
↑ コードの説明や設定の仕方など詳しくて素晴らしい記事です。
記事通りコードを貼り付けたらうまくいったんですが少し困ったことが……
私はグローバルメニューを一番上で固定させているために最初の行がグローバルメニューで隠れてしまうんですね。
試行錯誤して最終的には［ ダッシュボード］＞［ デザイン］＞［ カスタマイズ］＞［ヘッダ］＞［ブログタイトル下］に以下のHTMLを張り付けて（枠内クリックでコピー）↓
<div id="kuuhaku" style="height:45px; position:fixed; top:0;"></div>
そのあとに［ ダッシュボード］＞［ デザイン］＞［ カスタマイズ］＞［フッタ］に貼り付けたJavaScriptのコードの51行目［const GLOBAL_HEADER］の値を［'#globalheader-container'］から［'#kuuhaku'］に変更するとうまくいきました。
知識が浅いので無理やりやりましたけど、もっとスマートなやり方があれば誰か教えていただきたいです。
グローバルメニュー設置
↑ 私もこちらのグローバルメニュー使わせていただいてます。
スマホで見るとトグルメニューに変わるようになっていて、レスポンシブスタイルをよく考えられているなと思います。
当ブログで、スクロールしてグローバルメニューが上部に来ると固定されるようになる追加のCSSコードを紹介しているのでよろしければ参考にしてください。↓
ソースコードに行番号をつける
はてなブログでは、スーパーpre記法を使うと簡単にソースコードをカラフルにできます。
更に行番号があれば後から説明する時など便利ですよね。
↑ こちらの記事の通りにすると行番号を追加して表示できます。
Minimalismの場合、白い背景になるのですが個人的に黒い方が好きなので色の変更と行間を狭くするCSSコードを［ ダッシュボード］＞［ デザイン］＞［ カスタマイズ］＞［ デザインCSS］に追加で貼り付けています。（枠内クリックでコピー）↓
/*色変更 行間狭く*/ .entry-content pre { background: #1f1f1f; color: #ccc; line-height:1.5; }
見たまま編集で使える囲み枠
↑ styleタグで直接色などを指定しているので見たまま編集でも枠が見えるのが便利。
こちらの記事内で枠線や背景を好きな色を変更することもできます。
デメリットとしては記事完成後に後からスタイルを変更する場合、全ての記事一括で変更できないことですね。
記事一つ一つ変更しなければなりません。
はてなブログアイコンフォントのコードコピー
↑ はてなブログのアイコンフォントのコードをクリックするだけでコピーできるので便利です。
今回の記事でもアイコンフォントの［ ］［ ］［ ］を使っています。
記事作成時に別タブでこちらの記事を開いておきアイコンフォントコードをコピーしてHTML編集画面に貼り付けていけば効率的に進められますよ。
最後に
今回紹介した記事はいずれもカスタマイズや記事作成にとても便利ですよ。
いつか自分でもこのような有用な記事が書けたらいいなと思います。
以上、ゆきおでした。それでは、また！
