-
パンくずリストの構造化マークアップ
「パンくずリスト」は昔からあるものなので、慣れ親しんでいるものですが、これに「構造化マークアップ」が加わると重圧感が滲み出てくるような。もっとも「構造化マークアップ」も Google さんが以前から推奨していますけどね。 但し、当オフィスでは、パンくずリストを設置したサイト構築はあまり受けていませんでしたので、この度、受けてしまったことから、「パンくずリストの構造化マークアップ」の方法を改めて調べました。結果は、そんなに難しいものではないです。 構造化マークアップしていないパンくずリスト 構造化マークアップしたパンくずリスト パンくずであることを「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」で示し、リンク先を「itemprop=”url”」で、アンカーテキストを span で囲い「itemprop=”title”」で指定する。 最後は、Google さん提供の「構造化データテストツール」でチェックし問題なければ OK。 [mokurenCB]
-
CSS で蛍光ペンのようなマーカー
文章で一部分を強調させたい場合、テキストを赤くするデザインや太字にするデザインをよく見かけますが、それ以外に蛍光ペンで塗られたようなデザインを見ることがあります。例えば「こんなの」です。 この CSS は以下の通り。 60% の値を小さくすると太くなり、大きくすると細くなります。 上記の元ネタはこちら [mokurenCB]
-
Font Awesome の使用方法
空タグの使用は避けたいと考えているのに i の空タグを使う例ばかりで。。。 header に挿入 バージョンは注意！ HTML部分 CSSで指定 Unicode の一覧はこちら サンプル コンテンツ01 コンテンツ02 コンテンツ03 [mokurenCB]
-
input=”file” のデザインを変更する簡単な方法
Javascript は使いません。HTML と CSS だけです。 HTML CSS サンプル 参照 変更前 ブラウザのデフォルトデザインです。 [mokurenCB]
-
CSS で 偶数・奇数・n番目の指定
調べるとたくさんヒットするのですが、使うときに毎回 Google を検索しているので、よく使うものを載せておきたいと。 最初を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 最後を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 偶数を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 奇数を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 上からn番目を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 下からn番目を指定 1番目 2番目 3番目 4番目 5番目 6番目 7番目 上から3の倍数番目を指定 1番目 2番目 3番目…