STORKにソースコードを表示させる方法

STORKにソースコードを表示させる方法

こんにちは、えば（‎@eba0819）です^^

今日は、WordPressのテンプレート『STORK（ストーク）』に

CSSコードやHTMLコードをそのまま表示させる方法

についてまとめています。

CSSコードやHTMLコードとは？

ソースコードとはプログラムの設計図と呼んだりします。

コンピュータのプログラムのもとになる文字列のことで、それぞれの行がコンピュータに対する 命令 になっています。

  なにか得体のしれない不気味な文字の羅列に見えますよねｗ 

GoogleのChromeでソースコードを見るには、画面で右クリックして「検証」を選択するとWebサイトのソースコードを見ることができます。

ショートキーは「Ctrl + Shift + C」です。

そしてこれは、そのままWordPressに入力すると、当然コンピューターに命令が送られるので変換されて表示されます。

それを変換させずにそのまま表示する方法をご紹介します。

例えばカスタマイズなどで、“コードを教える”ときなどに、コードを表示させる必要がありますからね。

私も、昨日のこの記事でコードを表示させました。

⇒チェックリストのコード入れ方！STORK×ワードプレス

一番簡単な方法

この下のコードを表示させたいソースコードの前後に入力します。

STORKの場合はプラグインを使う！

通常は上のコードで表示させたいコードを挟めばいいのですが・・・

STORKはなぜかうまくいかないんです・・・

解決策は！
プラグインです。

Crayon Syntax Highlighter
というプラグインを新規追加します。

有効化したら

設定⇒Crayonをクリック

こんな画面が出ます。

この矢印の部分では、いろんな色・デザインに変更することができますよ。

ソースコードの入れ方

①WPの記事投稿エディタ画面で「テキスト」を開きます。

②表示させたいCSSコードやHTMLコードを入力します。

③それをカーソルで囲います。

④『Crayon』というボタンが出ているので、それをクリックします。

⑤この欄に表示させたいソースコードが入っていたら、次は上の矢印の部分『Add』をクリック
そして、このようにWPでちゃんと表示ができるようになります。

無事にできましたか？ 

えばのつぶやき【2月6日】

今日は初めてインフォトップの担当さん（加藤さん）と電話で打ち合わせをしました。

インフォトップさんによると、これまでなかったアフィリエイターとコミュニケーションを図って相互利益を図っていくような新しい部署が立ち上がったそうでした。

「何か相談や質問などありますか？」
と言われたので
「リファラが見れないので見れるようになったら嬉しいんですが」
と言うと

インフォトップはASP自体が決済もやっているので、システムの問題で難しいそうでした。

とても丁寧に対応していただき、これから何かあれば相談させていただこうと思いました。