【So-netブログ】ブログにソースコードを表示させる方法(デザイン変更も可) [So-netブログ]
So-netブログにソースコードを表示させる方法
デザイン変更もできます
デザイン変更もできます
So-netブログを使っている方も、ブログにソースコードをきれいに載せたいって思いますね。もちろん、私もそうでした。
調べてみると、So-netブログでも可能です。下記の2つの方法が出てきました。
方法1: Syntax Highlighter を使う方法
方法2: google-code-prettify を使う方法
この記事では、方法2のgoogle-code-prettify を使う方法を紹介します。google-code-prettifyは見栄えが地味だという記事も見かけますが、デザイン変更も可能ですので安心して下さい。後半で、デザイン変更の仕方についてもお伝えしますね。また、既存のデザインから選ぶだけでは満足できない方には、カスタマイズも可能です。この記事では、ちょっとだけカスタマイズも扱います。
本記事で使用している環境は以下のとおりです。
【環境】
端末 | パソコン |
OS | Windows 10 |
ブラウザ | Chrome |
スポンサードリンク
【目次】
1. google code prettifyの導入する
2. ブログにソースコードを載せる
3. デザインを変更する
4. ちょっとだけカスタマイズ
4-1. 長いコードを改行する(はみ出さないようにする)
4-2. 行番号を表示する
2. ブログにソースコードを載せる
3. デザインを変更する
4. ちょっとだけカスタマイズ
4-1. 長いコードを改行する(はみ出さないようにする)
4-2. 行番号を表示する
1. google code prettifyの導入する
では、早速 google code prettify を導入しましょう。
安心してください。とっても簡単です。下記のように編集画面を開いたら、タイトルを付けて、たったの1行をコピペするだけです。
[デザイン]タブを左クリックする
So-netブログの管理ページで、[デザイン]タブ(上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。
[テンプレート管理]を左クリックする
[テンプレート管理](上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。
[HTMLの追加]を左クリックする
ページを下にスクロールさせましょう。[HTMLの追加](上記画像の赤丸の箇所)が見えてくるのでこれを左クリックしましょう。
HTMLにタイトルをつける
google code prettify用のHTMLにタイトルを付けましょう。ここでの例では「google code prettify」とつけてみました。
google code prettifyを読み込むためのコードを貼り付ける
まずソースコードの中から</head>という箇所(上記画像の赤丸の箇所)を探しましょう。
次に、下記のソースコードをコピーして、</head>の直前に貼り付けましょう。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
たったこれだけで、google code prettifyの導入は完了です!
2. ブログにソースコードを載せる
では、実際にブログ記事の中にソースコードを載せてみましょう。まず、下記の画像をご覧ください。
こちらは、記事内にソースコードをそのまま記述した場合の画面です。
ソースコードを<pre>タグで囲む
下記のソースコードのように<pre>タグでソースコードを囲みましょう。その際に、下記のようにクラスとして "prettyprint" を指定しましょう。
<pre class="prettyprint"> /** * Enqueue scripts and styles. */ function mytheme_scripts() { wp_enqueue_style( 'mytheme-fonts', mytheme_fonts_url(), array(), null ); wp_enqueue_style( 'mytheme-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' ); wp_enqueue_style( 'mytheme-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' ); wp_enqueue_style( 'mytheme-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' ); wp_enqueue_style( 'mytheme-style', get_template_directory_uri().'/style.css' ); </pre>
<pre>タグで囲むだけで、ソースコードを表示できました。簡単でしたね。
ただし、いくつか問題が有ります。
問題1:デザインが地味(好みですけど・・・)
問題2:行番号が表示されない
問題3:ソースコードが枠からはみ出ている
次はこのあたりを解決していきましょう。
3. デザインを変更する
では、デザインを変更してみましょう。
ここでは、既存の用意されているデザインを適用する方法をお伝えしますね。
スタイルシートを読み込むためのコードを貼り付ける
code prettifyのテーマギャラリーにおいて、既存のデザインが公開されています。このデザインを既定したスタイルシートをSo-netブログに適用します。ここでは、私が気に入った「Sons-Of-Obsidian」を適用してみます。
1. google code prettifyの導入するにおいて、google code prettifyを読み込むためのコードを貼り付けましたね。その直後(次の行)に以下のソースコードを挿入しましょう。
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css" type="text/css" />
デザインを適用した結果、下記の画像の様になりました。
※別のデザインを適用される方は、貼り付けるコードの中にあるURLをそのデザインのものに変更しましょう。
4. ちょっとだけカスタマイズ
ここまでは、既存のものを適用するだけでしたが、ちょっとだけカスタマイズしてみましょう。ここでは、「長いコードの改行」と「行番号の表示」についてのみ紹介しますね。
4-1. 長いコードを改行する(はみ出さないようにする)
今までのものだと、長いコードがはみ出してしまっていましたね。こちらは、CSSを追記することで解決できます。
※http://10251.net/google_code_prettify_customize#chapter-7を参考にしました。ありがとうございました。
自動改行するためのコードを貼り付ける
3. デザインを変更するにおいて、スタイルシートを読み込むためのコードを貼り付けましたね。その直後(次の行)に以下のソースコードを挿入しましょう。
<style type="text/css"> pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </style>
上記の画像のように、ソースコードが自動改行されました。
4-2. 行番号を表示する
行番号を表示するのはとっても簡単です。
2. ブログにソースコードを載せる
において、<pre>で囲むというのをお伝えしました。そこで、クラス("prettyprint")の指定をしたと思いますが、そこにさらに、行番号の指定を追加するだけです。下記のコードをみてください。
<pre class="prettyprint linenums:1">
このように "linenums" を指定します。1を指定しているので1行ごとに行番号が表示されます。5を指定すれば、5行ごとになりますよ。
上記の画像のように行番号が表示されました。
最後に、ここまでで So-netブログ に設定してきたソースコードをまとめて以下に示します。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css" type="text/css" /> <style type="text/css"> pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </style>
これで、あなたのブログがかっこよくなりますように
コメント 0