スマホでpタグのテキストの横幅がおかしいとき

pタグに背景を入れる background-color background-image

youtubeのiframeスマートフォン用

iframeを囲む要素にスタイル指定

div.iframeWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
 
div.iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

compassグラデーションをIEに適用

$experimental-support-for-svg: true;

透過PNGファイル圧縮最適化

tinypng https://tinypng.com/

wordpressで別ページのページ内アンカーリンク

リンク先に「name属性」を追加する。

header.php にスタイルシート追加

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/読み込むCSSファイル" />

foreachループ内でtne_content表示

<?php setup_postdata($post); ?>

を追加

メニューをdisplay:tableにしたときに横幅を均一にする

table-layoutを使う display: table; table-layout: fixed; これで要素の中身の文字数にかかわらず均等な幅に

スマホの背景画像表示

widthを指定する。

wordpress 個別ページで自分のカテゴリ名、スラッグ取得

個別ページでカテゴリ名、スラッグ取得

<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->cat_name" ;} ?>
<?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->category_nicename" ;} ?>

wordpress 固定ページのスラッグを指定して子ページを取得

$parentPage = get_page_by_path('treadmill');
$parentId = $parentPage->ID;
?>
<h2><a href="">TREADMILL</a></h2>
<ul>
<?php $lastposts = get_posts('post_type=page&posts_per_page=-1&post_parent=' . $parentId); ?>
<?php foreach($lastposts as $post) : setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>

css transition hover

transitionでhoverアクションを指定する場合、 同じ要素が存在する必要がある。 例） hoverしてborderをつける場合、hover前にもborder: 0を指定

カテゴリ名で指定する

category_name=news

<?php query_posts("category_name=news&showposts=10"); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <?php get_template_part('content','excerpt'); ?>
<?php endwhile; endif; ?>