【WEB】

カテゴリー表示モード：標準 | RC2

WEB カテゴリーアーカイブ

Sleipnirプラグイン：Hawkeye を使ってみる。

2009 年 6 月 10 日 – 05:36

少し前まではSleipnir を使ってたけど、Firefox のレンダリングが早くてアドオン機能に強力なものが多く使い慣れたので、web構築もずっとFirefoxで確認作業をやっていた。
ふと、アドオンの IE Tab でレンダリングエンジンををIEに変えてこのサイトを確認したら、サイドバーがずれたりいろいろと崩れていてもう･･･
FirefoxにはFirebugという非常に強力なウェブ開発補助ツールがあるが、IE Tab で エンジンをIEに切り替えてしまうと使えない。
こうなるとIEで地道にデバッグしないといけないのがメンドクサイ･･･
どうしたものかと、IEで使えるツールを調べた。
続きを読む

投稿者：Renpre | コメントは受け付けていません。 | Software, WEB |

WP lightbox 2 導入

2009 年 6 月 10 日 – 02:06

Lightbox とは JavaScript を使って画像をポップアップでオーバーレイ表示させるスクリプトです。
Lightbox には多数の派生版が公開されているが、今回は導入と利用が一番簡単なWordPressのプラグイン版、「WP_lightbox2」 ver.0.6.3 を入れてみた。
インストール方法はプラグインなのでUPして有効にするだけの簡単設計。
参考：BirDesign「Lightbox v2.0 WordPressプラグイン版」

サンプル

パスタの湯きり失敗

パスタの湯きり失敗


例1）サムネイルをクリックすると元画像表示
通常のLightboxは、アンカータグに「rel=”lightbox”」を付ける必要があるが、このプラグインは画像のアンカー全てに自動で適用される。



エスカルゴのパック（2枚）

エスカルゴのパック（2枚）



例2）複数の画像を左右でスライド表示
まとめる複数の画像のアンカーに、
「rel=”lightbox[適当な分類名]“」を入力。
例のように2枚目以降のサムネイル画像はimgタグを消してアンカーだけにするもよし、そのままでサムネイルから関連する画像へリンクしているように見せるのもいいかもしれない。


このバージョンでは、設定等一切無くシンプルな代わりに、オーバーレイ表示したときに画像のタイトルやらキャプションなんかは表示してくれないが、簡単だからまあいいか。

投稿者：Renpre | コメントは受け付けていません。 | JavaScript, WordPress |

コメント欄のカスタマイズ

2009 年 6 月 9 日 – 11:19

コメント表示のカスタマイズニコニコプレス(春)ver.1.3 のコメント表示を少しだけ自分好みにカスタマイズ。
コアを弄らなくても comment_author_link の分岐を functions.php とかに別に作れそうだけど、思ったとおりに動くものが作れなかったので、強引に弄ってみた。

続きを読む

投稿者：Renpre | コメントは受け付けていません。 | CSS, WordPress |

テーブルのCSSデザイン追加

2009 年 5 月 21 日 – 03:07

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サンプル

続きを読む

投稿者：Renpre | コメントは受け付けていません。 | CSS, WEB |

SyntaxHighlighter Evolved 導入

2009 年 5 月 20 日 – 13:16

ブログ上でのソースコード表示に便利な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 の場合は、ソースコード内で不等号記号（&lt; &gt;），ダブルクォート（&quot;），空白（&nbsp;）などは
エスケープしなくても表記が可能。
上記のように SyntaxHighlighter の書式を書くとき [ （&#91;）と ] （&#93;） はアスキーコードで書く必要がある。
[ ] を使うときは誤変換されないように注意しなければならない。
参考：特殊文字とアスキーコード

続きを読む

投稿者：Renpre | コメントは受け付けていません。 | JavaScript, WEB, WordPress |