上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

NefertではソースコードやらHTMLやらCSSやらの表示には、ソースコードHTML化コンバーター「唐辛子」を利用しています。
「唐辛子」はソースコードをコピー&ペーストして変換ボタンを押すだけでOKという手軽さと、変換後はCSSファイルで見た目を調整できるという自由度が魅力。ソースコードを見やすくするスクリプトを使う方も多いですが、あんまりゴテゴテさせたくなかったのでこちらを使うことにしました。

Nefertで使っているソースコード用CSSはこんな感じです。
pre.code {
border : 1px dotted #aaa;
background-color : #f5f5f5;
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/code_background.png");
background-repeat : no-repeat;
background-position : left top;
padding : 30px 2% 25px;
width : 95%;
font-size : 12px;
color : #666;
}
@media screen {/* この中をMacIEは無視する */
pre.code {
overflow : auto;
*overflow-x : auto;
*overflow-y : hidden;
}}

pre.code.html {
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/html_background.png");
}
pre.code.css {
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/css_background.png");
}
pre.code.javascript {
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/javascript_background.png");
}

pre.code span.tag { color: #00f; }
pre.code span.attr { color: #000; }
pre.code span.value { color: #900; }
pre.code span.str { color: #090; }
pre.code span.num { color: #090; }
pre.code span.keyword { color: #00f; }
pre.code span.rem { color: #909; }


ソースコードのカラーリングは唐辛子標準のものを使用。
手動でpreのclassにhtml、css、もしくはjavascriptと記入すれば、上部の文字が「HTML」、「CSS」、「Javascript」になります。指定無しだと「CODE」。
もし使いたいよーという方がいらっしゃいましたらご自由にどうぞ(*^-')b→source.css

FC2ブログ以外で使用する場合は、画像を自身のサーバーにアップロードし、そのurlを呼び出すことになると思います。
使用している画像はこちら。
[html] [css] [javascript] [code]
関連記事


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)
    (管理者にだけ表示を許可する)

    質問の際のお願い

    テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

    質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
    また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

    質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


    トラックバック

    Trackback URL
    Trackbacks


    Recent Entries

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。