cssでaタグを無効にする

liタグaタグでメニューを作っているような時、ある状態の時だけリンク無効にしたい。という要望がよく来る。

jsとか使ってもいいんだけど、面倒だしcssだけできることが多いのでcssでごまかし対応。


◆カーソルをノーマルカーソルにするだけ
    cursor: default;


◆メニューを無効っぽく見せる
背景画像の時には
opacity:0.5; filter:alpha(opacity=50);で薄くしたり、 無効時の薄い画像を作って background-positionでずらして表示。

◆cssの機能でaタグイベントを無効に
pointer-events:none; 　で無効にする。ただしcss3なので、IE6-8とかでは効かない。

これらを上手く組み合わせて無効っぽく見せる。

【コネタ】GoogleMapの吹き出しを消す

GoogleMapの吹き出しの消し方、色々ありますが、簡単で適当でいい場合のやり方。

1.GoogleMapで表示したい場所をまず普通に表示。
2.吹き出し置きたい場所で右クリック

3.座標が検索窓に出るので、それに続いて半角()で表示したい名前を入力

4.その状態で検索ボタンクリック。名前入りの吹き出しが出るようになる（もう1個なぞのポイントが出てるけど最終的に出ないので気にしない）

5.リンクマークで埋め込み用コードをコピー。必要な所にペースト。

6.完成。

7.ただこのまま貼ると最初は吹き出しがデカいため上に隠れてしまうし、しかも座標が出てるので、クリックした時だけ出す程度にしたいな、って場合、吹き出しを初期状態で隠しておいてもいいかも。
◆初期状態でGoogleMapの吹き出しを出さない
</iframe>の手前、output=embedの後に　&amp;iwloc=B　を追記。

【WordPress】古いテーマをカスタムメニューに対応させるように変更

WordPressの古いテーマなど、カスタムメニューに対応してないものがあるので、使用できるように変更する場合の簡単な手順。

◆global、utility、footerのカスタムメニューを追加して使用できるように設定変更。◆

・function.php を開き、以下を追加のようなものを追加。
この場合、グローバルメニューとサブメニューとフッターの3種類使えるようになる。


//カスタムメニュー
register_nav_menus(
    array(
    'place_global' => 'グローバル',
    'place_utility' => 'ユーティリティ',
    'place_fotter' => 'フッター',
    )
);

※上記の 'place_global' => 'グローバル',　の補足、
place_global：どのようなidでテンプレート内に書くかという定義。
グローバル：WordPressテーマのカスタムメニュー設定の所に表示される文字。

もちろん、両方何でもいいけど後で分かりやすいものを指定。


・header.php、footer.phpファイルに以下を追加。
もともとあるはずのベタ張りメニューは消すかコメントアウト。
このコードを埋め込むと、その場所にカスタムメニューの部分が出力される。

●header.php
<?php wp_nav_menu(array(
    'container' => 'nav',
    'container_id' => 'global-nav',
    'theme_location' => 'place_global',
    ));
    ?>

●footer.php

<?php wp_nav_menu(array(
    'container' => 'footer',
    'container_id' => 'global-footer',
    'theme_location' => 'place_footer',
    ));
?>

【WordPress】[プラグイン]パンくずリスト

WordPressの追加プラグイン。

パンくずリストを出すやつです。WebDesigningで知りました。


Breadcrumb NavXT
http://mtekk.us/code/breadcrumb-navxt/



 プラグインを追加した後、ページのパンくずリストを評させたい場所に、以下を追加。

<?php
 if(function_exists('bcn_display')){
 bcn_display();
}
?>

【コネタ】PDFの画像を抽出（キャプチャ方式）

PDFファイルから画像というか、部分をキャプチャして取り出す方法

※AdobeReaderでも可能

◆使うメニュー：スナップショットツール

◆前準備
メニュー＞編集＞環境設定＞一般　□スナップショットツール画像に固定解像度を使用
を350とかにしとく。
印刷に使えるようにするためだけど、その解像度が元のPDFにあると思えないので気休め程度と思われる。

◆肝心のツールの場所なんだけど、普段どこに出てるものなのか分からない。
メニューのツールバーのところにカメラのマークが出ている場合はそれをクリック。
出ていない場合は、ツールバーを右クリック　編集＞ スナップショット　を選択

ツールバー　スナップショットツール

 ◆必要な箇所をドラッグすると、青く囲われ、ダイアログが出る。

スナップショットツールで領域を囲うとコピーされたというダイアログが出る

◆あとはPhotoshopなどに貼り付ければOK。

印刷にそのまま使えるかどうかというとやっぱりあやしい。
とりあえず適当でもいいから画像を取り出したいと言う場合に。

【CSSハック】IE7のみに適用

IE7のみに適用したいcssハック　記述

適用したいcssの前方に　*:first-child+html　を追加する。

例：
*:first-child+html .floating-box input[type="button"] {/*for IE7*/
    padding-left: -30px;
 }



IE7はIE6よりかはマシだけど、中途半端にcssが適用されたりしてレイアウト崩れが頻発しやすい感じがする。
あと、基本Vistaの人が使ってるから、シェア少なくなってきてるのでそろそろ考えなくてもいいかも？

【CSSハック】IE6以前に適用

IE6以前（5.5なども含む）にのみ適用されるCSSハック　記述法


適用したいcssの前方に　* html 　を記述。



例：
* html .leadBox {
　　margin:5px
}

IE6はそろそろ考えなくてもいいかな。さすがに。