*

ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】

公開日: : 最終更新日:2015/01/21 stinger3カスタマイズ, WordPress系

どうもです、いろはすです。

stinger3のカスタマイズにあたって、色々とプラグインを見ているのですが、世の中には便利なプラグインがたくさんありますな!

では早速見て行きましょう~!

コードをブログ記事内で表示出来るプラグイン!

色々と表示方法があるのですが、ワードプレスブログの場合は便利な『SyntaxHighlighter Evolved』というプラグインがあるので、それを利用しちゃいましょう!

表示させるまでの手順!

①ワードプレスの管理画面から『SyntaxHighlighter Evolved』で検索して、インストール
②プラグインをインストールしたら、有効化!
③設定画面から⇒SyntaxHighlighterを選択!

④するとこんな画面が出てくるので、「ツールバーを表示する」にチェックを入れておきましょう!
rehte

バージョンは「2」と「3」がありますが、コードを記事中に表示させるだけなので、2で問題ないかと!

その他の項目は特にイジる必要はないんじゃないかと!個人的には「ツールバー」の表示ボタンもいらないと思うので、僕はチェックを外していますw

スポンサーリンク

で、どうやって記事中で使うんだい!?

使い方はシンプルで、表示させたいコードの最初と終わりを[言語名][/言語名]というショートコードで囲うだけ!

今回はcssコードを表示させたいので、と書く感じですね!
htrw

後は勝手にプラグインが、囲ったソース全部をキレイに整えて表示してくれます!こんな感じ!

/*サイドの各タイトル見出し*/
.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: left center;
}

以上!!いやホントにコレだけでOKなんですよw 

色付けも自動でやってくれるので見栄えがイイですね~!
こういうのは地味に大事ですw

参考ブログはコチラ!
⇒ホームページ制作サカエンさんのSyntaxHighlighter Evolved を使ってみる – WordPress plugin

恐らくこのプラグインを使ってるっぽいブロガーさんも多いので、ソースコードを記事中に表示させてたい場合は使ってみてくださいな~!

良いものはドンドン使っていくのがイイですよね!

それでは~

いろはす

プラグインもあまり入れ過ぎると重くなるみたいですが、優良なプラグインは入れておきたいですよね!

スポンサーリンク

関連記事

rshse

stinger3をカスタマイズしてヘッダー画像幅の調整してみたよ!何処のコードをいじればイイの!?

どうもです、いろはすです。 前回全体の幅を広くしたので、ヘッダー画像部分の右側に余白が出来てし

記事を読む

ヘッダー画像横に

stinger3をカスタマイズして全体の幅とメイン幅&サイドバー幅を広げてみたよ!余白の微調整も!

どうもです、いろはすです。 先日サイドバーをカスタマイズしたら、他も色々といじりたくなって来た

記事を読む

htr

stinger3のサイドバーを自分好みにカスタマイズしてみたよ!サイドバーの見出し背景色変更&下線追加&見出しフォントの文字色変更!検索ボタン変更も!

どうもです、いろはすです。 当ブログはENJIさんが作成・配布している『Stinger3』とい

記事を読む

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • 20代で起業して自由過ぎるライフスタイルを満喫中の♂
    高知生まれ高知育ち、東京なう。
    絵に書いた様な右脳派。
    ほぼ感覚だけで生きてます。

    ⇒ 詳しくはコチラから!
  • follow us in feedly

    ⇒ 「feedlyって何やねん!」という方はコチラを!
  • 2017年1月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
PAGE TOP ↑