タグ

WEBデザインとリストに関するqzk05715のブックマーク (4)

  • 2011年のSEOで、これはもう避けておきたい32のチェックリスト

    Googleをはじめとする検索エンジンに対して、サイトを最適化する際に気をつけるべき32のチェックリストを紹介します。 32 SEO Tactics to Avoid in 2011 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに あなたは2011年を迎え、SEO用の膨大なリストをもっていることでしょう。ここで紹介するものは、あなたがやるべきではない32のチェック項目を知ることで、あなたのリストを少なくすることです。 2011年のタスクに下記のリストが残っているのであれば、どうぞそれらを消してください。 Hiding Stuff On-Page 隠されたテキストやリンクはGoogleが最も嫌う存在です。これらは最悪の場合、ペナルティが与えられることがあるので使用は避けてください。 白い背景に白いテキスト 画像の上に隠したテキスト CSSを使って隠したテキスト 極小サイズ

  • [CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

    階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

  • MT5 関連覚え書き:+Chip(プラスチップ)

    これからMT5を調整して行く中での覚え書きを、ここにまとめて行く予定。 いきづまったときの解決法や参考にさせていただいたサイトなど、書き残しておかないとすぐに忘れてしまうので・・・。 と思ったら、パンくずリストのソースを公開されているサイトさまがあったので、一部を有り難く使わせていただきました。 ・Movable Type でパンくずリストを自動で設置する方法 http://lem-on.net/2008/11/movable-type.html ※その後、MT5用に試行錯誤しながら作ってみました。 →MT5 共通で使えるパンくずリストを考えてみた ◎カテゴリの並び替え カテゴリを自分の考えている順番で表示させたい。 でも、できればプラグインは使いたくない。 と思っていたところ、こちらのサイトさまに解決法が。(カテゴリーの説明欄を利用する) ・MTカテゴリーの表示順変更、プラグインを使わ

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

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

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