CSSコードを記事内に表示してサイトレイアウトのカスタマイズ記事を書きたいと思った時に手書きで書いていくこともできますが、執筆者個人的にパッとしないなんて事もあると思います。
今回はそんな時にオススメのプラグイン『Crayon Syntax Highlighter』の導入から使用方法などを話していこうと思います。
インストール
Wordpress管理画面から「プラグイン」→「新規追加」をクリックしてもらい検索欄にCrayon Syntax Highlighterと記入してください。
すると、以下のようなものがあるのでインストール→有効化をします。
６０種類の見た目が用意されています。
設定
設定をするところはデフォルトのままでも大丈夫ですが、表示されるCSSコードの見た目を変更することが出来るので好みに合わせて変更してみてください。
ちなみに僕は、デフォルトのままで活用しているので設定というところは見た目の変更以外触れていません。
詳細な設定をしたいなら「インストール済みプラグイン」からCrayon Syntax Highlighterのところにある英語で表記されている「settings」から変更することが出来るのでやってみてください。
使い方
実際にCSSコードを記事内に載せたいときは、記事編集画面にてビジュアルからテキスト表示に切り替えてください。
ショートコード「crayon」を押すと以下のような画面になるので赤い枠の中に表示させたいCSSコードを貼りつけます。
上記の画面は表示された画面のままで、デフォルトの状態です。この状態でCSSコードをコピペし、実際に記事表示させるとこんな感じになります。↓
/* 中見出し */
h2 {
position: relative;
color: #ffffff;
background: #00cc4c;
font-size: 16pt ;
border: 8px solid #00cc4c;
margin: 10px 10px 28px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
box-shadow:1px 3px 7px 0px #666666 ;
}
h2:after, h2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
}
h2:after {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #00cc4c;
}
h2:before {
left: 32px;
border: 18px solid transparent;
border-top: 18px solid #00cc4c;
}
このコードは適当に選出したものになります。
このような感じでどこも設定を変更しなくても表示されるので英語が苦手でも簡単に載せることが出来ます。
表示されるデザインのみ設定から変更しているのでインストールした時のデフォルトの状態とは上記の表示は異なります。
cssの記事内表示に活用してみてはどうでしょう。
最後まで読んでいただきありがとうございました。
