最短で確実に稼げるブログ作成を目指しています

記事にソースコードを表示!WordPressプラグイン【Crayon Syntax Highlighter】

WRITER
 




この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

こんにちは、ふわりゆらりのakiです。

aki

ブログの投稿記事にソースコードを表示させたい時、他のブログでよく見るエディタのような表示ができたらいいなぁって思いませんか?

ということで、いろんな方法があるんですが、今回は簡単できれいに表示ができる「Crayon Syntax Highlighter」というプラグインを紹介します。

 

Crayon Syntax Highlighterについて

 

デザインをカスタマイズする際に必要となるソースコードをブログの記事内に表示させるプラグインです。

このプラグインを使うとHTML、CSS、PHPやJavaScriptなど46種類の言語に対応していて、とても見やすくきれいに表示できます。

ブログでHTML,CSSなどを説明するのに最適で、多くの方が利用しているプラグインです。

便利なので、ぜひ活用してみてください。

 

ソースコードとは

 

ここで、よく聞くソースコードについて簡単に説明しておきますね。

ソースコードとは、簡潔に言えば「コンピュータを動かすための文字列」となります。

WordPressで自分のブログをカスタマイズする際に必ずお世話になるもので、すべて半角文字の英語で記述されています。

↑このように、よくブログで表示されていますね。

上記のようにソースコードをきれいに、分かりやすく表示してくれるのが「Crayon Syntax Highlighter」というプラグインなんです。

ソースコードを記事内で取り扱いたい人にはお勧めのプラグインです。

 

Crayon Syntax Highlighterの導入

 

まず、Wordpress管理画面からプラグインから新規追加をクリックします。

 

 

キーワードに「Crayon Syntax Highlighter」と入力。

「今すぐインストール」して「有効化」します。

 

 

「有効化」するとサイドバーの設定の欄にCrayon が追加されています。

 

Crayon Syntax Highlighterの設定

 

設定については、ほとんどデフォルトのままでいいのですが、ここはこうしておいたほうが良いという点だけ説明しておきます。

「ツールバーの表示」はマウスオーバーと常に表示が選択できますが、ここはユーザー的に考えて「常に表示」が良いと思います。

 

 

次に、「常にスクロールバーを表示」にチェックを入れましょう。

ソースコードが長くなった場合に見えない部分ができるので、スクロールバーを常に表示させているほうがユーザーに対して親切ですね。

 

 

この部分については特に必要ないですが、「Crayon Syntax Highlighter」が英語表記になっている場合があるので、日本語表記の設定画面を載せておきます。

参考にしてください。

設定を変更した場合は「変更を保存」をクリックするのを忘れずに。

スポンサーサイト

 

ソースコードの挿入方法

 

いよいよ、記事内にソースコードを挿入してみましょう。

 

ソースコードを表示したい記事の「テキスト」を開けます。

本文の上にある「Crayon 」をクリックします。

 

 

すると「挿入画面」ウィンドウが表示されます。

 

 

コード欄にソースコードを記入するかコピペします。

右上にある「挿入」をクリックします。

これで完了です。

 

プレビュー画面で確認するとページ内に、このように表示されていると思います。

以上が「Crayon Syntax Highlighter」の使い方です。

 

Crayon Syntax Highlighterが英語表記されている

 

最近Crayon Syntax Highlighterが英語表記になっているというのをよく聞きます。

Crayon Syntax Highlighterを日本語表記にする方法はあるのですが、度々Wordpressの更新が行われるので、その都度やり直さなければならないので、少し面倒ですよね。

ここで日本語表記の設定画面を載せているので、これを見ながら一度設定してみてください。

一度設定すれば、何度もやり直すようなことは、あまりないと思われます。

 

まとめ

 

色んな設定項目がありますが、実際に使用する設定は非常に少ないです。

WordPressの記事内にソースコードを表示する場合「Crayon Syntax Highlighter」は非常に簡単に使えるので一度使ってみてください。

ここまでお疲れ様でした。

便利なものは使ってみよう!

aki

 

 

 

稼げるブログ!

開設方法からSEO対策・収益化までを徹底解説!

しかも、無料で配布しています。

あのWordPressを初心者でも、開設から収益化まで分かりやすくまとめ上げた豪華E-bookです。

是非この機会に、無料でゲットしてください。

しかも!!

今だけ、『超豪華特典』が付いています。

詳しくは、E-bookの最後で。

 

 

あのWordPressの開設から集客・収益化がオンラインで学べる!

WPマーケティングスクール

 

初心者ではハードルが高いと言われるWordPressの初期設定から運営まではもちろん、専門的知識がなくても集客・収益化を学ぶことができます。

WPマーケティングスクールでは、初心者でも自分のペースで学ぶことができ、『正しい方法』を学び実践し続けることで必ず成果が出ます。

 

 

 

今なら、1か月無料!⇩

 

fuwaruyurariおすすめWordPressテーマ

 

 

 

この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

SNSでもフォローお願いします!

 

Facebook

 

 カテゴリー一覧

 

初期設定

>>絶対導入するべき【WordPressプラグイン】導入方法と設定まで!

WordPressを始める場合に、これだけ入れておけば大丈夫というプラグインの紹介と設定方法を解説しています。まず、最初に導入して設定しておきましょう。

★おすすめ記事★

 

SEO対策

>>Googleアナリティクス登録・設定!【All in One SEO pack】に連動する方法!

ブログ運営していくうえでの必需品です。初心者にとっては少し難しいと言われますが、分かりやすく解説しています。是非最初に設定しておき迷う。

★おすすめ記事★

 

設定方法

>>【初心者】WordPressの始め方、”エックスサーバー契約と独自ドメイン”設定方法

WordPressを始めるには、サーバー契約が必要です。おすすめサーバー契約から設定方法まで詳しく解説しています。なぜ「エックスサーバー」がお勧めなのかも読めばわかります。

★おすすめ記事★

プラグイン

>>WordPressのバックアップ!サーバー会社だけに依存は危険?

バックアップはとても重要です。契約サーバー会社によっては有料・無料でやってくれますが、もしもの時を考えるとやはり自分で対処しておくのがお勧めです。

★おすすめ記事★

記事について

>>最後までブログ記事を読んでもらうための構成法

読者さんに記事を最後まで読んでもらうことで初めて集客ができます。そのためには、文章の構成がとても大切になってきます。この記事を読んで記事の構成について理解しましょう。

★おすすめ記事★

アフィリエイトについて

>>Amazonアソシエイトの登録方法!審査が通るのは簡単

みなさんブログを始めたらAmazonアソシエイトに登録しておきたいのではないでしょうか。登録方法とちょっとしたアドバイスを記事にしてみました。

★おすすめ記事★

便利ツール

>>商用利用ができる「Facebookページ」の作成方法【最新版】

ソーシャルメディア時代と呼ばれる現在、ブログ運営においてもFacebookは必需品ともいえますね。ここでは商用利用ができる「Facebookページ」の作成方法を解説しています。

★おすすめ記事★

趣味について

>>なぜ単独行(単独登山)をするのか?一人で山に登ること

趣味の登山について記事を書いてみました。このサイトのコンセプトには関係ないですが、暇なときに読んでみてくださいな。

★おすすめ記事★

  •  
  •  
  •  







- Comments -

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

Copyright© fuwariyurari , 2018 All Rights Reserved.