css | 696graphic[BLOG]

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

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

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

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

<?php
  if ( date('U') - get_the_time('U') > 60*60*24*365 && in_category('ここにカテゴリーの番号') ) {
  ?>
  <div class="old-post-message">
    <p>
      この記事は<?php the_time('Y年n月j日') ?>に書かれた記事です。<br />
      内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。
    </p>
  </div>
  <?php
  }
?>

<?php

if ( date('U') - get_the_time('U') > 60*60*24*365 && in_category('ここにカテゴリーの番号') ) {

<p>

この記事は<?php the_time('Y年n月j日') ?>に書かれた記事です。<br />

内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

</p>

</div>

<?php

}

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

.old-post-message{
background-color:#fff468;
color:#333;
font-style: italic;
border-radius: 0.5em; /* <- 無駄に角丸*/
}

.old-post-message p{
padding:10px;
}

.old-post-message{

background-color:#fff468;

color:#333;

font-style: italic;

border-radius: 0.5em; /* <- 無駄に角丸*/

}

.old-post-message p{

padding:10px;

}

↓こちらのサイトを参考にさせていただきました。ありがとうございます。
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で見ると消えてました。
↓な感じで。
バナーを並べて背景に色が入ってます。

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

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

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

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

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

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

@media print{
#test {
	display:none;
	}
}

@media print{

#test {

display:none;

}

のように記述します。

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

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

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

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

html

<a href="#">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60" class="hover_img1">
</a>

</a>

css

a .hover_img1{
    transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/
    }
a:hover .hover_img1{
    opacity: 0.7;/*要素の透明度を指定*/
    filter: alpha(opacity=70); /*ie6、7の透明度指定*/
    /*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/
    }

a .hover_img1{

transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/

}

a:hover .hover_img1{

opacity: 0.7;/*要素の透明度を指定*/

filter: alpha(opacity=70); /*ie6、7の透明度指定*/

/*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/

}

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

html

<a href="#" class="hover_img2">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60">
</a>

</a>

css

a.hover_img2{
    background-color:#fff; /*背景に白を設定*/
    display:block; /*ブロック化重要！*/
    }
a.hover_img2 img{
    transition:all 0.5s ease;
    }
a:hover.hover_img2 img{
    opacity: 0.7;
    filter: alpha(opacity=70);
    }

a.hover_img2{

background-color:#fff; /*背景に白を設定*/

display:block; /*ブロック化重要！*/

}

a.hover_img2 img{

transition:all 0.5s ease;

}

a:hover.hover_img2 img{

opacity: 0.7;

filter: alpha(opacity=70);

}

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

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

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

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

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

その昔は

<img alt="画像だよ" src="hoge.png"
onMouseOver="this.src='hogehoge.png'"
onMouseOut="this.src='hoge.png'" />

<img alt="画像だよ" src="hoge.png"

onMouseOver="this.src='hogehoge.png'"

onMouseOut="this.src='hoge.png'" />

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

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

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

↑こんな感じに。

<div id="hoge">
<a href="#"><img alt="画像だよ" src="hoge.png" /></a>
</div>

</div>

#hoge a {
width:160px;
height:80px;
overflow:hidden;
display: block;
}
#hoge a:hover img {
margin-top:-80px;
}

#hoge a {

width:160px;

height:80px;

overflow:hidden;

display: block;

}

#hoge a:hover img {

margin-top:-80px;

}

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

サンプルがこちら。

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

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

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