kamika | 696graphic[BLOG]

画像にマウスオーバーした時、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;　。
これが無いと画像サイズ一杯に指定した背景の白が広がりません。

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

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

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

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

$numberposts = '数字';　//数字の部分に取得する投稿の数を入れる

1	$numberposts = '数字';　//数字の部分に取得する投稿の数を入れる

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

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

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

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

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

<dl>
<?php $myposts = get_posts('numberposts=5&category=9'); foreach($myposts as $post):?>
<dt>
<span class="day"><?php echo date("Y/m/d", strtotime($post->post_date)); ?></span>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a>
</dt>
<dd>
<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>
</dd>
<?php endforeach; ?>
</dl>

<dl>

<?php $myposts = get_posts('numberposts=5&category=9'); foreach($myposts as $post):?>

<dt>

</dt>

<dd>

<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

</dd>

<?php endforeach; ?>

</dl>

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

<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

1	<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

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

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

<dl>
<?php query_posts('showposts=5&category=9'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<dt>
<?php echo date("Y/m/d", strtotime($post->post_date)); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</dt>
<dd>
<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>
</dd>
<?php endwhile; else: // No posts. endif; wp_reset_query(); ?>
</dl>

<dl>

<?php query_posts('showposts=5&category=9'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<dt>

<?php echo date("Y/m/d", strtotime($post->post_date)); ?>

</dt>

<dd>

<?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

</dd>

<?php endwhile; else: // No posts. endif; wp_reset_query(); ?>

</dl>

'showposts=5&amp;category=9'

1	'showposts=5&category=9'

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

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

明けましたね。

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

明けましておめでとうございます。

新年明けて1時間20分ほどでおみくじの大吉をひいてしまい、今年の運をすべて出し切った三上カミです。今年既に終了のお知らせ！
“明けましたね。” の続きを読む

マウスオーバーした時に画像を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で

サンプルがこちら。

UK選抜展 – Fairfields Arts Centre
2012年6月7日（木）〜7月4日（水）
月・火・木は9:30am?6:00pm、金は予約のみ、土は9:30am?1:00pm
休業日 – 銀行休業日と6月9日（土）
※ギャラリーオーナーによる選定があります。

↑の選抜展に花魁ちゃん達が選抜されてましたー(*ﾟ∀ﾟ)ｳﾋｮｰ

詳しくはこちら（http://2012.sakura-ex.info/details_of_exhibition_uk.htm）をご覧ください。

UKすなわちUnited Kingdom…大好きなモンティ・パイソンを生んだ国での展示に参加できるとは…光栄です…！･:*:･(*´∀｀*)･:*:･

投稿者: kamika

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

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

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

明けましたね。

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

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

8/24-8/26　グループ展『散開目』やります＠デザインフェスタギャラリー原宿 WEST 1-F

Flashの背景を透過する

【俗・】桜 Exhibition 2012に参加しています