ブログ記事内にソースコードをかっこよく載せる方法!


最近ホームページのトップページの変更からWordpress講座というコンテンツを増やしてみました!その関係上記事投稿もろくにできず…こだわり始めたらキリがないですね。まだまだコンテンツ自体の枠組みも完成してなのですがネタがあったため新しい投稿をしていきます(笑)レスポンシブデザインにも挑戦してました!これはスマホ用のCSSの作成。ホームページのスマホ最適化ですね。これについては次回ふれていきます!
今回は、ブログ記事内にソースコードをかっこよく載せる方法!について書いていきます。
以前は下記のようなコードでソースを載せていました!

上記のように簡単な枠組みを作る場合は下記のコードを使います。
<pre><code>

//プログラミング内容の記述

</code></pre>

ここからは自分の好きなようにCSSでアレンジしていけばいいのですが…なかなか色々と時間もかかるしめんどくさくなってきますよね。ってことで出来上がっているCSSを外部から読み取ってclassを使い簡単にソースコードをかっこよくかつ見やすくして見ましょう!

プラグインを使う、という方法もあるのですが今回はPHPファイルをちょっと触ってみます。まとめられていたサイトが確かどっかにあったのですが…どっかにいってしまったので解説していきます。下記の流れにそってやっていけばきっとあなたもカッコイイソースコードが載せれるはず!

まず、WordPressのダッシュボードの外観→テーマ編集→header.phpに入ります。すると…HTMLの記述がしてあってそこにおきまりの<head></head>タグが存在すると思います。その<head>タグの間に下記を記述します。下記のコードはダブルクリックすることにより全選択されるのでコピーがしやすいです。


<head>タグの間に記述するということを間違えないように注意してください!よし、、、作業終了!はやっ。。と思ったかたもいると思います。本当にこれだけなんです!あとは記事投稿する時にどうするかというと<pre>タグにclass=”brush:html”というclassをつけてあげて

<pre class=”brush:html”>

//プログラミング内容の記述

</pre>

これだけで綺麗でかっこいいソースコードをブログで投稿できるようになります!いや、でもなんか色が気にくわないよ。って方がいる場合はshCore.jsで調べてみてください!きっと他のcssもでてくるはずです。なんかプログラミングの記事って痒いとこに手が届かないような記事が多いと思っていて。それは、つまりは、、、その記事を見てもあまりきてくれた人が理解できず。そのコードを使うことができない状態。記事にサンプルを作って置いて解説しているサイトが少ないように思います。
サンプルや作業手順があったほうが確実にわかりやすいので、これからもサンプルを作りながらプログラミングの記事を投稿していこうと思います!



コメントを残す

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

*