nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

CSS(ie8 非対応)

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。

 

リンクの周りの点線(or線)を消す

リンクをクリックしたときにでるまわりの点線?
IEやFirefoxで表示される。これを表示させたくない場合は

とすると消せるそうなんですが、tabキーを使ってリンクを移動している人たちにとっては、その点線が見えないと、どこを移動しているかわからないのでとても不便だそうです。

ただイメージマップ(クリッカブルマップ)のリンクには、スタイルシードだけでは効かなかったような。。。
(未確認)
その場合は、アンカーにonfocus属性を追記すると消えます。

 

jquery無しCSSのみの縦型ドロップダウンメニュー

アニメーションがなくても良い場合はcssだけドロップダウンメニュー作れます。

HTML

CSS

サンプルHTML

http://shibamaru.s602.xrea.com/demo/vertical_dropdownnav.html

 

 

IEで動作確認していないので崩れているかも・・・・

Advanced Custom Fields 値の文字数を指定する

Advanced Custom FieldsはWordPressでカスタムフィールドを使うなら必ずと言っていい程使うプラグインです。

http://www.advancedcustomfields.com/

基本的な使い方は

画像の場合(画像ID):

テキストを文字数を指定して表示したいときは、mb_substrでできました

 

36文字を表示します。

 

こちら参考に

http://www.studio-rubbish.com/archives/251

トップページにカテゴリごとの記事を表示する

$categories に 表示させたいカテゴリのIDを入れる

for で カテゴリー分処理を繰り返す。

 

query_posts で特定のカテゴリを表示する

 特定のカテゴリを除外する

カテゴリIDをマイナスで表示する

カスタム投稿タイプの記事を表示する

カスタム投稿タイプinfo の記事を5件表示する

複数のカスタム投稿タイプの記事を表示する

カスタム投稿タイプ post , info , topics の記事10件を表示する

投稿タイプを変更できるプラグインConvert Post Types

結構便利だったので。

通常の投稿で投稿していた記事を、カスタムポストに変更したかったので一括で変更できるプラグインを見つけました。

Convert Post Types

https://wordpress.org/plugins/convert-post-types/

WordPress › Convert Post Types « WordPress Plugins

 

使い方は簡単でした。

インストール後、ツール->Convert Post Types

左側のConvert from…から変更 元の投稿タイプを選び、右側のConvet to…に変更先の投稿タイプを選択します。

カテゴリを限定してコンバートも出来るみたいです。
カテゴリや、タグも一緒に変換したい場合は、チェックを入れます。

Convert Post Types ‹ 格安スマホ・格安SIMを比較   スマトク — WordPress

簡単にできました!

便利ですな〜

wp_QueryについてわかりやすいSlideShare

slide share で見つけたスライド(?と言うんでしょうか)が初心者向けでわかりやすかったので。

PHPの超基本もあります。

脱コピペ!デザイナーにもわかるPHPとWP_Query

[slideshare id=25783103&doc=2013wordfesphp-130831162927-phpapp02]

 

こちらの記事も興味ありましたので

WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する

[slideshare id=15862377&doc=20130105wordbench-130105005205-phpapp01]

wordpress カテゴリーの記事

wordpressで特定のカテゴリーのエントリー記事、最新10件を一覧を表示したい。

cat=カテゴリーID

除外したいカテゴリーを指定したい場合は、マイナスをつける

カテゴリーID:2のカテゴリーを除外する

query_postsを使ったら

<?php wp_reset_query(); ?>

する。

WordPress 記事3件ごと、4件ごとに〜する

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね

ちゃんとプログラムを理解している人ならすごく簡単なことだと思うのですが、ノンプログラマの私には毎回戸惑います。

なのでこれを機会にあらためておさらいを。

通常の記事ループ

4記事ごとにdivで囲みたい

$hoge = 1;

ループの回数を入れる変数

$hoge % 4 == 1 && $hoge != 1

4で割った余りが1で、かつカウンターが1(最初)でなければdivを閉じて次のdivタグを出力 します。

$hoge++;

ループ回数を1つ増やす。

 

 

参考にさせてもらった記事

[解決済み] [閉] 記事を決められた数毎にタグ(div等)で囲みたい
http://ja.forums.wordpress.org/topic/1101

WordPressのエントリーを横並びにしてぴったり揃える
http://www.webopixel.net/wordpress/140.html

web pixelさんではoverflow:hidden を使ってcssだけで横並びする方法も記載せれています。

久しぶりのIE7 バグ

最近はIE7は動作対象からはずすことが多くなったので、忘れていた(知らなかった?)バグに遭遇。備忘録として残します。

 

その1: floatした要素の中身が表示されたり、されなかったりする。

cssでdt,ddを横並びさせます。

こんな感じで設定してたのですが、IE7で見ると、2番目のdtの中の要素が
消えている!

いつものようにググってみたら、同じ症状ではないですが、参考になるサイトを見てやってみたら表示されました。

それは、消えた要素の親要素にwidth:100%を指定するということです。
height:1px;でもいいみたいです。

私の場合は、width:100%;を指定したら解決できました!

floatした際に背景が消える件(IE編)
http://blog.webcreativepark.net/2007/01/08-231453.html

 

その2:インライン要素の上下のボーダーが消える

どうも、高さが親要素の高さを超えているのが原因らしいです。

これも解決方法みつけました!

消えるインライン要素に

を加える方法。

参考になりました。ありがとうございます!

インライン要素に指定したパディングやボーダーの上下が消えるhttp://pentan.info/stylesheet/bug/winie046.html

 

今さらながら勉強になります。。。。