あふぃり〜ちどっとこむ

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

記事内にソースコードを表示させるプラグイン 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

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

eighteen + 10 =

  関連記事

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

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

関連記事を自動表示させる〜Yet Another Related Posts Plugin〜

    ブログは投稿すればするほど古い記事が埋もれてしまいが …

Link Manager でリンクを管理する

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

All In One WordPress Security and Firewall Plugin の設定

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

Word Pressユーザー名を変更&投稿者アーカイブURLからユーザ名を表示させない

  ワードプレス運営セキュリティ注意点は結構ある 大まかには &#82 …

タグを記憶させておけるWPプラグン AddQuicktag

  記事を書く時毎回使うタグってありますよね それを毎回書いてると面倒 …

関連記事を表示させるWPプラグインYuzo–Related Posts

  ブログサイトにおいて、当然ですが ユーザーにより多くの記事を読んで …

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

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

Word Pressサイトに目次をつくる ~PS Auto Sitemap~

    サイトにページが多くなってくると、過去記事を探すのが …

アドセンスの広告をwordpressで一括管理できて更新されてるプラグイン

“Quick Adsense” 並みにアドセンス管理が便利な更新されてるプラグイン、WP QUADS – Quick AdSense Reloaded