Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで数式を書く方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで数式を書きたい?

WordPressの初期設定ではエディターが数式を完全にサポートしていないため、WordPressで数式を書くのは少し難しい。

この投稿では、WordPressで数式を簡単に書く方法を3つご紹介します。

Writing math equations in WordPress

WordPressで数式を書くのはなぜ難しいのか?

WordPressは、サイトのコンテンツを生成し、HTML出力をユーザーのブラウザーに送り返して表示することで、動的に動作します。

WordPressで数式や科学方程式を書くのは、HTMLの文字がサポートされていないために難しい。

現在、MathMLとLaTeXは、ウェブ上で数学的・科学的方程式を記述するための標準と考えられている。

残念ながら、どちらも初心者にとっては理想的とは言えない。どちらも構文を覚える必要があり、長く複雑な方程式の場合は複雑になる可能性がある。

ということで、WordPressブログに数式を書く方法を見てみよう。

WordPressでMathMLやLaTeXを使う方法の前に、簡単な解決方法から紹介します。以下のクイックリンクから使いたい方法にジャンプできます:

方法1:WordPressでUnicode文字を使って数式を書く

この方法はよりシンプルで、数式を頻繁に書く必要のないユーザーにおすすめです。この方法では、ユニコード文字を使用し、投稿エディターで直接挿入します。

Unicodeは、すべての言語の文字エンコーディングをサポートするエンコーディング標準です。すべてのサイトビルダー、オペレーティングシステム、モバイル端末でサポートされています。

WordPressでUnicodeを使って数学文字を追加する方法を紹介します。

1.MacでUnicode数学文字を追加する

Macコンピューターでは、上部のツールバーから数学演算子や文字を追加できます。Edit ” Emoji & Symbolsをクリックするか、キーボードのCommand + Control + Spaceキーを押すだけです。

Character Viewer

すると、ポップアップで「Character Viewer」アプリが表示されます。ここから、挿入したい記号や文字を選択することができます。

文字をダブルクリックするだけで、WordPress投稿エディターに挿入できます。

投稿エディターでは、段落ツールバーの下付き文字と上付き文字のオプションを使用して文字をフォーマットすることもできます。

Using subscript and superscript in WordPress paragraph block

2.WindowsでUnicode数学文字を追加する

Windowsユーザーは、同様のアプリを使ってWordPress投稿エディターに数学演算子や特殊文字を挿入することができる。

スタート ” Windowsアクセサリ ” 文字マップ をクリックして文字マップアプリを開きます。画面上によく使われる文字が表示されます。

Character Map app in Windows 10

文字マップアプリはUnicodeを含む様々なエンコーディングをサポートしています。グループ]の下にある[Unicodeサブレンジ]を選択すると、数学演算子を見つけることができます。

文字を見つけたら、クリックして選択し、コピーする。WordPressのコンテンツエディターに戻り、その文字を貼り付けます。

特殊文字や数学演算子を手動で追加するのは面倒だが、たまにしか追加しないのであれば有効だ。

しかし、定期的にサイトに数式を書く必要があるのであれば、以下に説明する2つの方法のどちらかを学んだ方がよいだろう。

方法2:LaTeXを使ってWordPressで数式を書く

LaTeXは、技術文書や科学文書を書くために設計された組版標準です。

学術界で広く使用されており、方程式やその他の科学ドキュメンテーションを記述する際の事実上の標準とみなされている。

LaTeXの公式サイトには、詳しいドキュメンテーションや、チュートリアルやガイドへのリンクがあり、使い方を学ぶのに役立ちます。

WordPressサイトにLaTeX組版を導入する方法に焦点を当てます。

まず、MathJax-LaTeXプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、数式を挿入したい投稿またはページを編集する必要があります。投稿編集画面で、新規ブロック追加ボタン(+)をクリックし、ショートコードブロックをコンテンツに挿入します。

Shortcode block

ショートコード・ブロックの中に、以下のフォーマットでショートコードを追加する必要があります:

[latex]あなたのLaTeXコードをここに[/latex]。

Add your shortcoe with the latex code

投稿を保存してプレビューすると、投稿フォーマット付きの数式を見ることができます。

WordPressのデモサイトではこのように表示されました。

A math equation displayed in WordPress using LaTeX

必要なコードをより簡単にジェネレータする方法は、オペレーティングシステム用のオフラインLaTeXアプリを使うことです。

また、OverleafのようなウェブベースのLaTeX環境を使うこともできます。

Overleaf

WordPressのショートコード・ブロックにコピー&ペーストしてください。

方法3:MathMLを使ってWordPressに数式を書く

MathMLは、ウェブ上で数式を簡単に公開するために設計されたマークアップ言語です。HTMLに似たセマンティックXMLマークアップを使用します。

WordPressは最初からMathMLをサポートしているわけではなく、投稿エディターでMathMLコードを追加した場合、正しくレンダリングされません。

幸運なことに、その問題を解決するプラグインがある。

MathML Blockプラグインをインストールして有効化するだけです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、数式を追加したい投稿またはページを編集するだけです。投稿編集画面で、新規ブロック追加ボタン(+)をクリックし、カスタマイザーをコンテンツに追加します。

Adding custom HTML block in WordPress

カスタムHTMLブロックの中にMathMLコードを貼り付けることができます。

こんな感じだ。

Adding MathML code in WordPress

その後、投稿やページを保存することができます。

新しいタブで表示すると、MathMLがあなたのサイトで美しく変換されるのがわかります。

MathML preview

MathML BlockはMathJax JavaScriptエンジンを使って、マークアップを読みやすい数式に変換します。LaTeXコマンドもサポートしています。

LaTeXコードを追加するには、コンテンツエディターにMathMLブロックを追加するだけです。

Adding MathML block

MathMLブロックのテキストエリアに、LaTeXコードを次のように貼り付けます:

\方程式はこうなる

投稿を保存してプレビューすると、ブログ記事やページに表示されます。

LaTeX in MathML Block

WordPressで数式を追加する方法について、この投稿がお役に立てば幸いです。WordPressの電卓プラグインやブログ投稿の書き方についてもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

7件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Agu Sunday says

    It was really helpful. it has solved the problem of many months of watching a lot of video without success. Thanks you so much

  3. Ira Grossman says

    I read on a Mircrossoft page that the shortest way to get to character map is to type “map” in the search bar and then select it from the list. Works for me, but with all things Windows you should check it out.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。