WP QuickLaTex – 数式の記述

2016-07-31 / tau / コメントする

概要

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

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

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

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

WordPress の数式整形プラグイン

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

導入手順

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

[latexpage]

1

[latexpage]

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

インラインスタイル

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

[latex]...[/latex]

1	[latex]...[/latex]

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

ディスプレイスタイル

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

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

$$...$$

$$...$$

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

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

[latex]$$...$$[/latex]

1	[latex]$$...$$[/latex]

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

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

[latex]
\begin{equation}
y = a x^2 + b x + c
\end{equation}
[/latex]

[latex]

\begin{equation}

y = a x^2 + b x + c

\end{equation}

[/latex]

注意点

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

記述例

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

記号

文字

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

abcABC \alpha \beta \gamma \\
{\rm abcABC \alpha \beta \gamma} \\
{\bf abcABC \alpha \beta \gamma} \\
\mathbf{abcABC \alpha \beta \gamma} \\
{\boldmath ab$cABC \alpha$ \beta \gamma}

abcABC \alpha \beta \gamma \\

{\rm abcABC \alpha \beta \gamma} \\

{\bf abcABC \alpha \beta \gamma} \\

\mathbf{abcABC \alpha \beta \gamma} \\

{\boldmath ab$cABC \alpha$ \beta \gamma}

$\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でアルファベットの大文字・小文字、ギリシャ文字を斜体太字にできることがわかった。

\boldsymbol{abcABC \alpha \beta \gamma}

1	\boldsymbol{abcABC \alpha \beta \gamma}

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

等号・不等号

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

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

$\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

1	a + b \times c \div d

$a + b \times c \div d$

分数

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

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

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

$\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

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

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

ドット表記

z = x \cdot y

1	z = x \cdot y

$z = x \cdot y$

プラス／マイナス

a \pm b
a \mp b

1 2	a \pm b a \mp b

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

多項省略・ドット表記

S = 1 + 2 + \cdots + 100
S = 1 + 2 + \ldots + 100
\vdots
\ddots

S = 1 + 2 + \cdots + 100

S = 1 + 2 + \ldots + 100

\vdots

\ddots

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

矢印

\leftarrow \: \Leftarrow \: \longleftarrow \: \Longleftarrow
\rightarrow\ \: \Rightarrow \: \longrightarrow \: \Longrightarrow
\leftrightarrow \: \Leftrightarrow \: \longleftrightarrow \: \Longleftrightarrow
\uparrow \: \Uparrow \: \downarrow \: \Downarrow
\nearrow \; \searrow \; \swarrow \: \nwarrow

\leftarrow \: \Leftarrow \: \longleftarrow \: \Longleftarrow

\rightarrow\ \: \Rightarrow \: \longrightarrow \: \Longrightarrow

\leftrightarrow \: \Leftrightarrow \: \longleftrightarrow \: \Longleftrightarrow

\uparrow \: \Uparrow \: \downarrow \: \Downarrow

\nearrow \; \searrow \; \swarrow \: \nwarrow

$\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

1	\angle R = 90^\circ

$\angle R = 90^\circ$

式

基本形

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

[latex]
z = x + y
[/latex]

[latex]

z = x + y

[/latex]

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

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

[latex]
\begin{equation}
z = x + y
\end{equation}
[/latex]

[latex]

\begin{equation}

z = x + y

\end{equation}

[/latex]

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

複数行の数式

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

[latex]
\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}
[/latex]

[latex]

\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}

[/latex]

$\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.

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

[latex]

\begin{equation}

\left\{ \begin{array}{lll}

x + y & = & c \\

x ^2 + y^2 & = & r^2

\right.

\end{array}

\end{equation}

[/latex]

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

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

[latex]
\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}
[/latex]

[latex]

\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}

[/latex]

$\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環境と&記号を使う。たとえば全体をセンタリングしながらその中で式を左揃えにしたい場合、全ての式の先頭に&記号を置けばけばよい(もちろん、式ごとの揃える位置を変えることもできる)。

[latex]
\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}
[/latex]

[latex]

\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}

[/latex]

$\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

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

$\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乗根

l = \sqrt{x^2 + y^2} \\
\sqrt[n]{x}

1 2	l = \sqrt{x^2 + y^2} \\ \sqrt[n]{x}

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

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

指数表現・添字表現

z^n = x^n + y^n

1	z^n = x^n + y^n

関数

三角関数

\sin x , \cos x , \tan x
\sec x , \csc x , \cot x
\arcsin x , \arccos x , \arctan x

\sin x , \cos x , \tan x

\sec x , \csc x , \cot x

\arcsin x , \arccos x , \arctan x

$\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

1	\log_2 x , \log x , \ln x

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

総和・総積

S = \sum_{n=1}^{10} n
P = \prod_{m=1}^{10} m

1 2	S = \sum_{n=1}^{10} n P = \prod_{m=1}^{10} m

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

順列・組み合わせ

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

[latex]
{}_n P_k , \quad {}_n C_k
[/latex]

[latex]

{}_n P_k , \quad {}_n C_k

[/latex]

$\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)

1 2	\vec{a} = (a_1, \cdots , a_n) {\bf a} = \left( \begin{array}{c} a_1\\ \vdots\\ a_n \end{array} \right)

$\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]

{\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]

${\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}

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

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

ノルム・垂直・平行

[latex]
\| \boldsymbol{a} \| \\
\boldsymbol{a} \perp \boldsymbol{b} \\
\boldsymbol{a} \parallel \boldsymbol{b}
[/latex]

[latex]

\| \boldsymbol{a} \| \\

\boldsymbol{a} \perp \boldsymbol{b} \\

\boldsymbol{a} \parallel \boldsymbol{b}

[/latex]

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

行列の転置

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

{}^t \boldsymbol{A} \\
\boldsymbol{A} ^{\rm T}

1 2	{}^t \boldsymbol{A} \\ \boldsymbol{A} ^{\rm T}

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

微分・積分

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

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

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

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

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

$\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

1	\int_a^b f(x) dx

$\int_a^b f(x) dx$

上括弧・下括弧

\overbrace{1, 2, 3, 4,}^{\rm over} \underbr = ace{5, 6, 7, 8}_{\rm under}

1	\overbrace{1, 2, 3, 4,}^{\rm over} \underbr = ace{5, 6, 7, 8}_{\rm under}

$\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}{rr}

& 12345 \\

+ & 678 \\

\hline

& 13023

\end{array}

$\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}

\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}

$\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の追加

2016-07-19 / tau / コメントする

概要

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が変更される。

WordPressでCanvas要素が消える

2016-07-19 / tau / 4件のコメント

消えるcanvas

WordPressのテキストモードでcanvas要素を書いて、ビジュアルモードに切り替えてもう一度テキストモードに戻ったとき、canvas要素が消えてしまうことがあった。

いろいろと試しているうちに、以下のような挙動があることがわかってきた。

<canvas>タグと</canvas>タグを直接一行でつないだ時に消えるらしい
canvas要素の前後が空行かどうかでも結果が変わるらしい

そこで、タグの書き方と前後の空行の入れ方の組み合わせで、canvasが消えるかどうかをチェックした。

canvasが消える条件

<canvas></canvas>のように開始タグと改行タグが連続して書かれていて、なおかつ以下のケースの時にcanvas要素が消える。

ケース1：ファイルの中に単独で書いた場合

開始タグと終了タグが<canvas></canvas>のように連続しており、それのみがファイルの中に書かれている場合、ビジュアルエディタを経由すると要素が消える。行末の改行があってもなくても結果は同じ。

<!-- 改行なし -->
[ファイル開始]<canvas></canvas>[ファイル終了] 

<!-- 改行あり -->
[ファイル開始]<canvas></canvas>[改行]
[ファイル終了]

[ファイル開始]<canvas></canvas>[ファイル終了]

[ファイル開始]<canvas></canvas>[改行]

[ファイル終了]

ケース2：前後に空行がある場合

開始タグと終了タグが<canvas></canvas>のように連続しており、その行の前後に空行がある場合、ビジュアルエディタを経由すると要素が消え、&nbspに書き換えられる。

<!-- 前後に空行がある場合 -->
・・・前行

<canvas></canvas>

・・・後行

<!-- 以下のように書き換わる -->
・・・前行

&nbsp

・・・後行

・・・前行

・・・後行

・・・前行

&nbsp

・・・後行

実質的にファイルの中にcanvas要素のみがあることは稀なので、問題となるのは上記の”<canvas></canvas>の前後に空行がある場合”となる。

canvasが消えない条件

canvasが消えない条件は、上の「canvasが消える条件」の裏返しも含めて以下のようになる。

ケース1：開始タグと終了タグの間に文字があること

開始タグと終了タグの間に文字があれば、周辺条件がどうであってもcanvas要素は消えない。

canvas要素非対応のブラウザ対応のために、この方針をとることには意義がある。

ただし、間にある文字がスペースだけの場合は意味がなく、開始タグと終了タグが連続している場合と同様の結果になる。

<!-- 以下のようにすると、前後に空行があっても消えない -->

<canvas>a</canvas>

ケース2：開始タグと終了タグの間で改行されていること

開始タグと終了タグの間で改行されていれば、周辺状況がどうであってもcanvas要素は消えない。

canvas要素内に文を書かない場合は、簡易な一つの解決策。

ただし、開始タグと終了タグの間に空行が入っている場合は結果は複雑で、要素全体が消えたり、いずれかのタグだけが消えたりと結果は複雑になる。

<!-- 以下のようにしても、canvas要素は消えない -->

<canvas>
</canvas>

</canvas>

ケース3：前後に空行がないこと

前後に行があれば(どちらも空行でなければ)開始タグと終了タグが連続していてもcanvas要素は消えない。

ただし、確実にこの記述方法に拠ることを担保しがたい。

<!-- 前後が空行でなければcanvas要素は消えない -->
preceding line
<canvas></canvas>
succeeding line

preceding line

succeeding line

結論

以下の2つのうちいずれかを推奨。

開始タグと終了タグの間にcanvas非対応用の文を書く
開始タグ<canvas>の後で改行し、すぐ次の行に終了タグ</canvas>を書く

WordPressでjQueryを使う場合

2016-07-02 / tau / コメントする

WordPressにはもともとjQueryがビルトインされて読み込まれるので、headセクションで読み込むとかjQueryサイトから引っ張ってこなくても、すぐに使えるらしい。

ただ、”$”が他のエイリアスになっているらしく、常套句である以下の表現は使えない。

$ ->
  jQuery構文

1 2	$ -> jQuery構文

これに対しては、最初のclosureの部分だけを書き換えれば、その中では”jQuery”→”$”と通常の構文が使えるとのこと。

jQuery ($) ->
  $("bra bra...

1 2	jQuery ($) -> $("bra bra...

この際、headerセクションでjquery関係のファイルを読み込む必要はない。

WordPressでonclickが消えてしまう

2016-07-02 / tau

たとえば以下のようにボタンを配置するために、エディタの”テキスト”モードで直接次のように打ち込む。

<input type="button" id="btn" value="Button" onclick="btnClick()" />

1	<input type="button" id="btn" value="Button" onclick="btnClick()" />

ここで一度ビジュアルモードに移ってから再度テキストモードに戻ると、onclickがきれいに消えている。

<input type="button" id="btn" value="Button" />

1	<input type="button" id="btn" value="Button" />

これを回避するのにテーマフォルダ下のphpを修正する方法があるらしいが、テーマを変更したらどうなるのかなど素人には不安なので、手っ取り早い回避策を2つ。

全体のページ構成を打ち込んでいった後、onclickなどの実装時以降、テキストモードからビジュアルモードに移らない
HTMLでonblickなどを使わず、jQueryのイベントハンドラを使う

なお、上のinputタグを”<…>”で書いても、ビジュアルモードを経由すると、”<… />”とW3Cに準拠した書き方になおされている。

WordPressで固定ページの階層化が崩れた

2016-06-22 / tau / コメントする

固定ページの新規追加をしていたとき、ページの階層構造表示がおかしくなった。

使っているテーマでは、ページの階層構造に応じて下位ページが折り畳まれたり表示されたりするが、下位ページがすべてフロントページと並んで表示されてしまうという状況。

wp-hierarchy-collapse-1 — こういう階層表示になっていたのが・・・

少したって気づいたのは、上位ページは指定していたが、その下で指定する「順序」が”0″のままだということ。

複数の階層化されたページがあるとき、フロントページ以外の下位ページの順番が一つでも”0″だと、すべての下位ページがフロントページと同一レベルに扱われてしまうらしい。