QuickLaTeX – 数式の番号について

概要

QuickLaTeXでディスプレイ数式を書くとき、通常のequationやeqnarrayを使うと自動的に番号が付けられるが、番号をつけない方法とまとめて整理した。

ディスプレイ数式

番号付き

equationブロックにする。

(1)    \begin{equation*} y = a x + b \end{equation*}

番号なし

equation*を使う。

     \begin{equation*} y = a x + b \end{equation*}

連立方程式

番号付き

eqnarrayブロックにする。

QuickLaTeXの場合、式番号は連立方程式群に一つの番号がつく。個別の式に番号をつけるためのnumcases、subnumcasesは機能しない。

等号を揃えるには、等号の前後を&で挟む。

(2)    \begin{eqnarray*} x &=& y + z \\ u + v &=& w \end{eqnarray*}

番号なし

eqnarray*を使う。

     \begin{eqnarray*} x &=& y + z \\ u + v &=& w \end{eqnarray*}

囲碁 – WordPressの棋譜プラグイン

インストール

  1. プラグイン→新規追加→”プラグインを追加”のページ
  2. キーワード”igo”で検索→プラグイン”Glift Go Game”がヒット
  3. Glift Go Gameをインストール→有効化

使用方法

SGFファイルの準備とアップロード

  1. 棋譜エディタなどで棋譜を作成してSGFファイルをローカルに保存
  2. マルチバイト文字でコメントを入れている場合、テキストエディタでSGFファイルを開き、文字コードがUTF-8になっていなければUTF-8に変更して保存
  3. サーバにアップロード

ショートコードの埋め込み

棋譜画面を表示させたい場所に、以下のようにショートコードを埋め込む。

SGFファイルのURLは相対パスではなく、http://~で始まる絶対表示。

このサイトの場合は以下のようになる。

SGFファイルの場所は、WWWディレクトリ以下のSGFファイルへのパス。

使用例

以下の例は、本因坊秀策の耳赤乃局の棋譜の例。コメントもきちんと表示されている。

 

 

 

 

 

WordPress – PHPを使う

概要

WordPressでPHPをHTML内に書いても、拡張子phpのファイルにならないため、そのままでは実行されない。

.htaccessを変更することでhtmlファイルでもPHPが呼ばれるようになるらしいが、それよりもPHPを外部ファイルとして持っておいて、HTMLからそこで定義された関数を呼び出す方法の方が、改変部分が少なそう。

方法1:親テーマのfunctions.phpに加える

親テーマディレクトリ下のfunctions.phpにショートコードの関数を書き加え、HTMLから呼び出す方法。

たとえばfunctions.phpの最後に以下を追加。場所は最後の方がよいか。

そして、WordPressのエディタ画面で以下を記述。

これで上記の記述の部分でショートコードが実行され、この部分に”Hello World!”が表示される。

ただしこの方法は、親テーマのfunctions.phpを加工しているので望ましくない。

方法2:子テーマのfunctions.phpに加える

子テーマのfunctions.phpに以下を記述する。今回はコード全体を<?php?>で囲んでいる。

そして方法1と同じように、HTMLからショートコードを呼び出す。

この方法だと、親テーマのバージョンアップなどの影響を受けないのでよい。

ただし、ショートコードが増えると、一つのfunctions.phpファイルで管理をするのが大変になってくる。

方法3:別ファイルのPHPを呼ぶ

functions.phpに以下を記述。

以下の内容のファイルを、ファイル名を”php_in_wp.php”として、functions.phpと同じ場所に置く。

そして、以下のようにHTMLから外部ファイルを呼び出す。

下の行は、実際に上記を実行した結果。

Hello WordPress!

参考リンク

WordPress投稿ページにPHP利用→ショートコードを使おう!

 

WordPress – 子テーマを作る

概要

テーマをカスタマイズしたり、テーマディレクトリ下のfunctions.phpを変更したりした後に、テーマをアップデートすると、カスタマイズや変更の内容が元に戻ってしまう。

これを回避するために、適用しているテーマの「子テーマ」を作って、これをカスタマイズする。

テーマの場所

WordPressのテーマは複数のファイルで構成され、テーマ名と同じディレクトリにそれらが格納されている。

たとえば”First”というテーマはfirstというディレクトリで、その内容は次のようになっている。

子テーマ作成の流れ

  1. 子テーマのディレクトリを作る
  2. ディレクトリ下に必要なファイルを準備する
    • style.css
    • カスタマイズ対象ファイル(header.php、footer.phpなど)
    • functions.php(カスタマイズする場合)
  3. 子テーマを有効化する

子テーマのディレクトリを作る

子テーマのディレクトリの場所は、親テーマと同じwp-content/themes/の下。ディレクトリ名は親テーマ名に接尾辞-childを付けることが推奨されている。Firstというテーマなら、first-child

必要なファイルを準備する

ここでは、必須のstyle.cssだけを準備する。たとえば”First”の子テーマを作る場合は以下を記述。

コメント行のうち必須なのは、TemplateとTheme Nameの2つ。

  • Templateには親テーマのディレクトリ名を設定(テーマ名ではない)
  • Theme Nameには子テーマのテーマ名を設定(ディレクトリ名ではない)

@import文は、url()の内容をインポートして適用する。ここで親テーマのcssを設定することで、親テーマのスタイルのすべてがインポートされる。

その後の行で、必要に応じてスタイルをカスタマイズ。

子テーマを有効化する

ダッシュボードの「外観」→「テーマ」で確認すると、子テーマが加えられているので、これを有効化する。

wp-child-theme

子テーマをオーバーライドする

style.css

@import url()で親テーマのスタイルを継承した以降、独自のスタイル設定を記述することで親テーマのスタイルをオーバーライドできる。

たとえば以下の例では、h1タグの色を青にするよう設定している。

実行結果は以下の通りで、h1タグの内容の前景色が青になっている。

wp-child-theme-override-example

 

 

WordPress – functions.phpの場所

functions.phpは各テーマのディレクトリ下に存在する。

functions.phpは各テーマごとに生成されるため、意図をもってその内容を変更した後にテーマをアップデートすると、変更内容が失われる。

テーマをアップデートしても変更内容が失われないようにするには、元のテーマに対する「子テーマ」を作り、そのfunctions.phpに付加する内容を書くとよい。

 

WordPressでのBrythonの扱い方

注意点

WordPressでBrythonを使うとき、以下の点に気を付けなければならない。

  1. brython.jsを読み込むのはheadセクションだが、カスタムセクションにこれを書くなど、WordPressとしての扱いが必要
  2. onload時にbrython()を実行させる処理が必要
  3. スクリプトをHTML内に直接書くときに、WordPressのエディタの仕様が問題になる(勝手に<p>タグがつけられる)。

Brythonの読み込み

通常はHTMLドキュメントのheadセクションでbrython.jsを読み込むが、WordPressの場合は別途処理しなければならない。

このページでは、Custom CSS and JavaScriptでターゲットを指定している。

onload時の処理

<body>タグがPHPに含まれているので触り難いが、以下のようなjavascriptファイルをheadセクションで読み込んでおけば、onload時に関数が呼ばれてbrython()が実行される(WordPressでのonload処理を参照)。

このページでは、上記ファイルをonload_brython.jsとしてサーバ上に置き、先のBrythonの読み込みの後に、Custom CSS and JavaScriptで読み込んでいる。

スクリプトを直接書く時の注意

Brythonを展開するのに、直接HTMLファイルにスクリプトを書く方法と、外部スクリプトファイルに分ける方法の2つがあるのは他のスクリプトと同じ。

ただしWordPressのエディタのテキストモードでスクリプトをHTML内に直接書く場合、スクリプト中に空行があると勝手に<p>タグが挿入されるので、実行時にエラーとなる。<p>タグを付加するのを抑制するか、あるいは空行なしで書けば正常に実行される。

以下の例は、このページ中に直接Brythonのスクリプトを書いたもの。

あるいは下の例のように、スクリプトを外部ファイルにすれば、問題なく実行される。

 

WordPressで<body onload=…>を使う

WordPressでは<body>タグはphpのコードに書かれているが、それとは別にonload時の実行を、以下のようなjavascriptコードで実現できる。

まず以下のようなjsファイルをアップロードしておく。

custom_jsなどを利用して、headセクションでこのファイルを読み込む。

このページのonload時に、上のファイルが実行されてダイアログが表示されたはず。

 

WordPressでカテゴリをクリックしても表示されない

WordPressでカテゴリをクリックしても「ページが見つかりませんでした」と表示される現象が生じた。

ネット上で同様の現象が挙げられており、「タグやカテゴリをクリックすると404エラーで表示されない」というものが多かった。それらのうち以下の方法で解決したので記録しておく。

  1. ダッシュボードメニューの「設定」→「パーマリンク設定」
  2. 下部の「カテゴリーベース」が”.”となっていたのを”category”に書き換え
  3. 保存

他にもパーマリンクの設定を保存しなおすだけで直る、というのもあったが、こちらは効かなかった。

 

 

WP QuickLaTex – 数式の記述

概要

WordPressで整った数式を表示したいとき、MS-Officeの数式エディタの表示を画像として張り付けることを考えたが、探してみると”MathJax-LaTeX”というプラグインがよく紹介されていた。LaTexの書式で書いた数式が整形されて画像として張り付けられるらしい。

MathJax-LaTexはプラグインをインストール後、記事の冒頭にショートコード[mathjax]を書き、そのページ内でLaTexの記述が可能になという手軽なものなので、一度導入して試してみた。

ところが、ショートコードを入れたると$$マークや$マークが数式整形のための記号として認識されてしまう。たとえばjQueryに関する記事中やスクリプトコードで$マークを使うとややこしいことになる。また数式をインラインで書けないとか、テキストモードで複数行にわたる数式を書けないとか、いろいろ制約があるようだ。

そこでほかにもプラグインはないかと探して、以下のサイトに辿り着いた。

WordPress の数式整形プラグイン

WP QuickLaTex“というプラグインがあるそうで、試しにインストールしてみたところ悪くない。

導入手順

  1. プラグイン”WP QuickLaTex”をインストールし、有効化
  2. QuickLaTexの設定でインライン記述の$…$を無効化
  3. 数式を表示したい記事に以下のショートコードを書く(これにより、latexの$$記号が有効化される)

    あるいは、ショートコードなしで記事中でのショートコードで囲んだ部分はQuickLaTexの認識対象になる。
  4. LaTex形式で数式を記述

インラインスタイル

インラインスタイル(a=1のような書き方)の場合は、以下のようにショートコードで囲む。

この機能は、冒頭にショートコードを書かなくても使える。

ディスプレイスタイル

式を別段落で表示させるディスプレイスタイルの書き方には、以下の2つの方法がある。

latexpageショートコードを書く場合

この場合、ショートコード以前の$$マークは無視されるが、ショートコードを書くと記事中の$$マークはQuickLaTexが数式解釈に使う。

latexpageショートコードを書かない場合

ディスプレイスタイルでは、上記いずれの書き方でも、テキストモードで改行して複数行にわたって記述可能。

結局現在は、ディスプレイスタイルも単に[latex]...[/latex]記号のみで書いている。

 

注意点

  • $マークを設定で無効化した場合ショートコード以降の記事の中に直接$マークは書ける
  • latexpageショートコード書くと記事中のの$$マークが数式解釈に使われる
  • 改行文字(\\)は機能しないが、\begin{align}~\end{align}\begin{array}{...}\end[array]で括ると改行される
  • 以下のケースではうまく表示されない
    • ドルマーク2つで数式を書いた直後の行が<pre></pre>の場合、表示されない

記述例

WP QuickLaTexでLaTex形式の記述がどのように表示されるか列挙する。

記号

文字

{\rm }で斜体を通常書体に、{bf }と\mathbf{}は同じで太字、{\boldmath }は機能しない。いずれもギリシャ文字(小文字)には効かない。

     \begin{align*} &abcABC \alpha \beta \gamma \\ &{\rm abcABC \alpha \beta \gamma} \\ &{\bf abcABC \alpha \beta \gamma} \\ &\mathbf{abcABC \alpha \beta \gamma} \\ &{\boldmath abcABC \alpha$ \beta \gamma} \end{align*}

その後、\boldsymbolでアルファベットの大文字・小文字、ギリシャ文字を斜体太字にできることがわかった。

     \begin{gather*} \boldsymbol{abcABC \alpha \beta \gamma} \end{gather}

等号・不等号

    $$ \begin{align} &a = 1 \\ &a \neq 2 \\ &a \leq 2 , \: a \leqq 2 \\ &a \geq 0 . \: a \geqq 0 \\ &a \sim 1.1 , \: a \simeq 1.1 , \: a \approx 1.1 , \:a \fallingdotseq 1.1 \end{align} $$

加減乗除

普通の記号

    $$a + b \times c \div d$$

分数

分数の記述は\fracで(分子・分母で\fracを使うと小さくなるので、元のままのサイズにしたいときは\dfracを使う

\frac{\frac{1}{2} + \frac{1}{2}}{\dfrac{1}{3} + \dfrac{1}{3}}

括弧

分数などに対して背の高い括弧を使うときは、\left(、\right)などを使う。

    $$ \left( \frac{1}{2} + \frac{1}{3} \right) \times 6 = 5 $$

ドット表記

    $$z = x \cdot y$$

プラス/マイナス

    $$ \begin{align} a \pm b \\ a \mp b \end{align} $$

多項省略・ドット表記

    $$ \begin{align} S &= 1 + 2 + \cdots + 100 \\ S &= 1 + 2 + \ldots + 100 \\ &\vdots \\ &\ddots \end{align} $$

矢印

    $$ \begin{align} &\leftarrow \: \Leftarrow \: \longleftarrow \: \Longleftarrow \\ &\rightarrow\ \: \Rightarrow \: \longrightarrow \: \Longrightarrow \\ &\leftrightarrow \: \Leftrightarrow \: \longleftrightarrow \: \Longleftrightarrow \\ &\uparrow \: \Uparrow \: \downarrow \: \Downarrow \\ &\nearrow \; \searrow \; \swarrow \: \nwarrow \end{align} $$

    $$\angle R = 90^\circ$$

基本形

latexショートコードだけで囲むと、数式が左詰めになり、式番号なしで数式が表示される。

     \begin{equation*} z = x + y \end{equation*}

equation環境では、数式がセンタリングされ、式番号が付けられる。

     \begin{equation*} z = x + y \end{equation}

複数行の数式

eqnarray環境では、複数式を一つにまとめて扱える。

     \begin{eqnarray*} (a + b)^2 &=& a(a + b) + b(a + b) \\ &=& a^2 + b^2 + 2ab \\ (a + b)(a - b) &=& a(a - b) + b(a - b) \\ &=& a^2 - b^2 \end{eqnarray}

  • 改行位置に”\\”を記述
  • 等号などで縦位置を揃えたいときは、’&’で囲む

方程式の左を中括弧で囲いたい場合、\left\{とするが、eqnarray環境ではうまくいかない。array環境を使えばよいが、若干の注意点がある。

  • 全体をequation環境で囲う(行番号が不要の場合にはequation*)
  • 中括弧の場合は\{とエスケープする
  • 右側の括弧を省略する場合は\right.

     \begin{equation*} \left\{ \begin{array}{lll} x + y & = & c \\ x ^2 + y^2 & = & r^2 \right. \end{array} \end{equation}

単に中央ぞろえで複数行の式を書きたい場合はgather環境が手軽。式番号は自動でつけてくれる(以下の例ではgather*として式番号を抑止している)。

     \begin{gather*} a x^2 + bx + c = 0 \\ a \left( x + \frac{b}{2a} \right) ^2 - \frac{b^2}{4a} + c = 0\\ x + \frac{b}{2a} = \pm \sqrt{\frac{1}{a} \frac{b^2 - 4ac}{4a}} \\ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \end{gather}

式中の任意の位置でそろえるにはalign環境と&記号を使う。たとえば全体をセンタリングしながらその中で式を左揃えにしたい場合、全ての式の先頭に&記号を置けばけばよい(もちろん、式ごとの揃える位置を変えることもできる)。

     \begin{align*} & x^2 + y^2 = r^2 \\ & x = r \cos \theta , y = r \sin \theta \\ & r^2 \cos ^2 \theta + r^2 \sin ^2 \theta = r^2 \end{align}

スペース

1文字、2文字分のスペース(quad, qquad)

\quad x \quad y
\qquad x \qquad y

任意長のスペース(hspace)

\hspace{12pt} x \hspace{12pt} y
\hspace{1pc} x \hspace{1pc} y
\hspace{12mm} x \hspace{12mm} y
\hspace{1.2cm} x \hspace{1.2cm} y

短いスペース

\! x \! y
\, x \, y
\: x \: y
\; x \; y

\!は負のスペースで、後ろの文字を前へ詰める。

A \! \! \! B(AとBの間に\!が4つ)

任意の文字分のスペース

\phantom{} 1+1\phantom{-}1

分数・括弧

    $$ \left| \frac{c+d}{a+b} \right| ^2 = \left( \frac{c+d}{a+d} \right) ^2 = \left\{ \frac{c+d}{a+d} \right\} ^2 $$

平方根・n乗根

    $$ \begin{align} &l = \sqrt{x^2 + y^2} \\ &\sqrt[n]{x} \end{align} $$

\sqrtのn乗根のnは”[n]”と大括弧で、数値xは”{x}”と中括弧で書いている点に注意。

指数表現・添字表現

    $$z_i^n = x_i^n + y_i^n$$

関数

三角関数

    $$ \begin{align} &\sin x , \cos x , \tan x \\ &\sec x , \csc x , \cot x \\ &\arcsin x , \arccos x , \arctan x \end{align} $$

対数

    $$\log_2 x ,\: \log x ,\: \ln x$$

総和・総積

    $$ \begin{align} &S = \sum_{n=1}^{10} n \\ &P = \prod_{m=1}^{10} m \end{align} $$

順列・組み合わせ

順列・組み合わせのように、記号の前にプレフィックスが付く場合は、ダミーに対してサフィックスを付ける。

     \begin{align*} {}_n P_k \quad {}_n C_k \end{align}

組み合わせを二項係数の形で書く場合は\binomを使う。使い方は\fracと同じで、分数などの中で小さくなるのを避ける場合には\dbinomを使う。

     \begin{align*} \binom nk \quad \binom {n-k}k \quad \frac{\binom{n-k}k}{\dbinom k{k-r}} \end{align}

ベクトル・行列

ベクトル

列ベクトルはarray環境でn行1列とする。{c}は各要素を中央ぞろえで、左揃えならl、右揃えならr。

    $$\vec{a} =  (a_1, \cdots , a_n)$$

    $${\bf a} = \left( \begin{array}{c} a_1\\ \vdots\\ a_n \end{array} \right)$$

行列

行列はarray環境で

    $$ {\bf A} = \left[ \begin{array}{cccc} a_{11} & a_{12} & \cdots & a_{1n}\\ a_{21} & a_{22} & \cdots & a_{2n}\\ \vdots & \vdots & \ddots & \vdots\\ a_{n1} & a_{n2} & \cdots & a_{nn} \end{array} \right]$$

ベクトル・行列の太字表記

QuickLatexでベクトル・行列を太字で表記する方法。

    $$ \boldsymbol{Ax} = \lambda \boldsymbol{x} $$

ノルム・垂直・平行

     \begin{gather*} \| \boldsymbol{a} \| \\ \boldsymbol{a} \perp \boldsymbol{b} \\ \boldsymbol{a} \parallel \boldsymbol{b} \end{gather}

行列の転置

二通りの転置行列の記述方法。

 

     \begin{gather*} {}^t \boldsymbol{A} \\ \boldsymbol{A} ^{\rm T} \end{gather}

微分・積分

    $$ \frac{dy}{dx} = f'(x) $$

 

    $$ \Delta f = \nabla^2 f = \frac{\partial^2 f}{\partial x^2} + \frac{\partial^2 f}{\partial y^2} $$

    $$ \int_a^b f(x) dx $$

上括弧・下括弧

    $$ \overbrace{1, 2, 3, 4,}^{\rm over} \underbrace{5, 6, 7, 8}_{\rm under} $$

筆算

簡単な筆算は、arrayブロックで\hlineを使う。

    $$ \begin{array}{rr} & 12345 \\ + & 678 \\ \hline & 13023 \end{array} $$

多項式の和になるとちょっとややこしい。

    $$ \begin{array}{rcccccc} A_n &= &a_1 &+ &\cdots &+ &a_n \\ B_n &= &b_1 &+ &\cdots &+ &b_n \\ \hline A_n + B_n &= &(a_1 + b_1) &+ &\cdots &+ &(a_n + b_n) \end{array} $$

 

WordPress – Faviconの追加

概要

WordPressで作っているサイトのアイコン(ブラウザのお気に入りなどで表示される小さいアイコン)が透過色の書類マークのままで殺風景なので、自分用のFaviconを作って適用してみた。

Faviconとは、Favorite Iconの略だそうである。

アイコン画像の準備

アイコン画像を作成し、透過色を指定してPNGやGIFで保存する。

今回は、PowerPointで作成した図柄をPNG形式で保存し、ペイントアプリケーションで切り取ってPNG形式で保存。

透過色の指定は、Exce使った方法で行った。

icoファイル化

FavIcon from Picsというサイトで、PNGファイルをicoファイル化。Webサイトにファイルをアップロードし、変換されたファイルをダウンロード。

WordPressへのFaviconの登録

Faviconファイルやその元となったファイルをWordPressのメディアに登録。

テーマのheader.phpを編集する方法とプラグインを利用する方法があるが、今回はFavicon Rotatorというプラグインを使った。

Favicon RotatorをインストールするとWordPressの”外観”メニューに”Favicon”メニューが追加されるので、それをクリック。

ファイルを新たにアップロードするとメディアに追加されるが、ここでは先にメディアに追加済のicoファイルを指定。

これでお気に入りに表示されるFaviconが変更される。