タグ

ブックマーク / www.koikikukan.com (9)

  • リストマークの画像のずれを修正する

    サイドバーメニュー等の先頭のマーク(マーカー)表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり(テンプレートでは数ヶ所の指定で済みますが)、ページサイズにも影響します。 ということで、マーク表示にはCSS・リスト形式(li)の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで li { list-style-image: url(hogehoge.gif); } と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです(サンプル1)。 サンプル1 これ

    リストマークの画像のずれを修正する
  • リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」

    XHTML の文法チェックには Another HTML-lint gateway や、The W3C Markup Validation Service が有名ですが、そのサイトに行かなければならないのがやや面倒という方に、リアルタイムに XHTML を検証できる Firefox 機能拡張「Html Validator」を紹介します。 「Html Validator」は、XHTML のバリデーション以外に、アクセシビリティのチェックや、ソースコードのクリーンアップ(ソースの自動修正)まで行ってくれるスグレモノで、Firefox ユーザにはポピュラーな機能拡張のひとつです。 すでにご利用の方も、記事後半にデフォルト設定以外の項目について詳細に記しておりますので、より活用できるのではないかと思います。 以下、Firefox をご利用でない方向けに、Html Validator のインストール

    リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」
    mooiboom
    mooiboom 2007/06/20
    以前入れてたけど使いこなせてなかった。。。
  • 小粋空間: サイドメニューの折りたたみ for FC2 ブログ

    FC2ブログでのサイドメニューの折りたたみカスタマイズを紹介致します。 いつもであれば、当サイト配布のテンプレートをサンプルに説明するのですが、「他のテンプレートで折りたたみカスタマイズは利用できないでしょうか?」というご質問を頂きましたので、ここでは共有テンプレートの「do_qp_dot_3c」を例に説明します。 このカスタマイズを行うことで下記のような折りたたみを行うことができます。 なお、当サイトで配布している FC2 ブログテンプレートの折りたたみについては下記のサイトで公開されています。 showry's Blog:FC2ブログでサイドメニュー折りたたみスクリプト導入 注:ここではプラグインを例に説明してますが、プラグイン以外のものも、「タイトル(を括るタグ)」+「メニューリスト(を括るタグ)」というHTMLマークアップになっていれば、何でも折りたためます。 1.折りたたみスクリ

    小粋空間: サイドメニューの折りたたみ for FC2 ブログ
    mooiboom
    mooiboom 2007/06/03
    プラグインじゃないとだめかなあ?要確認。
  • 新着エントリーに New マークを表示する for FC2ブログ

    エントリーリストの新着エントリーに「New!!」というテキストや画像を表示するカスタマイズです(スクリーンショットは完成イメージ)。 「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像をエントリーリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。 Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。 動作はエントリーの投稿時間を span タグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像に置き換えて表示するという仕組みです。 1.テンプレートの修正 テンプレートに

    新着エントリーに New マークを表示する for FC2ブログ
    mooiboom
    mooiboom 2007/05/20
    これ知りたかった・・・。試す。
  • 月別アーカイブリストのプルダウンメニュー for FC2ブログ

    FC2ブログで月別アーカイブリストをプルダウンメニューにするカスタマイズです。 プルダウンメニュー化のカスタマイズは他でも紹介されていると思いますが、当サイトのセールスポイントはプルダウンメニューの選択状態を保持できることです。またシンプルな1カラムレイアウトで運用する場合、月別アーカイブのプルダウンメニューが大変便利です。 ということで、ここでは下記の3項目に分けて説明します。 基設定 選択状態を保持する 公開テンプレートの1カラムレイアウトでの設定 1.基設定 プルダウンメニューを選択すると、即座に月別アーカイブジャンプする設定です。 リスト1.1のHTMLタグおよびスクリプトをそのままサイドバーに貼り付けてください。赤色部分はメニュータイトルですのでご自由に変更してください。 リスト1.1 HTMLとスクリプト <script type="text/javascript"> <

  • コメントリストを記事別にまとめて表示する for FC2 ブログ

    コメントリストを記事別にツリー化するカスタマイズです。今のところFC2ブログのみで確認していますが、後述するタグの構成が同様であれば他のブログでも適用可能と思われます。またトラックバックリストにも適用可能と思いますが当方では動作未確認です。 カスタマイズを行うことで下記のスクリーンショットのように記事別にコメントをまとめ、さらにツリー化カスタマイズと組み合わせることも可能です。ここでは公開テンプレートを例に使用していますが、コメントリスト・トラックバックリストのタグ構成が同じであれば他のテンプレートにも適用可能です。 カスタマイズ前 →カスタマイズ後 動作は Windows2000/XP の IE/Firefox/Opera で確認しています。急いで作ったのでα版という位置づけでご利用ください。 1.コメントリスト用タグの変更 下記のタグをテンプレートに貼り付けます。 <div class

    コメントリストを記事別にまとめて表示する for FC2 ブログ
  • FC2ブログテンプレート

    FC2ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましてはエントリーの解説を参照ください。 FC2ブログではサービス内に「共有テンプレート」というコーナーがあり、そちらに数多くのテンプレートが登録されていますが、メンテナンスを考慮してとりあえずこのサイトでのみの公開とさせて頂きたいと思います。 FC2ブログの登録および当サイトの公開テンプレート設定方法については下記の記事を参考にしてください。 FC2ブログ登録方法 FC2ブログでのテンプレート設定方法 1.動作確認環境 動作確認は下記の環境で行っています。 OS:Windows2000/XP ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5 FCブログ:http:

    FC2ブログテンプレート
    mooiboom
    mooiboom 2007/05/20
    お借りするかも。
  • XHTML の「タグ」と「要素」の違いと正しい使い方

    先日公開した XHTML タグ一覧表示ツールの中の説明で、「<br /> は空タグではありません」というご指摘を頂きました。勉強不足だったことを反省して、改めて XHTML の「タグ」と「要素」の違いや使い方について調べてみました。 まず、W3C で公開されている「XHTML 1.0」の仕様は下記です。 XHTML? 1.0 The Extensible HyperText Markup Language (Second Edition) XHTML? 1.0: 拡張可能ハイパーテキストマークアップ言語 上記の「4. Differences with HTML 4(HTML4との相違点)」に Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must

  • XHTML タグ一覧表示ツール

    下に表示されている XHTML タグをクリックすると、その下にある枠内に、 正しいマークアップ 使用可能な子要素(または親要素) 使用可能な属性 が表示されます。XHTML タグを記述する際、「このタグの書き方は?」「このタグの子要素(または親要素)には何が書けるの?」と思ったら使ってください。元データは Another HTML-lint のタグ一覧を利用しています。 クリック表示 マウスオーバー表示 属性表示 XHTML 1.0 Transitional [ 閉じる ] <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgr

  • 1