Qrunch において <code> タグの内容を等幅フォントを用いて表示する
昨日から風邪の症状を発症中。 全身倦怠感も疲労感も継続中。
本稿について
本稿は、技術的事項についての速報的で簡易な短信についての Ｚ．ＯＯＬ．ネット信託統治領 Qrunch 諸島からのクロス投稿です。
本稿は、以下の Qrunch 諸島の投稿から御覧になれます。どうか御了承下さい。
はじめに
プログラマのための技術ブログサービスである Qrunch は、簡潔かつ容易に技術的な内容について、記述する事が出来ます。
しかし、技術ブログサービスである Qrunch において、ソースコード及びコマンドライン等を表現する為に用いられる <pre> タグ及び <code> タグで囲まれた内容が非等幅フォントで表示されるため、ソースコード及びコマンドライン等を記述する際に不都合が生じることがあります。
ここで、 Qrunch では、ユーザが CSS を用いて任意に Qrunch の投稿ページの表示の体裁を指定する事が出来る "デザイン" 機能が実装されています。
本稿では、 Qrunch において、 <pre> タグ及び <code> タグで囲まれた内容を等幅フォントで表示する為の CSS の設定について述べます。
なお、本稿の記述に当たっては、 Qrunch の "デザイン" 機能の利用に関する投稿である以下の投稿を参考にしました。以下の投稿の著者各位には心より感謝致します。
また、 Qrunch に "デザイン機能" の実装を行った Qrunch の開発チームの関係各位に心より感謝致します。
<pre> タグ及び <code> タグで囲まれた内容を等幅フォントで表示する
まず、 Qrunch の投稿ページにおいて、 <pre> タグ及び <code> タグで囲まれた内容等幅フォントで表示させるには、 Qrunch のダッシュボードのページから [デザイン] を選択し、デザインの設定ページを開きます。
そして、 [カスタム CSS (上級者向け)] のテキストエリアに以下の CSS を記述します。
#blog-main code {
font-family: Courier New, Courier, Lucida Typewriter, monospace;
font-style: normal;
font-variant: normal;
font-weight: 400;
}
#blog-main pre {
line-height: 1.25em;
}
即ち、 <code> タグの内容について、 Courier 系のフォント若しくは Lucida Typewriter のフォントを用い、通常のフォントスタイルで表示する様に設定します。
また、 <pre> タグの内容について、行間の幅をフォント高の 1.25 倍に調整する様に設定します。
なお、Qrunch においては、 ... によるコード記法は、ブロック要素及びインライン要素の何れも、 <code> タグを用いて表現される為、 <pre> タグについてフォント関連の設定をする必要はありません。
以上の設定を行った後、自らの Qrunch の投稿ページを閲覧すると、 <pre> タグ及び <code> タグで囲まれた内容が等幅フォントで表示される事が判ります。
