ニコニコプレス(春)ver.1.3 のコメント表示を少しだけ自分好みにカスタマイズ。
コアを弄らなくても comment_author_link の分岐を functions.php とかに別に作れそうだけど、思ったとおりに動くものが作れなかったので、強引に弄ってみた。
続きを読む
コメント欄のカスタマイズ
テーブルのCSSデザイン追加
table ってあまり使いたくないけど、簡単だからやっぱり使っちゃうな。
というわけで、CSSデザインサンプルサイトから、いくつか貰って入れてみた。
参考:CSS Design Catalog
現在のWordPressテーマ「ニコニコプレス(春)ver1.3」 の style.css 修正。
blockquote, pre { width:auto; margin:10px; background-color:#f8f8f8; padding:10px; border:1px solid #ccc; border-left:5px solid #ccc; background-image:url(images/block.gif); white-space: pre-wrap; }
7行目追加 ボックス要素の左枠線を太く変更。
blockquoteサンプル
SyntaxHighlighter Evolved 導入
ブログ上でのソースコード表示に便利なJavaScript「SyntaxHighlighter」
色々と種類がある中で、WordPress のプラグインの SyntaxHighlighter Evolved ver2.1.0 を導入。
参考:Bois Creative Homepage 「SyntaxHighlighter 2.0をMovableType4.25で使ってみる」
使い方
コード部分の記述はソースにあった記述で囲う。
<pre class="brush:xml"> </pre>
または、
[php] PHP用ソースコード [/php] [css] CSS用ソースコード [/css] [code lang="js"] ソースコード [/code] [sourcecode language="plain"] ソースコード [/sourcecode] [tag light="true"] ライトモード [/tag]
brush , lang , language にコードの言語を指定します。使用可能言語は下記表参照。
Evolved の場合は、ソースコード内で不等号記号(< >),ダブルクォート("),空白( )などは
エスケープしなくても表記が可能。
上記のように SyntaxHighlighter の書式を書くとき [ ([)と ] (]) はアスキーコードで書く必要がある。
[ ] を使うときは誤変換されないように注意しなければならない。
参考:特殊文字とアスキーコード