このブログではアイキャッチ画像をブラウザの横幅いっぱいに表示させています。

プロフィールページのアイキャッチ（プロフィール画像）も同じように表示させたかったのですが、なかなか上手くいかなかったので備忘録がてら書いておきます。

目次

PCでのプロフィール写真が大きくなりすぎる

僕のブログのアイキャッチ画像はブラウザで横幅いっぱいになるように自動で伸縮させています。（コードは後述します）

ところで、最近プロフィール写真を撮っていただきました。

その画像をブログのプロフィールページでも使いたいと思い、さっそく画像を変更したところ自分の顔があまりにも大きくなってしまいました。

スマホはそもそもの画面が小さいので良い感じなのですが、パソコンだとあまりにもデカデカと表示されてしまいます。

過度にアップのプロフィール写真は自分でも恥ずかしいですし、見ていただく方もそこまでアップの顔は見たくないかと思います。

というわけで、色々と試行錯誤した結果、今はこんな感じで個人的にはちょうど良いと思える大きさになっています。

• そもそもアイキャッチを横幅いっぱいにしていない
• アイキャッチにプロフィール写真を使っていない

という場合には関係のない話ではありますが、同じようにプロフィール写真をアイキャッチとして使いたい方の参考になれば嬉しいです。

画像の大きさを加工する

まずは下準備として画像を加工します。

なお、プロフィール写真がある程度横長（16:9など）の場合はこの工程は不要かもしれません。

僕が使っている写真のようにそこまで横長ではない場合は、写真を横長の背景に貼り付けます。

写真の左右に余白を作ることで、PCや外部ディスプレイなどの大きな画面で画像が大きくなりすぎるのを防ぐことができます。

僕は無料デザインソフトのCanvaを使いましたが、パワポなどでも良いかと。

あらかじめサイズを決めた横長の背景（僕はブログの背景が白なので白にしました）を用意して、そこに写真を貼り付けるか、スクリーンショットを撮って後でトリミングすればOKです。

今回作った画像は1,350px × 650pxなのですが、サイズはご自身のブログに合わせて調整していただければと思います。

Canvaの場合は「デザインを作成」→「カスタムサイズ」でサイズを指定し、そこにアップロードした写真をドラッグすれば簡単につくれます。

画像ができたら、WordPressの投稿画面の「アイキャッチ画像」から画像をアップロードして確認してみます。

F12キーを押してChromeのデベロッパーツールを起動し、コードをいじれる状態にしておきます。

cssのコードを調整

先に、僕のプロフィールページのcssを置いておきます。

.hero-profile {
  width: auto;
  margin-right: calc(((100vw - 100%) / 2) * -1); /* 画像を横幅いっぱいに */
  margin-left: calc(((100vw - 100%) / 2) * -1); /* 画像を横幅いっぱいに */
  height: 650px; /* 基本の高さ */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* 画像を画面内におさめる */
  margin-top: -100px; /* 固定ヘッダー回避 */
}
 
@media (max-width: 1150px) {
  .hero-profile {
    height: 70vw; /* 可変 */
    background-size: cover; /* 画像を画面いっぱいに表示 */
  }
}

詳しいプロパティの解説は省略しますが、簡単に書いているコードの意味を説明します。

margin-rightとleftでcalcを使っていますが、こう書くことでとりあえず画像を画面の横幅いっぱいに表示させることができます。

height: 650px; /* 基本の高さ */

これが画像の基本となる高さです。

今回の画像の高さが650pxですので650にしていますが、ご自身の画像に合わせて変えていただければと思います。

background-size: contain; /* 画像を画面内におさめる */

こちらを「contain」とすることで画像が必要以上に大きくなるのを防いでいます。

「cover」とするとブラウザの横幅を広げるにつれて自分の顔がどんどん大きくなってしまいます。

margin-top: -100px; /* 固定ヘッダー回避 */

これはヘッダーを固定している僕のサイト特有の記述で、ヘッダーの高さが100pxなためその分画像を上にずらしています。

固定ヘッダーがなければ無視していただいて大丈夫です。

次に＠media内の記述です。

height: 70vw; /* 可変 */

この「70」というところをデベロッパーツールで確認しながらご自身の画像に合わせて変えていただくと、スマホでも丁度良い高さになるはずです。

なお、max-widthの数値もお好みで変えていただければと思います。

background-size: cover; /* 画像を画面いっぱいに表示 */

スマホでは、写真を大きく画面いっぱいに表示させた方が顔がはっきりわかります。

そのため「cover」としています。

だいぶニッチな需要かもしれませんが、同じように表示させたくて困っている方の参考になれば嬉しいです。