文中埋め込みLaTeX画像の配置方法
このエントリーではLaTeXで作成した数式画像をWordPressの文章中に組み入れた際の画像の配置変更について解説していきます。
LaTeX2htmlでの出力画像
通常のDVIファイル出力においては文中における
の数式は以下のようにきれいに収まっている。
しかしLaTeX2htmlなどでWeb用画像を出力していざhtmlファイル中の文章埋め込みで表示させると、全部ではないが以下のように
以外の記号は大体の場合文章上側のほうに来るようになっている。
上記キャプチャ画像を見てもわかるようにその上側に来る位置も数式記号によって様々で、非常に見ずらいものになってしまう。
そこでこのエントリーではWordPressにおいてこれらの事象に対してどのように対処するかをやっていく。
wordPressのダッシュボードに入って、左のキャプチャ画像のように、【外観】 → 【カスタマイズ】で進む。
追加CSSを押下する。
入力し終わったら公開ボタンを押下して保存する。
入力内容ここから
/*インライン画像下方向調整CSSコード始め*/
img.wp-underimg-smp1 {
vertical-align: -1px;
}
img.wp-underimg-smp2 {
vertical-align: -2px;
}
img.wp-underimg-smp3 {
vertical-align: -3px;
}
img.wp-underimg-smp4 {
vertical-align: -4px;
}
img.wp-underimg-smp5 {
vertical-align: -5px;
}
img.wp-underimg-smp6 {
vertical-align: -6px;
}
img.wp-underimg-smp7 {
vertical-align: -7px;
}
img.wp-underimg-smp8 {
vertical-align: -8px;
}
img.wp-underimg-smp9 {
vertical-align: -9px;
}
img.wp-underimg-smp10 {
vertical-align: -10px;
}
img.wp-underimg-smp11 {
vertical-align: -11px;
}
img.wp-underimg-smp12 {
vertical-align: -12px;
}
img.wp-underimg-smp13 {
vertical-align: -13px;
}
img.wp-underimg-smp14 {
vertical-align: -14px;
}
img.wp-underimg-smp15 {
vertical-align: -15px;
}
img.wp-underimg-smp20 {
vertical-align: -20px;
}
img.wp-underimg-smp25 {
vertical-align: -25px;
}
img.wp-underimg-smp30 {
vertical-align: -30px;
}
/*インライン画像下方向調整CSSコード終わりﾆﾀﾞ*/
1から15pxまでは1単位で変更できるようにしてある。それ以降は5単位で変更できるようにしている。
細かすぎるんじゃないかと思われるだろうがLaTeX出力による数式記号は様々で多岐にわたっており、しかもWordPressの性質上これぐらいのほうが後々やりやすいと思う。
また、このCSSコードを作成する際のポイントとしては、下げさせる数値（%）と、そのHTML上でのコーディングする際の数値を同じようにすること。
そうすると例えばこの画像は5pxほど下げさせたいな、と思った場合は、上記の表記にあるように同じwp-underimg-smp5のような名前のものを記述すればいいということがわかる。
んでもって実際に埋め込みコードのやり方にうつる。
以下のようにダッシュボードに戻って編集したい投稿（ここでは運動方程式の一般化）に移り、そこで編集したい行の文章をアクティブな状態にして以下のキャプチャ画像のようにオプションと表示されている3点リーダをクリックする。
そうすると“HTMLとして編集”というのが出てくるのでこれをクリック。
次のようなHTMLの編集エディタが開くのでキャプチャ画像のアンダーラインにあるように先ほどCSSエディタに追記したものの名前部分を入力する。
それぞれの記号に対し以下のように設定。
 |
wp-underimg-smp3 |
|---|---|
 |
wp-underimg-smp6 |
 |
wp-underimg-smp3 |
 |
wp-underimg-smp5 |
上記のように記号によってほぼバラバラに設定してあるが、ひとまず更新を押下する。
ここでビジュアル編集上では以下のように変化はない。
編集ページから移動して該当のページそのものを表示させれば以下のようにきれいに平行ライン上に並んでいるようになる。
それぞれに設定した数値はほぼバラバラだがきれいに並んで表示させることができた。
別の方法
WordPressというのは基本的に玉蟲色の設定手順がよくあり、上記の方法でない以下のような固定ページからの設定方法もある。
参考例としてここではヘヴィサイド演算子法のコンテンツを取り上げてみる。
上記のように通常のインライン画像だと
、
のようになってしまっているのを、のようにする固定ページからのやり方は以下のようになる。
まず固定ページを開くと画面の下側に以下のようなメニューリンクが出てくる。
これの【カスタムCSS】というのをクリックする。
入力画面が出てくるので以下のようなコードを入力していく。
/*インライン画像ここから*/
img.wp-image-smp5 {
vertical-align:-5%;
}
img.wp-image-smp10 {
vertical-align:-10%;
}
img.wp-image-smp15 {
vertical-align:-15%;
}
img.wp-image-smp20 {
vertical-align:-20%;
}
img.wp-image-smp25 {
vertical-align:-25%;
}
img.wp-image-smp30 {
vertical-align:-30%;
}
/*インライン画像 終・わ・り・ﾆ・ﾀﾞ<｀ё´>*/
記述ルールに関しては説明しなくてもわかると思うので省略するが、ここでは先ほどのコードとは区別するため違うコードにしている。
編集対象のところで先ほどと同じようにオプションとなっている3点リーダをクリックして編集画面に遷移させる。
“HTMLとして編集”を押下する。
先ほどの記述したコードに関してはWordPressのデフォルトで表示される画像の記述に合わせて作成している。
なので以下の場合だと（＜とclass=の次にあるコロンはhtmlの記述的な関係上ここでは全角にしている→）＜img class=”wp-image-123”～のような数字になっている箇所を例えば以下の場合ではsmp20と入力して保存する。
上記のように変更して入力し終わったら更新ボタンを押下して保存する。
ビジュアル編集に戻るとこの時点ではレイアウト崩れは変化がなくなおっていない。
ダッシュボードに戻って“サイトを表示”させてページを通常の形で閲覧すると次のようにきれいに文中の中に組み込まれるようになっている。
WordPress-インライン画像の配置関連ページ
- Wordpressカテゴリ作成と投稿の配置方法
- Webサイト運用におけるサーバ構築やHTML,CSSなどの気づいた点などの管理人用の備忘録的な内容になっています。このエントリーではデフォルトで表示されるcategoryの削除の方法と新規で作成したカテゴリの配置と投稿記事の該当カテゴリへの子分類としての配置方法などについて解説していきます。
- VPSサーバ構築４
- Webサイト構築におけるサーバ構築やHTML,CSSなどの気づいた点や管理人用の備忘録的な内容になっていますので、その辺のところ何卒よろしくお願いしまｽﾐﾀﾞ。
- VPSサーバ構築３
- Webサイト構築におけるサーバ構築やHTML,CSSなどの気づいた点や管理人用の備忘録的な内容になっていますので、その辺のところ何卒よろしくお願いしまｽﾐﾀﾞ。
- VPSサーバ構築２
- Webサイト構築におけるサーバ構築やHTML,CSSなどの気づいた点などの管理人用の備忘録的な内容になっています。その辺のところ何卒よろしくお願いしまｽﾐﾀﾞ。
- VPSサーバ構築１
- Webサイト構築におけるサーバ構築やHTML,CSSなどの気づいた点などの管理人用の備忘録的な内容になっていますので、その辺のところ何卒よろしくおながいしまｽﾐﾀﾞ<｀ω´>。
