賢威６．１＋ワードプレスのSyntaxHighlighter Evolvedを説明。
ご訪問有難うございます。
目次
賢威６．１＋ワードプレスのプラグインのSyntaxHighlighter Evolvedを説明します。
HTMLやCSSのソースコードをワードプレスの管理画面で書くとプログラムが変換されて、HTMLやCSSのソースコードを表示する場合は特殊文字を使用する必要があります。
それが、かなり面倒で４月２８日の枠線のHTMLの記事を全部特殊文字に変えるのは変換ツールもあるのでそれを使えば簡単なんですけど、カッコよくインパクトある見せ方ができるプラグインのSyntaxHighlighter Evolvedを使用することに決めました。取り敢えずプラグインで１０個ほどHTMLのソースコードを表示しました。
テキストエディターでソースを書くと以下のようになります。
ビジュアルエディターで見ると以下の画像になります。
ソースコードをそのまま投稿画面で表示したいのですがプログラムの変換で枠線になってしまいます。
これを変換させないようにすると特殊文字を使うことになりますが投稿画面でもっとカッコよく表示したいですね。
SyntaxHighlighter Evolvedを使うと以下のようにソースコードを表示できます。
SyntaxHighlighter Evolvedを導入する方法。
という訳で、カッコよくソースコードを表示できるプラグインが有りますのでそれを使いたいと思います。
プラグインのインストール方法はhttp://seoiinuma.com/archives/678参考URL を見てください。
有効化をしたら、①～②と進んでクリックして設定画面に入ります。
②をクリックして設定画面へと進みます。
以下の画面が現れます。
設定は赤丸で囲んだところをチェックして、お好みで色々と試してみることをおすすめします。
モード・プレビューは以下の画像です。
使用方法は
〔html〕コード〔/html〕＝＝＝＞※。〔 〕は半角ですので注意して下さい。
のように言語をタグとして記述できます。
賢威６．１を使用している場合は以下のソースをdesign.cssの最後尾に追記して下さい。
#main-contents .syntaxhighlighter table{ table-layout: auto; }CSSコードをdesign.cssの最後尾に追記して下さい。
/*SyntaxHighlighterソースコード*/
#main-contents .syntaxhighlighter table{ table-layout: auto; }
こんな感じで追記していただけば、後から分かりやすいですね。
私は、コードを使う時AddQuicktagを使用しているのですがAddQicktagを使うと非常に簡単に早く表示できます。
以上です。
Google+
この記事を読んだ人は次の記事も読んでいます。
SEO内的対策万全の賢威6.1＋ワードプレスでｈ３タグを太くしてみた
SEO内的対策満載賢威6.1でワードプレスAddQuicktagを使う
賢威の横幅を広げてみました。
内的SEO満載の賢威６．１でトップメニューの色と文字色を変える方法
Table of Contents Plus目次を作り出すプラグイン
ワードプレス（賢威６．１）に枠線をつけました。
賢威６．１＋ワードプレスでサイトマップを訪問者の為に作るプラグイン紹介
賢威＋ワードプレスにアクセス解析導入Ultimate Google Analytics
記事を書いたらソーシャルに投稿するのはなぜ？
SEO内的対策満載の賢威６．１で発リンク画像アイコンを付ける方法
賢威6.1+ワードプレスのヘッダー画像を横幅いっぱいに広げたい
賢威６．１の３カラムで、サブコンテンツとサイドバーを右側に並べる方法
画像圧縮の為のプラグイン・EWWW Image Optimizer
賢威６．１の最新情報の日付を消す
賢威６．１でトップを固定ページにし、最新情報と投稿ページたす方法
賢威６．１＋ワードプレスの日付年月日を消したい。
賢威＋ワードプレスでコピペで使える枠線のHTMLソース
賢威6.1でTablePressの表示幅がセルごとに等分して表示されてしまう
当ブログでのテンプレート賢威6.1の最新情報の表示形態の種類
賢威６．１でヘッダー画像が下がった場合
最近のコメント