どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【WordPress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!

      2015/11/07


運営するブログによってはプログラムのソースコードを表示して紹介したい場合がありますよね。
訪問してくれる人にとって使いやすく読みやすいプログラムを紹介するにはどんな方法があるのでしょうか?

 
プログラムコードをブログで紹介する方法について簡単でわかりやすく、詳しくまとめているのでチェックしていってください。

 

 
【Wordpress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!
 

 

WordPressでプログラムコードをブログで紹介する方法

Wordpressでプログラムコードをブログで紹介する方法
Wordpressでプログラムコードをブログで紹介する方法としてはプラグインを利用して公開する方法が一般的であり、効率的でかつ見た目も綺麗になります。

 
プラグインの利用者が多ければ多いほど、インターネットの検索で設定の方法や使用した感想、カスタマイズ方法が豊富で使いやすいプラグインとなるので、そういったプラグインを選択していきたいですよね。

 
Wordpressでプログラムのソースコードを紹介する上で使えるプラグインには次のようなものがあります。

  • Crayon Syntax Highlighter

 

 

 

 

使いやすくユーザーにとっても便利 Crayon Syntax Highlighterの利用

【Wordpress】ソースコードを紹介したい! Crayon Syntax Highlighter

Crayon Syntax Highlighterの表示イメージ


Crayon Syntax Highlighterとは、ソースコードを綺麗で読みやすくするWordpressのプラグインです。

 
Crayon Syntax Highlighterには、ブログページを表示した際にプログラムに行番号をつけたり、関数を色分けして表示してくれたり、CSSでの整形が不要だったりと、ブログ運営者にとってもブログページの閲覧者にとってもとても利便性の高いプラグインです。

 
Crayon Syntax Highlighterの対応言語は次の通りです。
ここで紹介されているソースコードを紹介する場合は、綺麗で使いやすい形でユーザに閲覧してもらう事が出来ます。

  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly (x86)
  • AutoIt
  • C
  • C#
  • C++
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Diff
  • Erlang
  • Go
  • Haskell
  • HTML
  • Lisp
  • Lua
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scheme
  • Shell (Unix)
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML

 
Crayon Syntax Highlighterを利用する上でのメリットは上げ始めるとキリがありませんが、例えば次のようなメリットがあります。
このメリットだけでも、Crayon Syntax Highlighterを導入する根拠とする事が出来るでしょう。

  • コードの種類により、タグや関数を自動的に色分けして見やすい
  • 行番号をつけられるので、記事内の説明も容易になる
  • HTML、JavaScript、CSS、PHPだけでなく多くのコードに対応してる
  • CSS(スタイルシート)での整形が不要になる
  • 表示されたソースコードを簡単にコピーできる

 
Crayon Syntax Highlighterのデメリットとしては画面の表示スピードが落ちる事で、パフォーマンス低下が起こる可能性がある事です。

 
画面の表示スピードが落ちるという事はユーザーの離脱率が上がったり、検索エンジンのクローラーにストレスを与えてSEO的に評価を落としてしまう可能性があるので、著しくパフォーマンスの悪いブログに導入すると更にパフォーマンス低下を起してしまう原因になります。

 
Crayon Syntax Highlighterのデメリットを解消するには「キャッシュ」を利用して、あらかじめ表示したいページを作成しておき、閲覧ユーザやクローラーに対してパフォーマンスの低下を感じさせない事が大切です。

 
Crayon Syntax HighlighterはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Crayon Syntax Highlighterのインストールは次の手順が主流です。

  • WordPressのプラグインの「プラグインを追加」の画面で「Crayon Syntax Highlighter」と検索する
  • 検索で表示された「Crayon Syntax Highlighter」を「いますぐインストール」ボタンを押してインストール

 
Crayon Syntax Highlighterでソースコードを紹介する場合はエディタ画面の「Crayon」を追加する事で簡単に紹介する事が出来ます。
次の手順でソースコードの追加を行う事が出来ます。

  • エディタ画面の「Crayon」をクリックする
  • 「コード」を入力する
  • 「タイトル」を入力する
  • 「プログラム言語」を選択する
  • 「URL」を入力する
  • 「Line Range」を入力する
  • 「マークするライン」を入力する
  • 追加するコード固有の設定を行う
  • 「挿入」をクリックする

 
細かい設定手順を含めると大変な作業に思えますが、実際にコード紹介で行わなければならないのは最低限『エディタ画面の「Crayon」をクリックする』『「コード」を入力する』『「挿入」をクリックする』のみです。

 
Crayon Syntax Highlighterについて、「【WordPress】ソースコードを紹介したい! Crayon Syntax Highlighter」で画像キャプチャ付きで簡単でわかりやすく、詳しく紹介しているのでチェックしていってください。

 

 

 

 

プログラムコードをブログで紹介する方法 使いやすくてキレイ!

プログラムコードをブログで紹介する方法 使いやすくてキレイ!
プログラムコードをブログで紹介する方法として、使いやすくてキレイな方法について紹介しました。
ソースコードを紹介する上で、用途を考える事も大事ですが、やはり見た目も大事です。

 
綺麗な人が魅力的に見えるのと同じように、綺麗な見た目のブログはやはり魅力的にうつるものです。

 
プラグインを導入するとどうしても記事の表示スピードが落ちてパフォーマンスが低下してしまう事が多いのですが、キャッシュ系のプラグインの導入や、ブログ構成などを考えるとたとえプラグインを導入したとしてもビクともしないブログを作る事が出来るので、そういったプラグインとの併用も考えていきたいものですね。

 
紹介した方法を使ってプログラムのソースコードをどんどん紹介して便利な世の中にしていきましょう!

 

 

 

 

スポンサーリンク


プログラムコードをブログで紹介する方法 使いやすくてキレイ! まとめ

プログラムコードをブログで紹介する方法 使いやすくてキレイ! まとめ
Wordpressでプログラムコードをブログで紹介する方法としてはプラグインを利用して公開する方法が一般的であり、効率的でかつ見た目も綺麗になります。

 
プラグインの利用者が多ければ多いほど、インターネットの検索で設定の方法や使用した感想、カスタマイズ方法が豊富で使いやすいプラグインとなるので、そういったプラグインを選択していきたいですよね。

 
Wordpressでプログラムのソースコードを紹介する上で使えるプラグインには次のようなものがあります。

  • Crayon Syntax Highlighter

 

 
Crayon Syntax Highlighterとは、ソースコードを綺麗で読みやすくするWordpressのプラグインです。

 
Crayon Syntax Highlighterには、ブログページを表示した際にプログラムに行番号をつけたり、関数を色分けして表示してくれたり、CSSでの整形が不要だったりと、ブログ運営者にとってもブログページの閲覧者にとってもとても利便性の高いプラグインです。

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress ,

Message

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

  関連記事

【Wordpress】ブログを高速化するプラグイン特集! 高速化の果てへ
【WordPress】ブログを高速化するプラグイン特集! 高速化の果てへ

WordPressでブログを高速化する上で、プラグインの導入は今や必須となってい …

【Wordpressプラグイン自作】投稿画面の不要なパーツを削除する(remove_meta_box)
【WordPressプラグイン自作】投稿画面の不要なパーツを削除する(remove_meta_box)

WordPressのプラグインを自作で開発している人はプラグイン上でカスタム投稿 …

【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法
【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法

WordPressのブログ運営でマネタイズをする上でQuick Adsenseを …

【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!
【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!

キャッシュ系プラグインとしてW3 Total Cacheを利用している人はデータ …

【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定
【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定

Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的 …

【Quick Adsense】サイドバーに広告を追加する設定について
【Quick Adsense】サイドバーに広告を追加する設定について

WordPressでブログを運営している人で、広告を掲載している人は「サイドバー …

【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法
【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法

WordPressで作成したブログでソースコードを紹介するとき、綺麗な表示にして …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!

W3 Total Cacheにはブラウザキャッシュに関する詳細な設定を行う事が出 …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)のCSS&JS設定
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)のCSS&JS設定

WordPressでブログを運営している人でW3 Total Cacheのブラウ …

【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方
【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方

WordPressをブログを運営し、広告掲載の上でQuick Adsenseを導 …