あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

記事内にソースコードを表示させるプラグイン Crayon Syntax Highlighter

      2015/08/08

Crayon Syntax Highlighter-

 

サイトで記事を書いていると、CSS ,HTML, などのコードを書いて伝えたい時があったりする…

んが、直接投稿画面でビジュアルとして書いても、テキストとして認識されてしまったりする
(CSS ,HTML, などのコードとしてそのまま認識されてしまう)

また、テキストで書いたものをスクリーンショットで撮って、それを投稿ページにアップして伝える事もありだけれど、
(私はそうしていた笑)

それだとコードをコピー出来なくて、訪問者は直接それを見て自分で書かなくてはならず、

間違えやすくなって親切なサイトとは言えなくなってしまう

出来ればユーザーが調べた、使いたいソースをコピー出来る状態にして表示するようにしたいなと……..

 

ワードプレスプラグインでそれが簡単に出来るものがあるので、

それを紹介したいと思う

 

 

 

☆ワードプレスプラグイン “Crayon Syntax Highlighter”

 

記事内にソースコードを表示させるプラグインは他にも有ると思うけれど、

たまたま見つけたプラグインの “Crayon Syntax Highlighter” が、

最新のワードプレスにも互換性があり、しかも使いやすいので私はもうこれに決めた

 

まずダッシュボードからプラグイン>プラグイン新規追加から

Crayon Syntax Highlighter を検索し、インストール、有効化する

 

すると、それだけで投稿画面のエディターから入力、設定することが出来るようになる

             ☟

①エディターでワンタッチ入力

 

 

 

 

上記のタブをクリックすると下図の画面が表示され、コードを入力、そして表示設定など可能

②コード入力

 

 

セクションごとに、細かくカスタマイズ設定も出来る

③表示カスタマイズ設定

 

④表示カスタマイズ設定

 

 

 

 

デフォルトだとこんな感じ

           

/*
Theme Name:twentyeleven_child
Template:twentyeleven
*/

@import url('../twentyeleven/style.css');

 

 

例えば 行NOや、行の帯色をなくしたりも出来る

         

/*
Theme Name:twentyeleven_child
Template:twentyeleven
*/

@import url('../twentyeleven/style.css');

 

 

 私はとにかくわかればいいので笑

こんな感じで十分かなと……. 

 

以上 あふぃり〜ち備忘録でした

ではよい ソースコードライフをば!笑

 

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 - Wordpress プラグインについて, css・html について ,

スポンサーリンク



スポンサーリンク



Message

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

one × five =

  関連記事

リンク切れ対策〜Broken Link Checker使い方〜

    サイト運営では サイトの最適化も大切だったりする 一 …

hタグ(見出しタグ)ルール

    ブログやサイトで記事を書く際に、“タイト …

リンク付き画像を簡単設置〜Image Widget〜

    サイドバーなどにリンク付きの画像を設置したい時ってあ …

特定箇所へジャンプさせる方法(ページ内に目次を作る)

  サイトの記事を書く際で、細部までなるべく丁寧に説明しようと書いてい …

All In One WordPress Security and Firewall Plugin の設定

      〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 ☆A …

TablePress レスポンシブ対応 (TablePress Extension: Responsive Tables)

  ※スマホで閲覧して頂いている方は表がはみ出てページ表示がやたらちっ …

ページトップへワンタッチスクロール〜Word Pressプラグイン〜

  サイトの内容が濃かったりするとページが長くなり そうするとページの …

ワードプレスのプラグインが削除出来ない場合の対処法

WPプラグインってダッシュボードからでは削除できない場合があるけどその場合の削除の仕方をば……

Link Manager でリンクを管理する

  相互リンクなどをしたいとき、リンクページなどを作ってリンクするのも …

AdSense レスポンシブ広告余白背景カラーの変更

  Adsense広告はレスポンシブを設定してますが ワードプレスのテ …