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

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

こんにちは、えばです^^

 

えば

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

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

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

 


 

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

 

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

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

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

 

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

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

 

 

えば

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

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

 

 

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

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

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

 

一番簡単な方法

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

 

 

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

 

 

えば

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

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

 

 

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

 

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

 

 

有効化したら

設定⇒Crayonをクリック

 

こんな画面が出ます。

 

 

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

 

ソースコードの入れ方

 

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

 

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

 

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

 

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

 

 

 

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

 

 

 

えば

無事にできましたか? 

 

 

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

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

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

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

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

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

最後までご覧いただきありがとうございます!

えば
 
LINE@にて最新の情報発信と、個別のご質問を受け付けております!

お友達登録特典
私が使っている『作業日報』を無料プレゼント中です!
”時間を制するものが人生を制す”
ぜひ受け取って、参考にしてみてください^^
⇩⇩⇩
友だち追加 


挑戦したい人のためのアフィリエイト構築術
あなたはこんな希望が
ありませんか?

■副業でお金を稼ぎたい!
■家計の収入を増やしたい!
■依存しない"自由な人生”を手に入れたい!
■情熱を燃やせることを始めたい!
■ネットで稼ぐスキルを身につけたい!
■ずっとあきらめていた人生を変えたい!

コメントを残す

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

ABOUTこの記事をかいた人

自分で稼ぐスキルを身につければ"自由でワクワクする人生”が待っています。そのために今新しい挑戦を始めましょう。 そんな人を全力で応援したい! 挑戦したい人のためのアフィリエイト構築術をまとめています^^/