WordPressのプラグイン「Crayon Syntax Highlighter」を使う
[操作手順]
→プラグイン「Crayon Syntax Highlighter」をインストールする。
→プラグイン「Crayon Syntax Highlighter」を有効にする。
※→WordPressログイン>プラグイン の順にアクセスして、対象の有効化ボタンを押す
→WordPressログイン>投稿>新規追加>テキストタブ>crayonボタン(灰色ボタン) の順にアクセスする。
→Crayon Syntax Highlighterの「挿入画面」の窓が現れる。
→コード「ここに、コードを記入してください。」 の箇所に投稿するソースコードを書く。
→右上の挿入ボタン(黒色ボタン)を押す。
→WordPressの新規投稿フォームにコードが挿入される。
→公開ボタン(青色ボタン)を押す。
以上で完了です。
以下のような投稿記事を書けるようになります。
ボタンの実物
|
1 |
<a href="#" class="selectBtn">選択</a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* 選択ボタン デザイン上青色グラデーションのボタン */ .selectBtn, a.selectBtn { display: inline-block; cursor: pointer; background: #0058D4; background: -moz-linear-gradient(#639FE8, #0058D4); background: -webkit-gradient(linear, left top, left bottom, from(#639FE8), to(#0058D4)); border: none; color: #FFF; font-weight: 400; font-size: 16px; font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Sans-Serif; text-align: center; line-height: 100%; padding: 18px 0px 16px; width: 7em; } .selectBtnKanri:hover, a.selectBtnKanri:hover { background: #3280E2; background: -moz-linear-gradient(#94BDEF, #3280E2); background: -webkit-gradient(linear, left top, left bottom, from(#94BDEF), to(#3280E2)); text-decoration: none; } |
[確認環境]
WordPress 4.0.1
Crayon Syntax Highlighter 2.6.6
この記事を書いた人
新着記事
2015.11.27Illustrator[Mac]IllustratorのカラーモードをRGBへ変更する方法
2015.11.27IllustratorIllustratorのカラーモードをRGBへ変更する方法
2015.11.26Illustrator[Mac]IllustratorのカラーモードをCMYKへ変更する方法
2015.11.25IllustratorIllustratorのカラーモードをCMYKへ変更する方法