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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

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

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

WordPressで子テーマを使うには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

DreamweaverにEmmetを入れてみたよ

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

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

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

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

のように記述します。

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

html

css

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

html

css

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

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

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

というかですね。

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

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

その昔は

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

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

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

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

サンプルがこちら。

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

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

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