Joomla!

ソースコード、実行結果の表示スタイル

コンピュータ関連技術に関する記事を掲載する場合、ソースコードや実行結果の表示方法を整える必要があります。本サイトでは、CSSで以下の定義をしています。
pre.code {
	width:95%;
	padding: 10px 15px;
	margin: 5px 0 15px;
	border-left: 5px solid #999999;
	color: #FFFFFF;
	background: #000000;
	font: 1em/1.5 "Courier News", monospace;
	overflow:scroll;
}

テンプレートを変更するには、サイト管理者になって「エクステンション」の「テンプレート管理」を使います。例えばJa_Purityテンプレートの場合、「Ja_purity」を選択して、「テンプレート編集」「CSS編集」ボタンを押して、テンプレートCSSエディタの一覧画面を表示させ、template.csを選択し「編集」ボタンを押します。以下の定義の下(200行目あたり)に、上のpre.codeクラスの定義を追加します。

/* BONUS TYPOGRAPHY STYLES
--------------------------------------------------------- */
pre, .code {
	padding: 10px 15px;
	margin: 5px 0 15px;
	border-left: 5px solid #999999;
	background: #FFFFFF;
	font: 1em/1.5 "Courier News", monospace;
}