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

スポンサーリンク


最近ホームページのトップページの変更から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もでてくるはずです。なんかプログラミングの記事って痒いとこに手が届かないような記事が多いと思っていて。それは、つまりは、、、その記事を見てもあまりきてくれた人が理解できず。そのコードを使うことができない状態。記事にサンプルを作って置いて解説しているサイトが少ないように思います。
サンプルや作業手順があったほうが確実にわかりやすいので、これからもサンプルを作りながらプログラミングの記事を投稿していこうと思います!

良いと思ったらいいね、リンクのシェア等ご協力お願いします!
後、あいた時間を有効活用したい方、発信力をつけたい方は下記のリンクをクリックしてみてください。
きっといいことが。。。。。
Please click link...



Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
AllHTMLCSSJavascriptPHP
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント