自分さえ我慢すれば全て丸く収まるが、他人はあなたの幸せの為には動かない
remという単位はルートのフォントサイズを基準にしており、直前の親の影響などを受けないサイズを指定することができます。
マージン・パディングなどの余白にもこの単位が採用されています。
html{
font-size:16px;
}
h1{
font-size:2rem; // 32px
}
p{
font-size:1rem; // 16px
}
html{
font-size: 16px;
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}
表示させる記事の件数をそれぞれの記事一覧ページで異なる設定をしたい場合や、特定のカテゴリーの記事のみを表示させたい場合があると思います。
ビジネスサイトなどではページ内容によって特定のカテゴリーの記事として、おすすめのカテゴリー記事や今の時期だけプッシュしていきたいカテゴリーの記事があったりします。
そのような場合のために、WordPressのループ処理の中で、表示を制御することのできる「query_posts」の使い方について説明させていただきたいと思います
まず、ループ処理の基本として。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> //ループさせたい投稿内容 <?php endwhile; endif; ?>
こちらを使用した例として。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>
こちらのループ処理は、「記事があればタイトルを、h1タグで囲み、次に本文をdivタグで囲んで表示させるという処理を、ある記事の数だけ繰り返して行ってください」という意味になります。
一般的に、相対指定は「％」や「em」、絶対指定は「px」を使ってフォントサイズを制御していると思います。しかし、CSS３から新たに追加された「rem」での指定の方が、IE８対応が少なくなってきた昨今、シンプルでいいのではないかと思うようになりました。
そこで今回は、この記事で「rem」の素晴らしさを紹介したいと思います。
さて、「rem」とはどのような単位なのでしょうか。「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位になります。
では、「rem」を理解するために、下記に「em」と「rem」のコードを具体的に記載しましょう。
body { font-size:62.5%; } /* 10px */
p { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
まず、ベースフォントサイズを作ります。bodyに「%」を使って、主要ブラウザのデフォルトフォントサイズ「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6em」、「20px」にするには「2em」とシンプルに指定できるようになります。
しかし、「em」の場合、入れ子の構造になると、複利計算されてしまいます。例えば、「li」の子要素の「p」は「16px」にはならなく、「1.6px × 1.6」で「26px」となります。したがって、下記のように「li」の子要素の「p」に「1em」を記述してあげて、複利計算を避けなければなりません。
body { font-size:62.5%; } /* 10px */
p { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */
一方、「rem」でのサイズ指定は、ルート（根）という名の通り、最上位の親要素（html要素）を基準値とするため、複利計算の心配はいらなくなり、どんなに入れ子になろうとも、シンプルに「1.6rem」は「16px」となるのです。
参考サイト：https://www.plusdesign.co.jp/blog/?p=5152
h1 {
font-size: 1.875rem; /* 30px/16px=1.875rem・何px計算は1.875rem*16px=30px */
}
PHPを修正するのはいろいろと面倒だという場合は、子テーマのstyle.cssに次のCSSを入力する方法があります。
要素の調査でID及びclassを確認して「display:none;」で消します。
アイキャッチ画像のdivタグには「post-thumbnail」というclass名が付いているので、このCSSでアイキャッチ画像が消えます。
.post-thumbnail {
display:none;
}
参考サイト：https://www.nishi2002.com/9169.html