はてな数学ブログ用 記法と定型文の覚書

latest update: 2022.03.20

\[ %%% 黒板太字 %%% \newcommand{\R}{\mathbb{R}} \newcommand{\C}{\mathbb{C}} \newcommand{\Q}{\mathbb{Q}} \newcommand{\Z}{\mathbb{Z}} %%% 引数を取るもの %%% \newcommand{\f}[2]{ \frac{#1}{#2} } \]

自分用の覚書です．はてなブログの編集モード:Markdownで数式混じりの文章を書くためのものです．

はてな記法

はてなでしか使えない書き方です．

目次

[:contents] と書くと自動的に目次を作ってくれます．

脚注

((ここに脚注を書きます)) という書き方をすれば，自動で脚注を作ってくれます．*1

リンク埋め込み

[url:embed] と書くとそのページを埋め込んでくれます．

はてなアイコン

<i class="blogicon-hogehoge"></i> の hogehoge の部分を変えると，アイコンが埋め込まれます．

たとえば <i class="blogicon-recent"></i> と書くと と表示されます．これは，最終更新日を表示するときに使っています．

Markdown

見出し

# をつけると見出しになります．# の数は１個から６個まで増やすことができ，数が多いほど控えめな見出しになります．HTMLでいうと<h1>から<h6>に対応しています．

はてなブログでは[:contents]と書くと目次が挿入されますが，見出しは目次に反映されます．

リンク

[アンカーテキスト](リンク先のURL)という書き方をします．アンカーテキストとは，画面に表示される文章のことです．リンク切れしたときのために，なるべくリンク先のことを詳しく説明しておいた方が親切です．

強調

**で文章を囲うと，囲まれている部分が強調されます. HTMLにおいては，<strong>タグに相当します．

リスト・箇条書き

* をつけて列挙すると箇条書きになります．たとえば

* ひとつめ
* ふたつめ
* みっつめ

とかくと次のように表示されます．

• ひとつめ
• ふたつめ
• みっつめ

番号をつけたい場合は，1. をつけて列挙します．番号を手動で入力せずとも，自動で番号が振られます．たとえば

1. ひとつめ
1. ふたつめ
1. みっつめ

と書くと次のように表示されます．

1. ひとつめ
2. ふたつめ
3. みっつめ

エスケープ

# など，Markdownにおいて特別な意味を持つ記号はそのまま打っても正しく表示されません．直前にバックスラッシュを入れて \# と打てば表示されます．

斜体

*で囲った部分は斜体(italic)になります．日本語のよく使われるフォントは斜体にならないようです．HTMLでは <i> タグに相当します．

コード

グレイヴ・アクセント（`）で文章を囲うと，行内コード扱いになるようです．独立行コード扱いにしたい場合は三つ続けて``` で囲います．

```の直後にcssとかhtmlとか言語を指定してやると，自動でシンタックスハイライトを行ってくれます．便利．

HTMLでは，行内コードには<code> </code>で囲います．独立行にしたい場合は<pre> </pre>で囲います．HTMLのpreタグと，はてなブログにおける```は微妙に異なるようなので，なるべくpreタグは使わない方がいいようです．予期しないことが起きたりします．

Test Code: hogehoge

たとえば，preタグの直後ではてな記法で脚注を書こうとすると((この通りうまくいかない))という謎のバグが起こることがあります．

表

表を挿入することもできます．

|指定無し|左寄せ|中央寄せ|右寄せ|
|---|:---|:---:|---:|
|left|left|center|right|

指定無し	左寄せ	中央寄せ	右寄せ
left	left	center	right

HTML

太字

<b> タグで囲うとその部分が太字になります．boldの略です．<strong>タグと挙動が似ていますが，CSSを適用する際には別のものとして扱われます．強調するほどではないけれどほかの文章と区別したいときや，目次に反映されない見出しを作りたいときなどに便利です．

段落

段落分けを行いたい場合，pタグを使います．<p>と</p>で文章を囲うだけです．ふだんはMarkdownで十分ですが，たまに必要になることがあります．

コメントアウト

次のように文章を <!-- と --> で囲うと，その文章は表示されません．

<!-- ここにコメントをいれます -->

改行と空白

改行を入れるには <br> と打ちます．break の略です．ユーザ辞書に登録しておくと便利です．<br>はあくまで改行用のタグであって余白の調整用ではないので，余白を調整したい場合は別の方法を使ってください．さもないと微調整が効かなくてイライラすることになります．

空白を入れたい場合は（いろいろありますが）  と記入します．こうすると，全角スペースとほぼ同等の大きさの 空白 が入ります．

折り畳み

折り畳み表示もできます．

<details>
  <summary>ここに折りたたんだ時に表示される文字を入れます。</summary>
  ここに折りたたまれて非表示になっている文字を入れます。
</details>

ここに折りたたんだ時に表示される文字を入れます

ここに折りたたまれて非表示になっている文字を入れます

引用

引用文を表すために，blockquoteタグが用意されています．markdownでも > を使って表現できますが，citeタグはHTMLにしかありません．定型文に登録しておくことをお勧めします．

<blockquote>
ここに引用文を書きます
<footer><cite>ここに出典を書きます</cite></footer>
</blockquote>

ここに引用文を書きます

ここに出典を書きます

参照

TeXにおける\refのように，ページの途中の特定箇所に飛ぶリンクを作りたいときがあります．*2

そういうときには，まず飛びたい位置のタグにid名を付与します．ここではdivタグにつけることにしますが，pタグとかhタグとかでも構いません．たとえば，下にあるDoraemon 2021の定理を参照先にしたければ，その定理に次のように名前をつけます．

<div id="example"></div>
<div style="background:#00859B; border: 2px solid #00859B; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">
定理（Doraemon 2021）
</span></div><div style="border: 2px solid #00859B; padding: 10px;">
アルファがベータをカッパらうとき，イプシロンである．
</div>

あとは，参照元のところで次のように書きます．

<a href="#example">ここをクリック</a>

「ここをクリック」のところは任意の文章で構いません．「定理 （Doraemon 2021）によれば～」などと書くことができます．

チェックボックス

<input type="checkbox"> と書くとそこにチェックボックスが現れます．こんな感じです．

<input type="checkbox"> にんじん

<input type="checkbox"> じゃがいも

<input type="checkbox"> ピーマン

にんじん

じゃがいも

ピーマン

JavascriptとTeX

TeX

TeXとは，数式混じりの文章を書くための組版ソフトウェアです．TeXについて書き始めるとさすがにキリがないので，y.さんのTeX講習会資料などをご覧ください．

MathJaxの設定

次のコードを記事の上部に貼るとTeXの記法が使えるようになります．記事ごとに貼らなくても使えるのですが，記事ごとに貼った方が表示が速い気がします．定型文に登録しておくことをお勧めします．

なお//というのはJavaScriptにおけるコメントアウトの記号です．

<!-- MathJaxの設定 -->
<script>
window.MathJax = {
  tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],        //行内の数式
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],     //独立行の数式
      processEscapes: true    //数式の外でもドルマークが使えるように
 }
};
</script>

<!-- MathJax ver.3の読み込み -->
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

行内の数式

ドルマーク$で囲うことにより，数式を表記することができます．Markdownとの干渉を避けるため，行内の数式は段落ごとにdivタグやpタグで囲ってください．*3

なおpタグで囲われている中にdivタグを入れたりしないように気を付けてください．htmlのタグには「このタグのなかにはこのタグしか入れてはいけない」というような関係があって，それを破るとMarkdownの干渉がpreタグの中にまで及ぶという怪奇現象が起こることがあります．*4

divタグは中に何を入れてもおおむね平気なので，とりあえずdivで囲っておけば問題も起こりにくいと思います．

独立行数式

Markdownとの干渉を避けるため，divタグで囲ってください．align環境での改行にはふつう\\を使うと思いますが，Markdownの干渉を受けると上手くいきません．\newline を使って改行すれば干渉されませんが，最も良いのはやはりdivタグで囲って干渉を回避することでしょう．

<div>$$
\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} 
$$</div>

$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$

マクロの設定

MathJaxでも，ユーザーが恣意的に決めたコマンドを使用することができます．それには，MathJaxの設定の後で次のように記入します．これで，\R と打つだけで $\R$ が表示できるようになります．なお，% というのはTeXにおけるコメントアウトの記号です．% のついている行は無視されます．

追記：\[ \] で囲ってあるところを \( \) に変更すると，ブラウザによっては問題が起こります．Chromeでは大丈夫でしたが，SafariやEdgeやFirefoxではマクロ設定が反映されずにエラーになるようです．

<!-- MathJax マクロの設定 -->
<div style="display:none">
\[
%%% 黒板太字 %%%
\newcommand{\R}{\mathbb{R}} 
\newcommand{\C}{\mathbb{C}}
\newcommand{\Q}{\mathbb{Q}}
\newcommand{\Z}{\mathbb{Z}}

%%% 引数を取るもの %%%
\newcommand{\f}[2]{ \frac{#1}{#2} }
\]
</div>

CSS

コメントアウト

CSSの場合は，/* と */ で囲うとコメントアウトができます．

見出しのカスタマイズ

CSSを使うと，見出しごとに余白の調整をすることができます．この記事では次のように設定しています．*5

h1 設定なし

このブログではh1見出しは使用しません．

h2 青斜線 中央ぞろえ

.entry-content h2 {
    color: #516ab6;
    text-align: center;
    padding: 0.25em;
    border-top: solid 2px #516ab6;
    border-bottom: solid 2px #516ab6;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  }

h3 付箋のようなもの

.entry-content h3 {
    padding: 0.2em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background:#fafeff ;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
  }

h4 アンダーライン

.entry-content h4 {
  border-bottom: solid 3px #cce4ff;
  position: relative;
}
h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

h5 左青線つき

h5見出しのみ，デザインテーマのNakedと干渉して変なことになっていたので，リセットするためのCSSを追加しています．*6

/*h5 テーマによる干渉を回避*/
.entry-content h5:before{display:none;}

.entry-content h5 {
  margin-left: 0px; /*テーマによる干渉を回避*/
  padding: 0.05em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

h6 設定なし

h6は設定をしていません．

強調のカスタマイズ

strongタグでどういう挙動をさせるかは，CSSでカスタマイズできます．ここでは以下のCSSが適用されています．

/* strong部分の色設定 */
.entry-content strong {
color: #4169e1;
}

コードのカスタマイズ

codeタグについても，CSSで色などをいじることができます．この記事では以下のCSSが適用されています．

/* code部分の色設定 */
.entry-content code {
background: #DDDDDD;
color: #111111;
}

引用のカスタマイズ

blockquoteタグをどのように表示させるかも，CSSでいじることができます．

この記事ではCSSは以下のものを使用しています．*7

/* 引用 */
blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
}

/* 出典 */
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

余白の調整

見出しと文章の間の隙間を広げたいときなどには，brタグで空行を入れたくなります．しかしbrは改行を意味するコマンドなので，細かい調整には適していません．

私が使っているのは，単純にdivタグに margin-bottom: を指定する方法です．その直後に余白が入ります．

<div style=" margin-bottom: 5em;"></div>

emの前の数字をいじると，余白の大きさが変化します．emの前の数字は整数でなくても構いません．小数点以下も指定できます．

青色ドット線囲み枠

次のように記入すると，文章が青色のドット線で囲われます．*8

<div style="background:#ffffff; padding:10px; border:3px dotted #95ccff; margin-bottom: 1em;">
 青色ドット囲み枠
</div>

青色ドット囲み枠

青色タイトル付き囲み枠

次のように記入すると，タイトル付きの囲み枠が表現できます．*9

<fieldset style="border:2px solid #08549b;"><legend><span style="font-size: 18px; color: #08549b; font-weight:bold;">
青色タイトル付き囲み枠
</span> </legend>
ここに文章をかきます 
</fieldset>

青色タイトル付き囲み枠

ここに文章をかきます

青色白抜きタイトル付き囲み枠

次のように記入すると，タイトルが白抜きされた囲み枠が表現できます．*10

<div style="background:#00859B; border: 2px solid #00859B; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">
青色白抜きタイトル付き囲み枠
</span></div><div style="border: 2px solid #00859B; padding: 10px; margin-bottom: 1em;">
ここに本文を入力します
</div>

青色白抜きタイトル付き囲み枠

ここに本文を入力します

これを用いると，TeXにおける定理環境を次のように再現することができます．

定理（Doraemon 2021）

アルファがベータをカッパらうとき，イプシロンである．

はてなブログでCSSをカスタマイズする方法

CSSのカスタマイズのやり方にも３通りあるので，それを書きます．

CSS 編集欄に貼り付ける

いちばん普通の方法です．記事の方に

<div class="round_box">
    <p>ここに文章</p>
</div>

と貼っておいて，はてなブログのCSS貼り付け欄に

.round_box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}

などと書くと，次のように表示されます．*11 ここでCSS欄に貼り付けた設定は，どの記事でも反映されます．

ここに文章

この方法をとるのが多分標準だと思います．

この方法の欠点は，記事の中だけで完結していないのでバックアップがとりづらいことでしょうか．

記事内で直接記述する

CSS欄を開かずにひとつずつ設定することもできます．たとえば上記の場合，div 要素に class 名をつけずに

<div style="
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
">
<p>ここに文章</p>
</div>

というように，直接 style 情報を書いてしまうこともできます．こうすると，やはり次のように表示されます．

ここに文章

この方法なら，定型文に登録しておけばボタンをクリックするだけで済んで便利ではあります．欠点は，毎回長いコードを記述しないといけないということです．

HTML に CSS を埋め込む

最後に紹介するのが，CSS を記事の中に直接埋め込んでしまう方法です．

記事の中に，次のように記述します．

<div><style type="text/css">
.round_box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
</style></div>

div で囲っているのは重要で，これがないと動作しません．(なぜなのかは知りません)

これによって，その記事の中だけCSSを適用することができます．その記事の中だけで完結するわけです．

この準備のもとで記事に

<div class="round_box">
    <p>ここに文章</p>
</div>

と書けば，

ここに文章

と表示されます．

この方法ですが，意外と知られていないようです．調べてみると「はてなブログで記事の中にCSSを埋め込む方法は存在しない」という情報まで出てきます．そんなことないと思うのですけど，私は詳しくないので何か見落としているのかもしれません．

この方法のメリットは，CSSを後から変更してもその記事内だけつじつまを合わせれば済むということです．また，HackMDなどのCSS指定欄のない他のWeb上のエディタでも使えます．

*1:具体的にはこんなふうになります

*2:この節の内容はサルワカさんからの引用です

*3:この回避方法ははてなブログで数式を書く - 七誌の開発日記で紹介されていたものです

*4:詳しくはweblikerさんの記事などを参照のこと．

*5:このコードはサルワカさんからお借りしたものです．

*6:リセットの方法についてはバンビの初心者ブログ教室の記事を参考にしました．

*7: これはサルワカさんからお借りしたものです

*8:このコードはサルワカさんからお借りしたものです．

*9:このコードはサルワカさんからお借りしたものです．

*10:このコードはサルワカさんからお借りしたものです．

*11:このCSSはサルワカさんからお借りしました