ブログ｜ぼうびろく

13 December

固定ページに新着情報をショートコードを用いてのせる

http://www.virment.com/wordpress/1582/

<?php echo do_shortcode('[shortcode1]'); ?>

固定ページをフロントページにするとき、新着情報としてループを取得することができないのでショートコードに詰め込んで固定ページに書く。
ショートコードの内容をfunctions.phpに書く。
それかテンプレート内にショートコードの呼び出しタグを書く

PR

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; ?>

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系でダメということは無視できないので、何も考えずにスラッシュを使って省略はやめます。