WordPressテーマ「STORK(ストーク)」で、ソースコードをpre要素やcode要素を使って、うまく表示されない問題を解決する方法!

こんにちは。 今日も自分の時間を確保してますねっ!

少しずつ「お金を生むスキル」を習得し、あなたの思い描く未来へ一歩近づきましょう。

STORK(ストーク)」の機能を紹介しているときに、ソースコードを表示させたいんですが、<pre>や<code>のHTMLタグを使っても、なかなかうまく表示されませんでした。

今回の問題&解決方法

問題:「STORK(ストーク)」にて、ブログ記事にソースコードを表示させたいけど、うまく表示されない。

解決方法:プラグインCrayon Synax Highlighterを導入する

ソースコードが表示されない

STORKの機能(ショートコード)を紹介する記事を書いていたときの話です。

神業!WordPressテーマ「STORK」のショートコードの簡単登録方法!これだけで初心者でもプロ級のブログが書ける!

2018年4月25日

説明のためにソースコードを表示させようと思ったら、まったく思うように表示してくれませんでした。

例えば、下の画像のように表示したかったんです。

でも実際は、こんなんだったり、

この時のソースコードは、以下。

 

他にも、こんな風に表示されたりしました。

このソースコードは、以下の通り。

HTMLなどに詳しくないと、このような時にどうすればいいか分からなくなってしまいます。

そんな時は、Googleで調べたり、詳しい人に相談したりするしかありませんね。

原因&解決方法

調べていると、pre要素とcode要素でソースコードを表示できるのは間違ってないみたい。

ただし、気になるのがプラグインを紹介していたり、紹介していなかったりする。

プラグインを使わずにできないのかやってみましたが、うまくいきませんでした。

そのためプラグインを導入してみると、すごく簡単にソースコードを表示できました。

解決方法:プラグインCrayon Synax Highlighterを導入する

プラグインの導入方法を紹介します。

ダッシュボードのメニューより、「プラグイン」→「新規追加」を選び、Crayon Synax Highlighterを検索します。

キーワードは、Crayoだけ記入すれば検索できます。

見つけたら「今すぐインストール」をクリックしましょう。

その後、忘れずに「有効化」をクリックしましょう。

きちんと有効化ができたら、下の画像のように「設定」のタブにCrayonが追加されます。

ここから設定を変更することができます。

但し、特に気にならなければ、設定はそのままでも大丈夫です。

もしソースコードの表示のフォントなど変更したい場合は、ここから設定を変更できます。

使い方はいたって簡単です。

「投稿」→「新規追加」の記事作成ページで、ビジュアル表示モードとテキスト表示モードの2通りがあります。

記事内にソースコードを挿入する

Crayon Syntax Highlighterは、記事作成時にそのまま編集画面から使うことができます。

ビジュアルとテキストの表示の仕方でアイコンが違いますので注意してください。

テキスト表示の場合

ビジュアル表示の場合

よく使うのは、テキスト表示での挿入方法ですので、その方法を紹介したいと思います。

テキスト表示で、crayonを選択します。

すると、Crayon Syntax Highlighterのメニュー画面が表示されます。

タイトル(Title):コードの内容について任意でタイトルを付けることができます。
プログラム言語(Language):表示させるコードの種類を選択します。DefaultのままでもOKです。
コード(Code):表示したいソースコードを入力します。
テーマ(Theme):記事内に挿入された際の表示デザインを複数の中から選ぶことができます。

画面を下にスクロールすると、他にもフォントの種類やサイズ、ツールバーの表示形式などを詳細設定することが可能です。

必要があれば変更しましょう。

全てが終わったら、右上の挿入(Add)をクリックすればOKです。

ちなみに、僕の画面表示は英語ですが、日本語表示にもできるので必要がある方は、日本語にしてしまった方が楽ですね。

まとめ

WordPressの使い方の説明などする場合、ソースコードを表示させたい時が多いと思います。

そんな時は、プラグインCrayon Synax Highlighterが非常に便利ですので、ぜひ使ってみてくださいね!

では、お疲れ様でした。


ただ今、激推しの再現性抜群の新せどり手法!!




自由な人生へグッ!と近づくこと間違いなし!





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください