SNSアカウント

エネ管.com

過去問で実際に出題された暗記問題を定期的につぶやきます。
すき間時間での復習に役立ちます。

ブログの更新情報や最新ニュースをお届けします。

Youtubeチャンネルを開設しました。
登録よろしくお願いします!

ブログ運営

【ブログ】WordPressで数式をきれいに表示する方法

更新日:

技術的な内容の記事を書こうと思うと、数式を載せたくなるときってありますよね。ただ、テキストの数式だけだと分かりにくいので、論文などでよく見るきれいな数式を表示させたい。

今回はそんな方に向けてWordpressで数式をきれいに表示する方法について記載したいと思います。

Sponsored Link

1. プラグインの有効化

WordPress編集画面の「プラグイン」⇒「新規追加」⇒「プラグインの検索」でMathJax-LaTeXと検索します。すると下の画像のプラグインが表示されるのでこちらを有効化します。

LaTexは論文や学術レポートを書く際に重宝されるソフトウェアで数式などを美しく表示させるために利用されます。LaTexについて詳しく知りたい方は、こちらのPDFに記載してありますのでご覧ください。

2. MathJax-LaTeXの使い方

まず、記事を書く投稿画面で最初に[]で囲みmathjaxと記載します。

次に数式を打ち込んでいきます。数式に必要な記号形式はこちらのサイトにまとめてあります。

 

私の場合、良く使うものとして足し算と分数がありますがそれぞれ次のように記載します。

足し算: $$a+b=c$$

分数: $$\frac{a}{b}+\frac{c}{d}=c$$

先ほどの[]に囲まれたmathjaxを記事内に記載すると次のような出力になります。

これできれいに数式を記載することができました。その他のコマンドはコマンド一覧のサイトを参考にしてください。

Sponsored Link

3. 数式をはみ出さないようにする方法

これでブログ上で数式を綺麗に表示することができました。ただ、このままでは長い数式を記載した時に横にはみ出てしまい見栄えが悪くなります。特にスマホで見たときには、画面全体のレイアウトが崩れてしまいます。

そこで、数式が長くなった時に数式のみを横スクロールさせることできれいに表示する方法を記載します。まず、追加CSSに次の文を記載します。

div.horizontal-scroll{
overflow-x: auto;}

その後、記事を書く際に数式を次のHTMLタグで囲みます。

<div class="horizontal-scroll"></div>

これで長い数式もきれいに表示することができるようになります。実際に記載するときは次のようになります。

<div class="video-container">$$a+b+c+d=f$$</div>

HTMLタグなので「ビジュアル」ではなく「テキスト」で記載することを間違えないようにしてください。

4. まとめ

  • 数式を表示するにはプラグイン「MathJax-LaTeX」を使う
  • 記事内にタグをいれてコマンドを入力する
  • 数式がはみ出さないようにCSSを追加する

以上でWordpressの記事内にきれいな数式を表示できるようになったかと思います。

技術的な情報をを書く際には必ず必要になってくる機能かと思いますのでしっかり押さえておきましょう。



現場技術の資格を取るなら!おすすめ通信講座

最短で資格を取得するためには、いかに効率よく学習するかが重要です。現場技術系の資格取得をサポートするおすすめの通信講座を紹介します。

SAT『エネルギー管理士講座 熱分野』

現場技術系専門の通信講座です。イラストを多用したシンプルで分かりやすいテキストと動画がセットになっています。

価格もお手頃で、特に熱力学などを学んだことのない初学者におすすめの通信講座です。

エネルギー管理士以外にも電験や衛生管理者など25の資格の通信講座を展開しています。

現場系通信講座の老舗「JTEX」

40年の実績がある現場系通信講座の老舗です。動画はなく、レポート提出形式の通信講座になります。価格もお手頃でテキストが分かりやすいと評判です。

  • この記事を書いた人
  • 最新記事

おすすめ記事!

1

あなたエネルギー管理士の資格を最短で取得したい。でも、熱力学や流体工学を学んだことがないので、独学だ ...

2

これからエネルギー管理士試験を受けるあなたのために、最短時間でエネルギー管理士に合格する方法を紹介し ...

3

エネルギー管理士の資格を取ろうとしていたり、すでに資格を持っている方にとって、エネルギー管理士の資格 ...

-ブログ運営

Copyright© エネ管.com , 2019 All Rights Reserved.