リンクにtarget=”_blank”を指定してリンクを新しいウィンドウで表示してサイトに訪問者を残しておくようにするサイトは多くなってきています。
リンクをどう開くかは訪問者に決定させる、インターネット倫理の基本原則がある
ダウンロードなどのファイルなどで、PDFドキュメントにリンクするときTarget=”_blank”が最適です。
それは、初めて開く場合にはPDFを読み込むのに時間がかかるからです。
pdfの読み込みの間に、現在のページにある情報をもっと読んでもらうことができる
Target=”new”
ターゲット値に_blankを使用すると、開くたびに新しいページを表示されますが、
_newを指定すると1つの新しいウィンドウが表示され、
その後にクリックされたターゲット値が_newのリンクは全て最初に表示されたウィンドウ上に置き換わって表示されます。
否定疑似クラス「:not」は非常に便利です。
疑似クラスは指定した属性を持っていない要素に対して定めることができます。
:not(p) { padding: 20px; }
p要素ではない要素に適用されます。
「E:not(s)」のEはなくてもいい
Eの部分はあってもなくても構いません。
a:not(:first-child):not(:last-child){
padding: 20px;
}
Eの部分をつける場合:first-childや単純セレクタで要素を指定することができます。
「E:not(s)」のsに入れられるのは、単純セレクタのみです。
単純セレクタとは>や+などの結合子がないセレクタです。なので、sの部分に結合子が入ると動きません。
イメージマップの座標マッピングを自動で行ってくれるサイトがあります。
それがHTML Imagemap Generatorです。
イメージマップを利用することは多くはありませんが、ワールドマップを押したときに、その国のリンクに飛ぶように設定したりなど、利用する機会はあります。
ですが、リンクの形が複雑になるほど、座標マッピングは複雑なものになってしまいますが、HTML Imagemap Generatorなら簡単にできてしまいます。
利用方法は画像をアップロード
↓
短形を描く
円形を描く
多角形を描く
の三つから選んで、座標を指定していくだけです。
固定ページなどでは親をつけたりして、パーマリンクの設定が可能です。
今回はアーカイブページの場合のスラッグのつけ方を紹介します。
register_post_type(
'news',
array(
'label' => 'お知らせ',
'public' => true,
'hierarchical' => false,
'has_archive' => true,
'rewrite' => array('slug' => '親/news'),
'supports' => array(
'title',
'editor',
'thumbnail',
'excerpt'
),
'menu_position' => 1
)
);
‘rewrite’ => array(‘slug’ => ‘親/news’),
rewrite パラメータ
「rewrite => array(‘slug’ => ‘カスタム投稿名’)」と指定すると
「http://ブログのアドレス / 親階層 / カスタム分類のスラッグ / 」でアクセスできます。
固定ページに個別でcssを読み込ませて、別々にスタイルを当てたい場合があります。
そういうときには下記の記述をheader内に書くことで読み込ませることができます。
それ以外のページ共通
ページ外リンクにアコーディオンメニューなどがある場合、アンカーリンクで飛んだ、
リンク先のdiv要素に対してactiveなどのクラス名を付与したりする場合があります。
そんな時下記のスクリプトでクラス名を付与することができます。
IEのバージョンや古いiphoneなどで、テーブルのtd幅を width で指定しても効いてくれないことがあります。
そんなときの対処法です。
その場合tableにtable-layoutのfixedを適用してあげると、指定することのできなかったテーブルの横幅を指定できるようになります。
また、レスポンシブ構築でうまく改行されないといった場合は
word-wrap: break-word;
上記でうまく解決できると思います。
tableは少し癖があって扱いづらいですが、この2つのCSSを知っていれば対処できる場合がるので便利です。
カスタム投稿タイプを作成
カスタム投稿で、親子関係を設定します。
繰り返したいカスタムフィールドのグループを設定、
post_title; ?>
"$child_post->ID", "size" => "thumbnail" )); ?>
"$child_post->ID")); ?>m²
上記のコードで繰り返したいカスタムフィールドを表示できます。
ブラウザ間によって異なりますが、writing-mode: vertical-rl;を指定したときには、
Chrome、Safariは右詰めになります。
Firefoxでは左詰めで表示されます。
tate {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
行間を設定したい場合、line-heightで設定します。
text-indent。1em（1文字分）下げれば、縦書きにはピッタリです。