ブログでのコマンドラインの説明をおしゃれにキメる

ブログ上でのコマンドラインの表現をおしゃれにしませんか？BloggerでもCSSを独自にカスタマイズしましょう。

ブログでターミナルへの入力等を説明したい時、とりあえずスペース等が維持されたり、等幅フォントが使われるようにpreタグを使ったりすると思います。

% ls ${HOME}

しかし、これだけだと、地味だし、目立たないし、インパクトがないですよね。
でも、ここで、ひと工夫すれば、Blogger上でも以下の様な見た目に簡単に出来ます。

% ls ${HOME}

ターミナルに見えるかどうかは別としても、見やすくおしゃれになると思います。

さて、こういう効果を出すのに使うのがCSSですが、今回はBlogger上で独自のCSSをどうやって書いていくかをメモします。（もしCSSに馴染みがなければ、まずはドットインストールでCSSのレッスンを受けてみたらよいかもしれません。）

併せて、コンピュータ出力っぽいフォントを使ってカッコ良いターミナルにするために、Webフォントというのを使う方法もメモしてみます。

BloggerでCSSをカスタマイズ

本来的にCSSを書く場所は以下の３つです。

外部ファイルに書いて、htmlファイルから呼び出す
htmlファイルにスタイルタグを使って書く
CSSを適用したいタグの属性として直接書く

ブログの場合には、自分でサーバーを立てているわけではないので、外部ファイルを管理するのは面倒です。また、各タグの属性として書くのは、煩雑で現実的ではありません。そこで、現実的な選択肢としては、２番目のhtmlファイルにスタイルタグを使って書くということになります。

さて、Bloggerサービスで提供しているブログのカスタマイズは非常に柔軟です。「テンプレートデザイナー」と呼ばれる設定メニューを使って簡単にカスタマイズする方法を提供するだけでなく、ブログ自体をまったく１から自作できる方法までも提供しています。CSSの設定だけなら、テンプレートデザイナーを使うことで、上の２番目「htmlファイルにスタイルタグを使って書く」ことが出来ます。

テンプレートデザイナーからＣＳＳコードを追加する

まずは、自分のページの左上の「B」と書いてある、Bloggerアイコンをクリック。

編集対象のブログを選択する画面で、ブログのタイトル部分をクリックします。

「マイブログ」というページになるので、左側のメニューから「テンプレート」をクリックします。

テンプレートのページの中に「カスタマイズ」というボタンがあるので、それをクリックします。

これが「テンプレート　デザイナー」です。このページから色々なカスタマイズ項目を呼び出すことが出来ます。今回は、カスタマイズのページの左上にあるメニューから「上級者向け」と書かれた部分をクリックします。

クリックすると右隣に、ページのテキストや、背景等と書かかれたメニューが出てきます。この項目は、沢山あって下の方が見えなくなっているかもしれません。そこで、一番下まで見えるようにスクロールさせて下さい。

そして、この項目の一番下にみつかる「CSSを追加」と書いてある部分をクリックします。

クリックすると、その右側にCSS書き込み用のボックスが出てきますので、そこにCSSを書き込んでいくことになります。また、下側の画面はプレビューになっていて、上のCSSコードの効果をリアルタイムで確かめる事が出来ます。

尚、ここでの変更は、右上の適用ボタンを押すまで、実際のページには反映されません。そして、このボタンを押すまで保存もされないので、編集した後、最後にこのボタンを押し忘れないように注意が必要です。

コマンドライン入力っぽい表現をするpreタグ用CSS

さて、冒頭で示したおしゃれなpreタグのCSSは、こんな感じです。

	pre.commandline {

	/fontの指定（google web font）/
	font-family: 'Source Code Pro' ;

	/境界との位置関係を調整/
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 5px;
	border: 1px solid #7a7a7a;

	/色/
	background-color: #ffffff;
	color: #0000000;

	/角を丸くする/
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius:5px;

	/影をつける（外と中の両方）/
	-webkit-box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset;
	-moz-box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset;
	box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset;

	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	}

view raw osb20150402001.css hosted with ❤ by GitHub

これを上で示した「CSSを追加」欄にコピペすれば出来上がりです。この効果を得たい場合は、preタグのclasｓ属性にcommandlineという値を設定してあげればＯＫです。他の効果を別のクラス名で登録することで、使い分けることが出来ます。

実際に使う時は、ブログ編集の際にhtmlモードになって、preタグを編集します。

<pre class="commandline">
ここに内容
</pre>

Webフォントを使う

コンソールやエディタなど、プログラミングのソースを書いたり見たりするときには、０（ゼロ）とＯ（オー）の違いが一目でわかったりするように、プログラミング用のフォントを使っている人も多いと思います。

そこで、ブログ上でもこれらカッコ良いプログラミングフォントでおしゃれにしてみましょう。

% echo "I or l or 1 or 0 or O"

本来、Webページ側でフォントの指定をいくらしても、それを見る人のパソコンにそのフォントがインストールされいなければ、当然、指定のフォントは表示されないで別のフォントで表示される事になり、ブログ作成者の意図に反した残念な見た目になってしまうこともあるかもしれません。

しかし、Webフォントを使えば、ページを見る人がその指定フォントを持っていようが持っていまいが、必ずその指定フォントで表示してくれるようになります。その仕組みは単純で、Web上に指定フォントを公開しておいて、それを表示する時に自動的にダウンロードして使うのです。
具体的には、htmlファイル内でlinkタグを使って公開フォントを読み込みます。読み込まれたフォントはブラウザ上でパソコン内にあるフォントと区別なく扱われるようになります。

GoogleFontsを使ってみる

そんなwebフォントのサービスをgoogleも提供してくれているので使ってみましょう。
http://www.google.com/fonts

ページを開くと色んなフォントのプレビューが並んでいるので、左側のメニューでカテゴリーを絞り込んでいきます。また、上側のボックスに表示させたい文字列を書き込むことでプレビューに表示する文字列を変える事が出来ます。

使いたいフォントが決まったら上のスクリーンショットで示したボタンをクリックすることで、次の画面に進むことが出来きます。
まずは１の項目は、フォントのスタイル、すなわち、太さや斜体かどうかなので、好きなものを適当に選びます。続いて２の項目は文字セットで、Latinを選んでおけばＯＫです。

そして、下のスクリーンショットはその次の３，４の項目です。

３の項目は、fontの読み込み方法に関するものです。「standard」タブが選ばれているのを確認したら、その下のボックスの内容がフォントを読み込むためのlinkタグなので、これを表示させたいページのhtmlのヘッダ内にコピペします。

Bloggerでhtmlソースをカスタマイズ

ここでBloggerのカスタマイズにおいて、htmlソースをカスタマイズしたい場合は、マイブログのテンプレートページにある「HTMLの編集」ボタンから行うことになります。
これは、上で紹介した「CSSを追加」へ行く途中にあった、以下の画面から行くことができます。

この編集画面で表示される内容は、厳密にはhtmlソースではなくて、Bloggerのhtmlソースの基になるテンプレートデータで、実はこの内容を書き換える事によってBloggerの全てがカスタマイズ出来たりします。

今回はlinkタグを挿入したいだけなので、</head>を探して、その前辺りに上のページでコピーしたlinkタグをを貼り付ければＯＫです。貼り付けの際の注意としては、google fontのページで作成してくれるひな形は、最後が「>」で終わっています、Bloggerのテンプレートはxml形式なので空要素の場合「/>」としなければエラーが出て保存が出来きません。なので、

張り付けた後、>の前に必ず/（スラッシュ）をつけて「/>」にしましょう。