ルクセリタスでプログラムをきれいに見せたい！投稿画面にソースコードを埋め込む方法とは
ルクセリタス等ワードプレスを利用している際に、投稿画面にソースコード（プログラム）を記述したい。でも、そのまま記述すると、見栄えが悪いと感じた経験はありませんか？
そこで、投稿画面にソースコードを埋め込む方法をご紹介していきましょう。
「Crayon Syntax Highlighter」とは
自分が作ったサイトをきれいに見せるためのプログラム。そんなプログラムもただ投稿画面に記述しているだけでは、とても見づらいですし、なんだか見栄えがダサイんです。。。
そんなときに便利なプラグインがこの「Crayon Syntax Highlighter」。そこで、このプラグインについてご紹介していきましょう。
Crayon Syntax Highlighterとは・・・
ソースコードを投稿画面に表示される際、下記のように枠線の内部に囲って、ソースコードを行ごとに表示し、見栄え良く表示することができるプラグインです。
何よりソースコードを表示する際に直接投稿画面に入力すると、見栄えが悪くなってしいますが、このプラグインによって、この枠線内に表示ができるため、とてもかっこよく見せることができるメリットがあります。
＜表示例＞
ソースコードのインストール方法
それでは、プラグインを使って、容易にプログラムソースを埋め込む方法を活用する方法です。そのプラグインは、「Crayon Syntax Highlighter」になります。
1.＜プラグインインストール＞
ソースコードを埋め込むプラグインを使ってみよう！
それでは、実際に「Crayon Syntax Highlighter」の使ってみましょう。
1.設定画面アイコン選択
3.ソースコード埋め込み
表示画面について
それでは、実際の表示画面について解説していきましょう。
1.投稿中の表示画面について
このように、投稿中の表示画面に関しては、すごくシンプルで、枠線に囲まれただけになっています。
1 2 3 4 | .post h2 { border-left:solid 10px #20a39e; border-bottom:2px dashed #20a39e; } |
2.実際の表示画面
先頭列に数字の行数が表示されます。また内容ソースコードもコピーすることができるので、このサイトを訪問していただいた方にも役に立つ情報を提供することが可能です。
まとめ
このように、ソースコードをただサイトに掲載するだけでなく、見栄え良く、表示することができる。プラグイン「Crayon Syntax Highlighter」なのです。
自分のサイトを上手にカスタマイズして、有益な情報を提供できるようにしていきましょう。
https://tarmiyan.net/pv※ブログを始めるなら絶対おすすめ【特典あり】
私も新たなサイト【育チルnet】」にて、検索エンジンの上位の多くを占めると言われるSEO対策に強いWordpressテーマを導入してみました。
無料テーマから有料テーマにしただけなのに、0円だった収益が2～3万円まで上がったんです！
正直驚きでした！実際に利用した所感は、デザイン性能がかなり整っていますし、表示速度もやっぱりかなり速いです。人気なWordpressテーマなだけはあると感じました。
無料のテーマでも私は悪いとは思っていませんが、やはり検索エンジンからの評価はだいぶ違いました。
初めて数ヶ月ですが、もうすでに検索エンジンから大きく表示されるようになっています。
どうせやるなら、しっかりgoogle社からの評価を受けられる整えられた環境でブログ運営する方が絶対にいいと感じたため、当サイトをご覧下さった皆様にもお伝えさせて頂きました！
Wordpressテーマを新たにご検討方は、今しかない期間限定の特典も付いていますので、お早めにご確認下さい。
←ためになったら押してね＾＾