はてなブログで枠付き文章を使う方法

枠付き文章が使えるようになりました。

たとえば、

問1

お雑煮のおもちの数はいくつですか。

1つ
2つ
3つ

とか

問2

ある6面の電子サイコロは、ある1種類の目だけは出ないという。他の目は等確率で出るとして、その出ない目を明らかにするには、平均何回振ればいいか。

とかできます。

タイトルなしもできます。

テストテキスト

学問系のブログを書く方には、必須なのではないでしょうか。

特に、数学関係のことを書く際には、より記事が分かりやすくなると思います。

※この記事の内容は、2023年3月時点のものです。

方法

と言っても、「HTMLを編集するんじゃないの？　それって面倒だよ」と考えるかもしれません。

いいえ。この方法は、一度設定すれば、もうHTMLを編集する必要はありません。「見たままモード」で簡単に使うことができます。

「定型文」の機能を使うことで可能になります。次の事実が要になります。

定型文の機能は、HTMLを解釈する。

つまり、定型文をたとえば、「<div style="text-align: center;"><p>HELLO</p></div>」とした場合、これを「見たまま」の編集中に挿入すると、

HELLO

となり、「HELLO」の文字列を編集できる状態になるのです。有難いことです。

手順

環境構築のために必要なことは、次の4つです。（多いですね）

編集画面のサイドバーにある「定型文貼り付け」から、定型文を作成する
はてなブログの「デザイン」の中にある「デザインCSS」にCSSを追加する
スマートフォンにもデザインを適用する設定をする
Chrome 拡張機能で、見たまま編集にもCSSを適用する

環境を構築し終わったら、編集画面のサイドバーにある「定型文貼り付け」から、クリックで簡単に枠付き文章を使えるようになります。

１．定型文の作成

たとえば、私が使っている定型文「シンプルな枠付き文章（タイトル付き）」の内容は以下のようなものです。

<div class="simple-border-with-title">
  <div class="border-box-title"><p>TITLE</p></div>
  <p>TEST</p>
</div>
<p></p>

最後に空のpタグがあるのは、編集時に、枠の中から簡単に出られるようにするためです。

同じ要領で、タイトルなしの枠付き文章の定型文も作れます。

<div class="simple-border">
  <p>TestText</p>
</div>
<p></p>

２．デザインCSSの設定

定型文にて定めたクラスに対して、スタイルを設定していきます。

たとえば、今回私が使ったスタイルは、次のものです。

.simple-border, .simple-border-with-title {
    border: 1px solid black;
    border-radius: 0.5rem;
    margin: 1rem 0rem;
    padding: 0.6rem;
}
:is(.simple-border, .simple-border-with-title) :is(p, ul, ol) {
    margin-top: 0px;
    margin-bottom: 0px;
}
.simple-border-with-title {
    padding-top: 1.0rem;
}
.border-box-title {
    background-color: white;
    width: fit-content;
    margin-top: -2rem;
    margin-left: 1rem;
    padding: 0.5rem;
}
.border-box-title p {
    line-height: 1rem;
}

これをはてなブログの「デザイン」の中にある、「デザインCSS」に追加します。

色や形、レイアウトなど、好みに応じて調整してください。

（少し技術的な話をすると、<fieldset>と<legend>を使う方法もありますが、本来のタグの意味にそぐわないため、<div>とクラスで実装した方がいいと思います）

３．スマートフォンにもデザインを適用するための設定

この時点でもう、定型文を使って作った記事が、PC版のプレビューで確認できるようになっていますが、特に設定していない場合、まだスマートフォンの方にはデザインCSSは適用されません。

そういう仕様です。

ではスマートフォンの方にも適用するにはどうすればいいか。

一番簡単なのは、レスポンシブデザインを有効にすることです。「デザイン」の中のスマートフォンのところの「詳細設定」にあります。（下の追記も参照のこと）

レスポンシブデザインというのは、要するに、PCとスマートフォンを共通のデザインにするってことです。

有料会員の方は、スマートフォン版のデザインCSSを設定することもできるので、スマートフォン版とPC版で、デザインを変えてみたりもできるみたいです。

（無料版でもscriptタグで無理やり云々ですが……）

追記：　レスポンシブデザインを使わない方法（2023年3月）

レスポンシブデザインにすると、デザインが共通化され、スマートフォンでのブログトップで記事一覧が短く表示されなくなったりと、不便な点もあると思います。

レスポンシブデザインを有効にしなくても、適用できる方法がありました。「デザイン」内の「記事」の項目で、「記事下HTML」というのがあるので、そこにstyleタグで囲んだCSSを書き込みます。

それから、スマートフォンの方の「記事」の項目内に、「PCと同じHTMLを表示する」という項目があるので、有効にすると、レスポンシブデザインにしなくても、スマートフォン版で枠付き文章が使えるようになります。

「デザインCSS」の方のCSSは残しておいた方がいいと思います。残しておかないと、PC版の記事一覧（トップページ）で枠がつかなくなるからです。（記事内では重複しますが）

４．Chrome 拡張機能で、見たまま編集にもCSSを適用するための設定

ここまでで、記事としては問題なく枠付き文章が使えるようになったわけですが、このままだと、見たままモードで編集するときには枠などが表示されず、普通の文章と区別できずに編集がとても困難になります。

これを解決する一つの方法が、Chrome 拡張機能によるCSSの適用です。

勿論、Chromeを利用している場合に限ります。

参考にした記事：https://kame777.hatenablog.com/entry/mitamama-css

簡単に説明すると、Chrome 拡張機能の中に、特定のページのデザインを変えたりできるものがあります。それを使って、編集画面のページのデザインを変えてしまおうってことです。

参考にした記事では、「Stylish」を紹介していましたが、これはデザインが俗っぽいので、代わりに「Stylus」の方がよい気がします。この辺は好みですね。

Stylish - Custom themes for any website - Chrome ウェブストア

Stylus - Chrome ウェブストア

拡張機能に、編集画面のURLで、2番のデザインCSSで設定したものと同じCSSを設定すれば完了です。

そのほか

細かな枠付き文章のデザインについては、変えたり増やしたりしてください。
CSSについては、バックアップも取っておいた方がいいと思います。
一応書いておきますが、記事の先頭や末尾に枠付き文章をおくと、その枠の上や下に行けなくなることがあります。そのときは、HTMLのその個所に「あ」とか適当に打って解消してください。

最後に感想など

これで使えるようになると思います。

私も今回初めて「定型文」の機能を知りました。CSSも久しぶりにいじって楽しかったです。応用すれば、もっと面白いことが色々できそうです。

この記事が役に立てば幸いです。

方法

手順