Categories
HTML+CSS SEO対策

パンくずリストの構造化マークアップ

「パンくずリスト」は昔からあるものなので、慣れ親しんでいるものですが、これに「構造化マークアップ」が加わると重圧感が滲み出てくるような。もっとも「構造化マークアップ」も Google さんが以前から推奨していますけどね。

但し、当オフィスでは、パンくずリストを設置したサイト構築はあまり受けていませんでしたので、この度、受けてしまったことから、「パンくずリストの構造化マークアップ」の方法を改めて調べました。結果は、そんなに難しいものではないです。

構造化マークアップしていないパンくずリスト

<ol>
<li><a href="/">HOME</a></li>
<li><a href="/sample/">第一下層</a></li>
<li>第二下層</li>
</ol>

構造化マークアップしたパンくずリスト

<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li><a href="/" itemprop="url"><span itemprop="title">HOME</span></a></li>
<li><a href="/sample/" itemprop="url"><span itemprop="title">第一下層</span></a></li>
<li>第二下層</li>
</ol>

パンくずであることを「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」で示し、リンク先を「itemprop=”url”」で、アンカーテキストを span で囲い「itemprop=”title”」で指定する。

最後は、Google さん提供の「構造化データテストツール」でチェックし問題なければ OK。

[mokurenCB]

Categories
HTML+CSS

CSS で蛍光ペンのようなマーカー

文章で一部分を強調させたい場合、テキストを赤くするデザインや太字にするデザインをよく見かけますが、それ以外に蛍光ペンで塗られたようなデザインを見ることがあります。例えば「こんなの」です。

この CSS は以下の通り。

.markerPink{ background:linear-gradient( transparent 60%, #f9f 60% ); }

60% の値を小さくすると太くなり、大きくすると細くなります。

上記の元ネタはこちら

[mokurenCB]

Categories
HTML+CSS ホームページ制作・作成

Font Awesome の使用方法

空タグの使用は避けたいと考えているのに i の空タグを使う例ばかりで。。。

header に挿入

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

バージョンは注意!

HTML部分

<ul id="faSample">
<li id="ic01">コンテンツ01</li>
<li id="ic02">コンテンツ02</li>
<li id="ic03">コンテンツ03</li>
</ul>

CSSで指定

#faSample li:before{
 display:inline-block; /* テキストの縦の並びを揃えるため */
 width:1em;
 margin-right:3px;
 font-family:'FontAwesome';
 color:#999;
}
#ic01:before{ content:'\f17a'; }
#ic02:before{ content:'\f179'; }
#ic03:before{ content:'\f17b'; }

Unicode の一覧はこちら

サンプル

  • コンテンツ01
  • コンテンツ02
  • コンテンツ03

[mokurenCB]

Categories
HTML+CSS ホームページ制作・作成

input=”file” のデザインを変更する簡単な方法

Javascript は使いません。HTML と CSS だけです。

HTML

<label class="file"><div>参照</div><input type="file" name="upf"></label>

CSS

.file input{ display:none; }
.file div{ cursor:pointer; border:1px solid #ccc; padding:6px; text-align:center; width:50%; }
.file div:hover{ background:#c00; color:#fff; }

サンプル

変更前

ブラウザのデフォルトデザインです。

[mokurenCB]

Categories
HTML+CSS ホームページ制作・作成

CSS で 偶数・奇数・n番目の指定

調べるとたくさんヒットするのですが、使うときに毎回 Google を検索しているので、よく使うものを載せておきたいと。

<ul>
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
</ul>

最初を指定

li:first-child{ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

最後を指定

li:last-child{ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

偶数を指定

li:nth-child(even){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

奇数を指定

li:nth-child(odd){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

上からn番目を指定

li:nth-child(3){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

下からn番目を指定

li:nth-last-child(3){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

上から3の倍数番目を指定

li:nth-child(3n){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

[mokurenCB]