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

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

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

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

のように記述します。

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

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

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

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

html

css

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

html

css

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

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

WordPressで取得する投稿の数を設定する $numberposts

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

メモ。Wordpressで取得する投稿の数を設定するには、

デフォは5件でるようになってて、全件出すには「-1」にする。

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

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

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

というかですね。

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

WordPressで特定のカテゴリを表示、記事数の限定、本文を抜粋(文字数制限)

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

インデックスに特定のカテゴリで新着情報を出したくてですね…っていうwordpressのメモ。あああ、phpわからんよ…_ノ乙(、ン、)_

っていうか最初はこんな感じのコードだったわけですが

本文の抜粋が出ないんですよ。なんでだろ、って思ったら

このget_the_excerptがループの中でしか駄目なんですって。foreach文じゃ駄目だと。

なので、以下のコードを使いました。

の部分、showpostsが表示する記事数、categoryの数字はカテゴリに振られてるIDですね。category_nameって指定も出来るよと。

こちら参考にしました。ありがとうございます。
[Wordpress] カテゴリと記事数の限定されたループを作る – かちびと.net

マウスオーバーした時に画像を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の背景にリストマークを指定する方法を使うわけなんですが…。
“リストマークのずれを解消する” の続きを読む

CSSで横並びにしたリストをセンタリング

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

CSSメモ。こちらを参考にさせて頂きました。
display: inline;かー。知らなかったな。

以下引用
“CSSで横並びにしたリストをセンタリング” の続きを読む