SSブログ

【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は見栄えが地味だという記事も見かけますが、デザイン変更も可能ですので安心して下さい。後半で、デザイン変更の仕方についてもお伝えしますね。また、既存のデザインから選ぶだけでは満足できない方には、カスタマイズも可能です。この記事では、ちょっとだけカスタマイズも扱います。



 本記事で使用している環境は以下のとおりです。

【環境】

端末パソコン
OSWindows 10
ブラウザChrome





スポンサードリンク





【目次】






1. google code prettifyの導入する




 では、早速 google code prettify を導入しましょう。

 安心してください。とっても簡単です。下記のように編集画面を開いたら、タイトルを付けて、たったの1行をコピペするだけです。



[デザイン]タブを左クリックする


blog_top1.png

 So-netブログの管理ページで、[デザイン]タブ(上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。



design_top1.png



[テンプレート管理]を左クリックする


 [テンプレート管理](上記画像の赤丸の箇所)を左クリックしましょう。下記画像のようなページが開きます。



temp_top1.png



[HTMLの追加]を左クリックする


 ページを下にスクロールさせましょう。[HTMLの追加](上記画像の赤丸の箇所)が見えてくるのでこれを左クリックしましょう。



HTMLにタイトルをつける


mod_html1.png

 google code prettify用のHTMLにタイトルを付けましょう。ここでの例では「google code prettify」とつけてみました。



google code prettifyを読み込むためのコードを貼り付ける


mod_html2.png

 まずソースコードの中から</head>という箇所(上記画像の赤丸の箇所)を探しましょう。

 次に、下記のソースコードをコピーして、</head>の直前に貼り付けましょう。



<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>




たったこれだけで、google code prettifyの導入は完了です!



2. ブログにソースコードを載せる




 では、実際にブログ記事の中にソースコードを載せてみましょう。まず、下記の画像をご覧ください。



result0.png



こちらは、記事内にソースコードをそのまま記述した場合の画面です。



ソースコードを<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>




result1.png

 <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" />




 デザインを適用した結果、下記の画像の様になりました。



result2.png



 ※別のデザインを適用される方は、貼り付けるコードの中にある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>




result3.png



 上記の画像のように、ソースコードが自動改行されました。



4-2. 行番号を表示する




 行番号を表示するのはとっても簡単です。
 2. ブログにソースコードを載せる
において、<pre>で囲むというのをお伝えしました。そこで、クラス("prettyprint")の指定をしたと思いますが、そこにさらに、行番号の指定を追加するだけです。下記のコードをみてください。



<pre class="prettyprint linenums:1">




 このように "linenums" を指定します。1を指定しているので1行ごとに行番号が表示されます。5を指定すれば、5行ごとになりますよ。



result4.png



 上記の画像のように行番号が表示されました。



 最後に、ここまでで 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>




これで、あなたのブログがかっこよくなりますように

nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:blog

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。