‘Tips?’ タグのついている投稿

透過画像 + CSS で色指定

2006 年 9 月 10 日 日曜日

カメレオンアイコン

Lucky bag::blog さんの 背景画像に使える透過 GIF を拝見して。

おお、便利だ、と感嘆しました。色を変えたい部分を透過した GIF 画像を用意して、あとは CSS で色を変えるだけ、というものです。

なんだか似たようなことを知っている気がします。思い出しました。当サイトでも現在使用中です。

現在のテーマでは、記事のカテゴリを画像表示にしています。これは WordPress のプラグイン、Category Image(s) を使って 1実現しているのですが、そこでの画像に SOME RANDOM DUDE さんの Sanscons を使っています。

これは透過画像のアイコンと透過画像の背景画像のセットで、これも CSS で背景画像と背景色を指定するだけ、です。

リンクなどに使うと効果抜群です。JavaScriptでロールオーバー効果を実現するときは画像を2枚用意しなければなりませんが、これなら少なくてすみます。背景画像は使い回せますし。

最初に思いついた人はすごいです。

ではアルファ透過 PNG を使えばグラデーションもできてばっちり、と思ったら WinIE が。ぐむむ。

  1. しばた工務店 Weblog さんのプラグイン Category Image(s)、Tips Community さんのカテゴリー名をイメージアイコンで表示するプラグイン、びんさんのマジかよ〜 さんのCategory-imagesなどで詳しく解説されています。[back]

タグ:, ,
カテゴリー: WWW, WordPress | コメントはまだありません »

ささやかに使い易く リンク編 １

2006 年 7 月 1 日 土曜日

リンク先の文章の言語を表示

ささやかに使い勝手の良いサイトにしてみよう計画その1、リンク編。

英語が果てし無く苦手である私は、ぱっと興味を引かれてクリックした先が英語だとびっくりしてしまいます。訪問者の方にも同じ思いの方がいらっしゃるはず、というわけで IE 以外のモダンブラウザ限定ですがリンク先の文章の言語を表示しています。

方法

えむもじらさんで紹介されていた方法そのままです。

IE は :after 疑似要素にも、属性セレクタにも対応していないので残念ながら表示されません。

いちいち hreflang 属性を指定するのも面倒なので、 Firefox の拡張機能、 Copy URL+ で一発です。

Copy URL+ については

に詳しいです。

user.js に以下を追加。

[code lang="javascript" -0]
user_pref(’copyurlplus.menus.n.label’,'Create Link (English)’);
user_pref(’copyurlplus.menus.n.copy’,’%TITLE%‘);
[/code]

n には数字を入れてください。通し番号になります。

「英語」なのは海外の情報といったところで殆ど英語の情報しか見ていないからです。仏語や独語は読めさえしません。必要ならばそれぞれの言語コードを指定します。

閲覧者の方の「ぎょ」が減ることを願いつつ。うっかり忘れていた場合は笑って許すか突っ込みをお願いします。

タグ:, ,
カテゴリー: WWW | コメントはまだありません »

画像に枠を付ける

2006 年 6 月 26 日 月曜日

枠がついているのが見えますか？

のっけから不思議な画像 1ですみませんが話題は CSS です。サイト制作の時に詰まったこと。

表示されている画像には枠がついていると思いますが、これには紆余曲折があったのです。

枠がつかない

画像に CSS で枠を付けようと思ったので

[code lang="css" -0]
img {
border:1px solid #ccc;
padding:5px;
}
[/code]

という風に書いたのですが、 IE で枠が一向に表示されません。他のブラウザでなら表示されるのですが。

原因解明

IE のバグかなと思ったらやはりバグでした。やはり君はそうなんだね。分かっていたよ、と、どっと疲れた一瞬です。

  • XHTML（XML宣言あり）：　互換モード（この動作はバグです）
  • WinIE6.0互換モード及び5.5以前ではimg要素にパディングが効きません。

この原因はこの二つです。ですが文法的に XML 宣言をしないわけにはいきませんし、困ったなと思ったら、BirDesign さんで IE6以外でのみXML宣言をするPHPコード が公開されていました。

早速いただきまして、事なきを得たと言うことです。

付記

IE のバグには多くの人が悩まされていると思いますが、どうしてあんなにシェアがあるのでしょうか。ため息が漏れます。当サイトの訪問者さんは僅差で Firefox が勝っていますので、頑張ってください。

  1. Gravatar に登録していないで当サイトへコメントを残してくださった際のランダム表示画像にしようと思ったのですが、公開直前にあんまりいけていないと思ったので降格された画像。余談ですが。[back]

タグ:, ,
カテゴリー: WWW | コメントはまだありません »

トップページだけに表示する

2006 年 6 月 25 日 日曜日

初めてテーマを作ったときに詰まったこと。

トップページだけに「ようこそ、このサイトはなんとかかんとか」とどうやれば表示できるのかが分からなかったのです。

index.php に記述すると、2ページ目にも出てきてしまうのです。つまり、ここのサイトであれば http://isaki.net/ にのみ表示させて http://isaki.net/page/2/ では非表示にしたいのです。何か告知するならともかく、ようこそ！　を何度も表示させるのはちょっとお間抜け。

そこで Conditional Tags の出番なのですが。

[code lang="php" -0]

トップページでのみ表示したいこと

[/code]

メインページでのみ表示とありますが、それは次ページ部分も含む様です。一体どうすれば。

答えは K2 のコードを見ていたら分かりました。ああ、なるほど。

[code lang="php" -0]

トップページでのみ表示したいこと

[/code]

home であって且つ paged でない、と言うことらしいです。

逆に、トップページでだけ表示したくないという場合

[code lang="php" -0]

トップページ以外で表示したいこと

[/code]

です。これでナビゲーションを表示しています。

何はともあれ、一件落着。

タグ:
カテゴリー: WordPress | コメントはまだありません »