2023/09/16 # Blogger + JetTheme ② ## ブログの引っ越し 当ブログは[takemi.blog](https://takemi.blog/)に移行しました。 ## 作成日時 2023/03/02 ## 概要 [前回](/2023/02/26.1550.html)の続きです。やり残しの改造を終えたので簡単にメモを残します。 ## コードに行番号を表示 highlight.jsに関する部分を変更します。 以下を検索して関連箇所を書き換えましょう。 ```js hljs.highlightAll(); ``` 付近をこんな感じに修正します。 ```js ``` ちなみに上記だと1行だけのコードは行番号が表示されません。 もし、1行でも行番号が欲しければ次の記述を試してください。 ```js ``` CSS部分は`Your custom CSS is here`と書かれている辺りに書きます。 内容は以下です。デザインに関する部分なので好みで変更すると良いと思います。 ```js .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #CCCCCC; border-right: 1px solid #CCCCCC; vertical-align: top; padding-right: 0.25rem !important; } .hljs-ln-code { padding-left: 0.25rem !important; } ``` ## コード部分にコピペ用ボタンを追加 よくコードの右上に付いてるあれです。 まずは以下のスクリプトを``の下に書きます。 ```js ``` 次はボタンのデザインを指定するCSSを`Your custom CSS is here`の下に記述します。これも必要なら変えてください。 ```css pre{ position: relative; margin-top: 0.25rem; } #selectPre{ position: absolute; top: 0; right: 0; border: none; border-radius: 4px; background-color: #CCCCCC; opacity: 0.3; transition: 0.3s; cursor: pointer; } #selectPre:hover { opacity: 1.0; } function codeWasCopied(button) { button.blur(); button.innerText = "Copied!"; setTimeout(function() { button.innerText = "Copy"; }, 500); } ``` ## hタグの装飾 Markdownで書いた記事を変換すると境界が分かりづらいです。 なのでh1とh2に下線を付けて装飾します。h1は全体に。h2は文字列のみ。 ```css h1 { border-bottom: 2px solid #F67938; } h2 { text-decoration: underline; } ``` ## おわりに 最初のテンプレに比べれば格段に良くなったはず! Blogger JetTheme