696graphicの備考録
CSSで特定の部分を印刷したくない場合が多々あります。
そんなときに@media print。なんという魔法の言葉か。
例えばtestというidをふった部分を印刷したくない場合は、
|
1 2 3 4 5 |
@media print{ #test { display:none; } } |
のように記述します。
画像にリンクしてマウスオーバーした時に、CSSで画像に半透明の白を重ねたいなーと思い色々と試してみました。
以下がそのサンプルですが、実際には半透明の白を重ねているわけではなく、画像の透明度を変えて表現しています。
背景が白だと、透明度変えるだけなのでいいですね。
html
|
1 2 3 |
<a href="#"> <img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60" class="hover_img1"> </a> |
css
|
1 2 3 4 5 6 7 8 |
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
|
1 2 3 |
<a href="#" class="hover_img2"> <img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60"> </a> |
css
|
1 2 3 4 5 6 7 8 9 10 11 |
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で取得する投稿の数を設定するには、
|
1 |
$numberposts = '数字'; //数字の部分に取得する投稿の数を入れる |
デフォは5件でるようになってて、全件出すには「-1」にする。
タイトルのまんまですが、でないんだね！知らなかった！
というかですね。
私、ずっとlistの横並びはfloatでやってたんですよね。で、display:inlineもまぁそれなりに使いやすいんじゃないかってことで使い始めたんですけど、そうか、リストマーク出ないのかぁ！これは盲点。なんで出ないんだろうとウンウン唸っておりました…。勉強不足だで…。
|
1 2 3 4 |
li{ display:inline; } /*inlineで横並びするとリストマークでないよ*/ |
インデックスに特定のカテゴリで新着情報を出したくてですね…っていうwordpressのメモ。あああ、phpわからんよ…＿ﾉ乙(､ﾝ､)＿
っていうか最初はこんな感じのコードだったわけですが
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
本文の抜粋が出ないんですよ。なんでだろ、って思ったら
|
1 |
<?php echo mb_substr(get_the_excerpt(), 0, 30); ?> |
このget_the_excerptがループの中でしか駄目なんですって。foreach文じゃ駄目だと。
なので、以下のコードを使いました。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
|
1 |
'showposts=5&category=9' |
の部分、showpostsが表示する記事数、categoryの数字はカテゴリに振られてるIDですね。category_nameって指定も出来るよと。
こちら参考にしました。ありがとうございます。
[Wordpress] カテゴリと記事数の限定されたループを作る – かちびと.net
画像の置換、何かと使いますね。
バナーだとかボタンだとか。マウスオーバーした時に、ちょっと色が明るくなったりするだけで、見栄え違いますもんね。
その昔は
|
1 2 3 |
<img alt="画像だよ" src="hoge.png" onMouseOver="this.src='hogehoge.png'" onMouseOut="this.src='hoge.png'" /> |
こんな書き方をしてました…。よろしくないですね…我ながら…。
ということで、CSSでの書き方をめもめも。
画像は最初から表示しておく画像と置換後の画像を一つにまとめたものを作らねばなりません。
↑こんな感じに。
|
1 2 3 |
<div id="hoge"> <a href="#"><img alt="画像だよ" src="hoge.png" /></a> </div> |
|
1 2 3 4 5 6 7 8 9 |
#hoge a { width:160px; height:80px; overflow:hidden; display: block; } #hoge a:hover img { margin-top:-80px; } |
overflow:hiddenで余計な部分を非表示にして
マウスオーバーした時に、上の方に画像を移動させると。＞margin-topで
IE6と7に爆発してほしい今日この頃( ´∀｀)
IE6、7で見出し（h1とか）の下に謎の隙間が出来るなんて…てっきりmarginなんだろうなーって思ってたらなんか違うんですよね。
で、まさか見出し下に隙間出来るとかあるわけ…（Google先生で検索）…あったよ( ﾟдﾟ)
“IE6、7で見出し（h1とか）の下に謎の隙間が出来る件” の続きを読む
使わないと忘れてしまうのです。
ということでメモメモ。
“Flashの背景を透過する” の続きを読む
大概ずれるんですよね、リストマーク。
画像素材の作り方が甘いんでしょう(´・ω・｀)
なのでlist-style-imageを使わずにliの背景にリストマークを指定する方法を使うわけなんですが…。
“リストマークのずれを解消する” の続きを読む
CSSメモ。こちらを参考にさせて頂きました。
display: inline;かー。知らなかったな。