はてなブログにして良かった！と思っている今日この頃。サイトをカスタマイズするのが楽しくなってきています。
とはいえ、コードは特段勉強していないし、初心者なのでできることに限りがあるし…。
そんな私にとって、基本的な初期機能は揃っているうえで、カスタマイズも割と自由なはてなブログは、ちょうど良い感じです。
ブログの先輩たちが、過去何年にもわたってカスタマイズの記録を残してくださっていて大変ありがたい！
ソースコードを記事に表示したい
さて、サイトのカスタマイズをしていると、忘れないように記録を残したくなりました。だけど、コードを記事にする方法がわからない。
コードを記事に書く方法を検索したのですが「コード 枠 作成」「ブログ CSS 貼り付け」などでもなかなかヒットせず…検索に苦戦しました。「はてなブログ ソースコード 貼り付け」と検索して、ようやく糸口が見つかりました！
方法は主に以下のサイトを参考にさせていただきました。ありがとうございます。
「はてな記法」で記事を書けばラクラク！ということが判明しました。ただ、初心者の私は「見たままモード」の方が使いやすい。そういう訳で、以下の方法にたどり着きました。
「見たままモード」で記事内にコードを書く方法
- 「見たままモード」でコード以外の記事（【記事A】と呼ぶ）を書き、一旦下書き保存。
- 新規の記事（【記事B】と呼ぶ）を開き、記入方法を「はてな記法」にする。
>||～～～||<でソースコードを囲む（～～～の部分にコードを記入）。- 「>||」の中に「|css|」や「|html|」などと言語種類を入れると、コードの色付け表示をしてくれる。※コード種別は小文字で書く。*1
- コードの前後を何か文字で囲む（例：コードの前後にそれぞれ「コード」と入力）。
- 「プレビュー」画面で、囲んだ文字から文字を選択コピー（例：「コード」から「コード」までをコピー）
- 【記事A】に戻り、「見たままモード」で貼り付け。
※【記事B】でのコピーは、「リアルタイムプレビュー」ではうまくいかず、「プレビュー」を開いてから選択コピーしました。※スクロール表示をしないなら「リアルタイムプレビュー」でコピーします。*2
※【記事A】に貼り付けるのは「Ctrl+V」での貼り付けでした。「プレーンテキストで貼り付け」ではうまくいきませんでした。
※この記事では、言語種類を大文字で書いてしまっていた為、コードの色分けが反映されていません。記事を公開してから気づきましたが、そのままにしています。
ソースの言語名を表示＆枠をグレーにする
コードを貼り付ける枠を作成したいと、以下のサイトを確認させていただきました。様々なカスタマイズが書かれていて大変有難いです。
kurokinomizuiwa.hatenablog.com
以下を「デザインCSS」欄に貼り付けます。
/*コードブロックに言語名を表示*/
pre.code:before {
content: attr(data-lang);
display: inline-block;
background: #ccc; /*カラーコード変更*/
color: #666;
padding: 3px;
position: absolute;
margin-left: -20px; /*表示位置を調整*/
margin-top: -30px;
}
pre.code {
padding-top: 30px !important;
border:2px solid #ccc; /*追加：コード表示部分の枠設定*/
background:#f8f8f8; /*追加：コード表示部分の背景色*/
position:relative; /*追加*/
}
長いコードはスクロールできるようにする
コードが長すぎると、記事まで長くなってしまいます。そこで使うのは、コードの枠をスクロールできるようにする方法。以下の記事を参考にしました。説明が丁寧で、為になりました。ありがとうございます。
以下を「デザインCSS」欄に貼り付けます。
参考にしたサイトでは、枠の上下の長さが「500px」となっていましたが、私は画面の収まりを重視して、少し小さめの「400px」にしました。コードが短い場合はジャストサイズで表示されます。
pre, code {
max-height : 400px;
overflow : scroll;
white-space : pre !important;
text-overflow : clip !important;
}
※見たままモードで言語名を付けた状態（コードを色分けした状態）では、スクロール表示がうまくいかないようです。原因はなんだろう？？*3
コードを一発で選択できるようにする
コードの選択、微妙に手間に感じました。そこで、ワンクリックで選択できるボタンを付けました。ボタンをクリックするだけで全選択できるので、あとは「Ctrl+C」あるいは右クリックでコピーするだけです。参考にしたのは下記のサイトです。
以下を「フッター」の欄に貼り付けます。
ボタンの表記を【ここをクリックで全選択】に変更してみました。
<script defer>
;(function(d){
if(!window.getSelection){
return
}
var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "【ここをクリックで全選択】"
btn.addEventListener("click", selectPre, false)
function selectPre(){
var sel = window.getSelection()
var pre = this.parentNode
sel.selectAllChildren(pre)
sel.extend(pre, pre.childNodes.length-1)
}
var pres = d.getElementsByTagName("pre")
for(var i=pres.length; i--;){
pres[i].addEventListener("mouseover", addBtn, false)
}
function addBtn(e){
if(this === addBtn.ele) return // not to addBtn if already
this.appendChild(btn)
return addBtn.ele = this
}
})(document)
</script>
併せて以下を「デザインCSS」に貼り付けます。
pre{
position: relative
}
#selectPre{
position: absolute;
top: 0;
right: 0;
border: none;
padding: 2px 3px;
font-family: consolas
}
以上！
今回はコードの記録方法を一気にカスタマイズしました。これで今後はカスタマイズの記事書き・記録の精度が上がりそうです。
また、今回から「カスタマイズ」カテゴリーを追加することにします（「お知らせ」の子カテゴリー的存在として）。CSSやHTMLなどがだんだんわかり、できることが増えて面白いです♪
#はてなブログ の見た目を調整しました。
— やぁのん (@yaanon_21) December 11, 2020
ソースコード（CSSやHTML）を記事に表示する方法と、カスタマイズです。
.
「見たままモード」で書く方法／色付き枠の作成方法／長いコードのスクロール／ワンクリック選択、について書きました。
.
ソースコードの表示を調整しまし…https://t.co/t1LBKZsdKb
