web

うわー、気づいたら今…

うわー、気づいたら今作成してるワードプレスblogの投稿がついったーに投稿されてる、どこでoffにすんだろう

コンディショナルコメント、IE用に指定するアレ

IE大嫌い
けれど、どんなにみんなに叩かれても「そんなに文句いうならお前が作ってみろよ!」と言い出したりしないところは評価してる。
まぁだからってIE大嫌いに変わりはない。

さて、コンディショナルコメントというものがあります。
このブログにも使ってみました。
IEにだけ読み込ませたり、読み込ませなかったり、IEのバージョン毎に読み込むものを変えたりできるアレです。
[20090916修正]
続きを読む

横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せる

これ、何故にいままで全く思いつかなかったのかが不思議でならない。

たとえば以下のような配置をしたくなる時があります

20090718_1

上記画像は、横幅380pxの親ブロックの中に、横幅120pxのサムネイル画像を均等配置で3個入れてあります。
のでサムネイル毎の間隔は10pxかな。

そしてそれをコーディングする時、いままではこんな感じで書いてたとします
html部分

[html]
<dl>
<dt><img src="メイン画像までのパス" alt="メイン画像" /></dt>
<dd>
<ul>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li class="last"><img src="サムネイルまでのパス" alt="サムネイル" /></li>
</ul>
</dd>
</dl>
[/html]

css部分(余計な指定はすでにリセットしてあるとして)

[css]
dl{
width:380px;
}
dt{
margin-bottom:10px;
}
li{
float:left;
display:inline;
margin-right:10px;
}
li.last{
margin-right:0;
}
[/css]

こんな感じで、liの最後に適当なclassをつけてmarginをリセットしてたんですよ。
これだと余計なclassをhtmlに書かなきゃならなくて、美しくないし面倒だなぁと思いながらも。

しかしさっきおや?と思ったわけです
右にmarginをとっていたけど、これ左にしたらどうだろう?と発想を変えてcssを

[css]
ul{
margin-left:-10px;
}
li{
float:left;
display:inline;
margin-left:10px;
}
[/css]

こうしてみたら
.lastが必要なくなったアアアア

って話。

続きを読むがどこにあるか

wordpressで[続きを読む][more…]みたいなのはどうやるんだろう?と思っていた

発見した

moreタグを挿入

こんなところに

syntaxhighlighter

syntaxhighlighter
http://wordpress.org/extend/plugins/syntaxhighlighter/
[sourcecode language=”html”]
<html>
<head></head>
<body></body>
</html>
[/sourcecode]
[html language=”true”]
<!– tracker added by Ultimate Google Analytics plugin v1.6.0: http://www.oratransplant.nl/uga –>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src=’" + gaJsHost + "google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
pageTracker._initData();
pageTracker._trackPageview();
</script>

[/html]

SyntaxHighlighter Settings

Display line numbers.
行番号を表示してください。

Display the toolbar.
ツールバーを表示してください。

Automatically make URLs clickable.
自動的にURLをクリック可能にしてください。

Collapse code boxes.
コード箱を潰してください。

Show a ruler column along the top of the code box.
コード箱の上部に沿って定規コラムを示してください。

Use the light display mode, best for single lines of code.
コードの単線に軽い表示モード、ベストを使用してください。

Use smart tabs allowing tabs being used for alignment.
整列に使用されるタブを許容する賢いタブを使用してください。

Wrap long lines, using an icon to show where line.
長い系列を包装してください、そして、どこかを示しているのにアイコンを使用して、立ち並んでください。

wraps occur (disabling this will make a scrollbar show instead)
機密は起こります(これを無効にするのはスクロールバーを代わりに目立たせるでしょう)。

Additional CSS Class(es) / 追加CSS Class
に適当なclass名をつっこんだんだけど
pre class=”brush: xml;みたいな箇所に追加されてない、どうやって使うんだろう。

仕方ないので大本のcssを編集する
wp-content\plugins\syntaxhighlighter\syntaxhighlighter\styles内に
Color Theme毎のcssが入ってた。

  • shCore.css
  • shThemeDefault.css

のバックアップをとって編集する。
続きを読む