カテゴリー: CSS

WordPressアイキャッチ画像のサイズを確認する方法

Posted on | by j-land | Leave a Comment on WordPressアイキャッチ画像のサイズを確認する方法

WordPressのテーマごとにアイキャッチ画像のサイズが異なる

WordPressのテーマではアイキャッチ画像がテーマごとに画像サイズが規定されているのです。

そのため「よし、アイキャッチ画像はこれだ！」と適当に画像を設定すると、端が切れて表示されてしまって、画像を再編集するという悲劇が容易に起こり得ます。

WordPressのテーマごとに異なるアイキャッチ画像のサイズを確認する方法を勉強しながらまとめてみました。

WordPressのアイキャッチ画像のサイズの基本

まず、アイキャッチの基本から。WordPressでは「functions.php」というファイルの中の

  • set_post_thumbnail_size()
  • add_image_size()

という2つの関数がアイキャッチ画像のサイズを決めているのです。

じゃあ、この2つの関数はどう違うのか？というと、

set_post_thumbnail_size()は「デフォルトのアイキャッチ画像のサイズ」を設定しており、

add_image_size()は「デフォルト以外の新しいアイキャッチ画像のサイズ」を決めています。

この「新しいアイキャッチ画像のサイズ」とは、

  • トップページの記事一覧のためのサムネイル
  • サイドバーのサムネイル

など、記事内のアイキャッチ画像（デフォルトサイズ）以外の異なるアイキャッチ画像のことです。

アイキャッチを掲載する箇所によってサイズを変えたいときありますもんね。

これがWordPressのアイキャッチ画像の基本。

WordPressのアイキャッチ画像のサイズを確認する方法

この基本を踏まえると、アイキャッチ画像のサイズを確認する方法は次の3つのステップでいけます。

1・functions.phpを開く

アイキャッチ画像のサイズを規定しているファイル「functions.php」を開きましょう。

アイキャッチ画像のサイズを変更せず確認するだけですので、WordPress管理画面からテーマ＞テーマの編集からfunctions.phpと進めばオッケーです。

2・「set_post_thumbnail_size」を探す

functions.phpの中から「set_post_thumbnail_size」という記述を探します。

Ctl + Fを使うなりして、ファイルの中にある「set_post_thumbnail_size」という記述を見つけましょう。

set_post_thumbnail_sizeは

set_post_thumbnail_size( 幅, 高さ, 切り抜きする？ )

という使い方をします。

set_post_thumbnail_size( 840, 560, true );

となっていたら、

  • 幅：840ピクセル
  • 高さ：560ピクセル
  • 切り抜きする

ということになりますね。

Posted in CSS

bootstrap4ではremフォントサイズを使う

Posted on | by j-land | Leave a Comment on bootstrap4ではremフォントサイズを使う

ォントサイズを「rem」で指定するべき理由

一般的に、相対指定は「％」や「em」、絶対指定は「px」を使ってフォントサイズを制御していると思います。しかし、CSS３から新たに追加された「rem」での指定の方が、IE８対応が少なくなってきた昨今、シンプルでいいのではないかと思うようになりました。

そこで今回は、この記事で「rem」の素晴らしさを紹介したいと思います。

remとは？

さて、「rem」とはどのような単位なのでしょうか。「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位になります。

では、「rem」を理解するために、下記に「em」と「rem」のコードを具体的に記載しましょう。

emでフォントサイズを指定

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 */

remでフォントサイズを指定

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 */
}