ブログ｜ぼうびろく

20 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

30 November

http://crunchtimer.jp/blog/technology/php/1609/

<?php if(has_post_thumbnail()) :?>

　　　//記事にアイキャッチが設定してあるならそれを表示する
      <div class="thumb"><?php the_post_thumbnail('thumbnail'); ?></div>


   <?php else: ?>
　　　//ないなら文字列をpregmachさせ
      <?php preg_match('/wp-image-(d+)/s' , $post->post_content, $thumb);?>
　　　
      <?php if($thumb): ?>
　　　//1枚目の挿入画像をアイキャッチとして表示する
         <div class="thumb"><?php echo wp_getattachment_image($thumb[1], 'thumbnail'); ?></div>
<?php else: ?>
　　　　//画像自体なければ、それ用に作ったdefault.jpgをアイキャッチとして表示する
        <div class="thumb"><img src="<?php echo get_template_directory_uri(); ?>/images/default.jpg" width="150" height="150" style="opacity:0.7;"></div>


      <?php endif; ?>
        <?php endif; ?>

PR

27 November

borderをつけたとき、画像の下とborderの間に空白ができてるのがわかる対処法

http://css-el.seesaa.net/article/138946834.html

画像をブロック要素で囲んでいるときにでるらしい？
どちらかを記述する

div {

/* 行の高さを０にする */
font-size:1px;
line-height:0;

}

div img {

/* テキストの下端に揃える */
vertical-align:text-bottom;

}

私が知ってるのは、aタグで囲んだ場合、aタグが下段のほうにいるので余白をうみだしていた
aタグを　display:block;　すると直る

27 November

擬似要素:before　:after　でcontent:url(~~~.jpg);を指定したときの画像サイズ変更方法

http://tenman.info/labo/css/?p=401

transformで

.***:before{
    content: url('images/***.png');
 -webkit-transform: scale(0.5); 
 -moz-transform: scale(0.5); 

}

もともと指定してたpositionがずれたので、再設定必須です。

スマホは2倍サイズで作らないと画像がぼやける

アイコンもそう

擬似要素を良く使うので、画像サイズを指定できないのは困って探した

色々と発想の転換ですね

26 November

アンドロイド4.4実機で back-ground指定が無視される原因

background: url(images/icon.png) no-repeat 10px 45% / 24px #999999;

このように一括指定すると、CSSを読み取ってくれませんでした。
「　/　」で区切るのが入るとダメみたいです。
私もスラッシュ使うのなんて知らなかったけど、back-ground-sizeを調べてるときに
どこかで見かけたので、省略するためにやってみました。

標準ブラウザで見たときにダメでした。
クロムでみてないし、iphoneでも見て無いし、検証する気もないですけど、
4系でダメということは無視できないので、何も考えずにスラッシュを使って省略はやめます。

25 November

グロー効果　幻想的なぼんやりとした発光を描く　宝石、人物など

http://ekaku.seesaa.net/article/299310078.html

１、画像レイヤーコピー
２、レベル補正で黒△を右へ動かし、明暗をハッキリさせる（明るい部分が発光）
３、コピー画像に　フィルター→ぼかしガウス（値は適宜）
４、コピー画像を　スクリーン　にする
５、不透明度など調整