はてなブログを書いていて、よく使うけど標準には付いてない機能の数々。
適宜追記します。
2024年3月現在に使ってるテーマ
NavyDarkCode というものです。
公式や既存のテーマのほとんどが main の横幅が狭く、ソースコードが見辛いなと感じていたため、最初から横幅広めのこのテーマにはだいぶ助けられています。
一応 CSS を書き換えて調整はできるっぽいですが、気を遣わないといけないことがあまりにも多くて私の頭脳ではとても追いつきませんでした。
h-miyako.hatenablog.com
↑ ここの AA が分かりやすい。
ソースコードのファイル名
公式のテーマの説明にも書いてありますが、<div> に pre-filename という class を付けておくと、ソースコードのファイル名を付けることができます。
Qiita には最初からあって、はてブロにはない機能だから、きわめて便利。
// code var x = 3;
プロフィール欄の修正
ダッシュボード → 「デザイン」→ スパナマーク (カスタマイズ) → 「サイドバー」 → 「プロフィール」の「編集」で「自己紹介」に HTML を書く。改行はそのまま残るので 1 行で書く。
<a href="https://github.com/bakkyalo" class="github-link"><span style="font-size: small;">GitHub</span></a> <a href="https://bakkyalo.github.io/mypage/" class="mypage-link"><span style="font-size: small;">mypage</span></a>
JavaScript で書いてみたりもしたが、(window.onload() 等の関係上) 読み込みの遅さの問題もあるので、HTML で書けるなら書いた方がよい。
リンク文字
ただ、デフォルトだとリンク文字の一部に色が付かなかったりするので、適当にデザイン CSS を書き加えています。
ダッシュボードを開いて、左ペインの「デザイン」、スパナマークを押して「デザイン CSS」で開けます。
/* <system section="theme" selected="17680117126997168542"> */ @import url("https://usercss.blog.st-hatena.com/-/theme/17680117126997168542.css?version=ecc3cd9d2f0237c438d8c30ca65f26e9ab09f6af"); /* </system> */ /* <system section="background" selected="383838"> */ body{background:#383838;} /* </system> */ /* 先に user 定義を入れておく */ .entry-content ul a { // color: #52a6e7; color: #cbb0ff; } .entry-content ul a:hover { // color: #0090ff; color: #a97dff; } /* about ページ */ .entry-content dl dd a { color: #cbb0ff; } .entry-content dl dd a:hover { color: #a97dff; } /* プロフィール */ /* span.id { text-decoration-color: #cbb0ff; } a.hatena-id-link span:hover { color: #a97dff; text-decoration-color: #a97dff; } */ /* bakkyalo */ a.hatena-id-link span { color: #cbb0ff; } a.hatena-id-link span:hover { color: #a97dff; } a:any-link { text-decoration-color: #cbb0ff; } a:-webkit-any-link { color: #cbb0ff; text-decoration-color: #cbb0ff; } a:-webkit-any-link:hover { color: #a97dff; text-decoration-color: #a97dff; } a.github-link span { color: #cbb0ff; } a.github-link span:hover { color: #a97dff; } a.mypage-link span { color: #cbb0ff; } a.mypage-link span:hover { color: #a97dff; } /* このブログについて 非表示 */ div.profile-about { display: none; }
後のために雑にコメントアウトも残してあります。お見苦しくてすみません。
これでもまだ完全ではないですが、まぁとりあえずって感じで。
画像の貼り付け
このテーマを使ってる都合上、横幅 100% で張り付けると画像がでかくなりすぎてしまうので、CSS を使って横幅を調整します。
例えばはてな記法で画像を張り付けようとすると
><figure class="figure-image figure-image-fotolife" title="メイクアップかすみん。">[f:id:bakkyalo:20240123010524p:plain]<figcaption>メイクアップかすみん。</figcaption></figure><
みたいな形で挿入されると思いますが、それを次のように HTML に書き換えます。
<figure class="figure-image figure-image-fotolife" title="メイクアップかすみん。"> <img style="max-width: 75%;" src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/bakkyalo/20240123/20240123010524.png"> <figcaption>メイクアップかすみん。</figcaption> </figure>
[f:id:bakkyalo:20240123010524p:plain] の 20240123010524p が画像のファイル名に対応していて、png なら p、jpg なら j になります。
日付、ユーザーID を適宜書き換えれば横幅が 75% になった画像が挿入されると思います。
なお、挿入する画像の横幅を一括で変更したい場合は次をどこでもいいので貼っておきます。多分冒頭に置いておくのが分かりやすいと思います。
<style> .figure-image.figure-image-fotolife img { max-width: 75%; } </style>
そうすると、さっきやったようにすべてを HTML に書き換える操作をすることなく、すべての画像の横幅を 75% にできます。
