WordPressで古い記事ですよ~な注意喚起的なメッセージを表示してみる

ありがたいことに、CSSの技術系記事にアクセスが多いこのブログなのですが、いかんせん記事が古いものが多く、アクセス解析見るたびに心苦しい気持ちになっていたので、古い記事に注意喚起促すメッセージを表示してみました。

以下を個別記事テンプレート(single.php)の表示したい任意の場所に。

CSSの雑さもさらしておきます。

↓こちらのサイトを参考にさせていただきました。ありがとうございます。
https://www.nxworld.net/wordpress/wp-display-message-on-old-posts.html

WordPressで子テーマを使うには

WordPressのテーマを編集するのに常識だと言われている子テーマ…。ちまたでは常識だそうですが、さっぱり使ってませんでした。
ちょっと思うところがあって、子テーマ使おうとゴニョゴニョしたのでメモメモ。
続きを読む WordPressで子テーマを使うには

DreamweaverにEmmetを入れてみたよ

お便利で絶賛私も使っておりますZen-Codingがいつの間にかEmmetって名前に変わってました。知らんかった…。
個人的にZen-Codingって名前のが好きなんですが、さらにお便利になっていると聞きつけて早速Dreamweaverに入れてみましたのでその流れを覚書。ちなみにDreamweaver CS5.5でのインストールの流れになります。
続きを読む DreamweaverにEmmetを入れてみたよ

IE8でfloatした画像が消えるっていう件

とりあえずIE爆発しないかなー…(´・ω・`)

仕事で作ったサイトの一部がIE8で見ると消えてました。
↓な感じで。
バナーを並べて背景に色が入ってます。
20131106

で、調べて色々やってみて解決したっぽいのでその覚書を。

続きを読む IE8でfloatした画像が消えるっていう件

CSSで特定の部分を印刷しない設定にするには

CSSで特定の部分を印刷したくない場合が多々あります。
そんなときに@media print。なんという魔法の言葉か。

例えばtestというidをふった部分を印刷したくない場合は、

のように記述します。

画像にマウスオーバーした時、CSSで半透明の白を乗せる方法

画像にリンクしてマウスオーバーした時に、CSSで画像に半透明の白を重ねたいなーと思い色々と試してみました。
以下がそのサンプルですが、実際には半透明の白を重ねているわけではなく、画像の透明度を変えて表現しています。

背景が白だと、透明度変えるだけなのでいいですね。

html

css

で。背景が白の場合は↑の書き方でいいのですが、背景が白でない場合は画像の透明度を変えても半透明の白が乗ったようにならないので、
aタグにクラスを付けて、背景に白を設定します。

html

css

ここで大事なのがaタグのCSSに設定してる display:block; 。
これが無いと画像サイズ一杯に指定した背景の白が広がりません。

ということで、サンプルがこちらです。

listをdisplay:inlineで横並びにするとリストマークでないんだね!

タイトルのまんまですが、でないんだね!知らなかった!

というかですね。

私、ずっとlistの横並びはfloatでやってたんですよね。で、display:inlineもまぁそれなりに使いやすいんじゃないかってことで使い始めたんですけど、そうか、リストマーク出ないのかぁ!これは盲点。なんで出ないんだろうとウンウン唸っておりました…。勉強不足だで…。

マウスオーバーした時に画像をCSSで置換

画像の置換、何かと使いますね。
バナーだとかボタンだとか。マウスオーバーした時に、ちょっと色が明るくなったりするだけで、見栄え違いますもんね。

その昔は

こんな書き方をしてました…。よろしくないですね…我ながら…。

ということで、CSSでの書き方をめもめも。

画像は最初から表示しておく画像と置換後の画像を一つにまとめたものを作らねばなりません。
20121225
↑こんな感じに。

overflow:hiddenで余計な部分を非表示にして
マウスオーバーした時に、上の方に画像を移動させると。>margin-topで

サンプルがこちら。

IE6、7で見出し(h1とか)の下に謎の隙間が出来る件

IE6と7に爆発してほしい今日この頃( ´∀`)
IE6、7で見出し(h1とか)の下に謎の隙間が出来るなんて…てっきりmarginなんだろうなーって思ってたらなんか違うんですよね。
で、まさか見出し下に隙間出来るとかあるわけ…(Google先生で検索)…あったよ( ゚д゚)
続きを読む IE6、7で見出し(h1とか)の下に謎の隙間が出来る件

リストマークのずれを解消する

大概ずれるんですよね、リストマーク。
画像素材の作り方が甘いんでしょう(´・ω・`)

なのでlist-style-imageを使わずにliの背景にリストマークを指定する方法を使うわけなんですが…。
続きを読む リストマークのずれを解消する