• https://tarcoon.me/jp/shop/product/
• https://tarcoon.me/portfolio/
• https://tarcoon.me/testimonial/

この記事では、原因と、追加CSSだけで揃える手順を備忘録としてまとめます。

症状

上記ページに行くと、ヘッダー（グローバルメニュー）のフォントだけが別のフォントになってしまう。
本文は問題ないのに、メニューだけ違和感が出るやつ。

原因：フォント指定が「#post-xxxx」内に閉じていた

HTML/CSSを追うと、フォント指定がこういう形で出力されていました：

• #post-15598 ... .p-global-nav { font-family: "G2サンセリフ-B"; }

ここがポイントで、ヘッダーのグローバルメニュー（.p-global-nav）は #post-xxxx の中に存在しません。
つまり、

• #post-xxxx .p-global-nav は 一致しない
• 結果、該当ページではメニューにフォントが当たらず、デフォルト側に戻ってしまう

…という流れでした。

解決策：ヘッダーのグローバルメニューにフォントを直指定する

WordPress管理画面から

外観 → カスタマイズ → 追加CSS

に、以下を追加します（コピペOK）。

/* グローバルメニュー（ヘッダー）を他ページと同じフォントに統一（TypeSquare側に合わせる） */
.l-header .p-global-nav,
.l-header .p-global-nav a,
.l-header .p-global-nav label,
.l-header .p-global-nav small,
.l-header .c-navbar,
.l-header .c-navbar a,
.l-header .c-navbar__item,
.l-header .c-navbar__item > a,
.l-header .c-navbar__submenu,
.l-header .c-navbar__submenu a,
.l-header .c-drawer,
.l-header .c-drawer a,
.l-header .c-drawer__menu,
.l-header .c-drawer__menu a,
.l-header .c-site-branding__description {
  font-family: "G2サンセリフ-B", var(--font-family) !important;
}

ねらい

• ヘッダー領域だけにフォントを当てる
• "G2サンセリフ-B" が読めない（未ロード等）場合でも、var(--font-family) にフォールバックする
• !important で「ページ側の変な上書き」に負けないようにする

反映されないときは、だいたいキャッシュ

「CSS入れたのに変わらない！」って時は、ほぼこれ。

1. WP Fastest Cache を使っている → キャッシュ削除（全削除）
2. Jetpack Boost 等でCSS最適化している → 一度キャッシュクリア（または最適化OFF→ON）
3. ブラウザ側 → スーパーリロード（Mac：⌘ + Shift + R）
   もしくはシークレットウィンドウで確認

別フォントを使っている場合

もし将来フォント名が変わったら、CSS内のここだけ差し替えればOKです。

font-family: "ここを使いたいフォント名にする", var(--font-family) !important;

やること（ゴール）

• ポップアップ内の 入力欄 を Snow Monkey のフォームっぽくする
• 購読ボタンの形 を Snow Monkey のボタン形に揃える
• 購読ボタンの色 を Snow Monkey のアクセントカラーに揃える
• 見出し（h2）だけ Snow Monkeyの装飾をオフにする（ポップアップ内限定）

作業場所

WordPress管理画面で以下へ移動します。

外観 → カスタマイズ → 追加CSS

※ CSSは 追加CSSの一番下 に貼っていくのが安定です（後に書いたものが勝つため）。

コピペ用：完成版CSS（これ1つでOK）

/* =========================================================
   Jetpack Newsletter "Show subscription pop-up when scrolling a post"
   を Snow Monkey のUIに寄せる（入力欄 / ボタン形・色 / 見出し装飾OFF）
   ========================================================= */

/* Snow Monkey側の変数を使う（fallbackあり） */
:root{
  --jp-sm-radius: var(--_global--border-radius, 6px);
  --jp-sm-text:   var(--_color-text, #111);
  --jp-sm-border: var(--_lighter-color-gray, #e6e6e6);
  --jp-sm-bg:     #fff;

  /* Snow Monkeyのアクセント色 */
  --jp-sm-accent: var(--accent-color, #cd162c);
}

/* ---------------------------------------------------------
   1) 入力欄（email）を Snow Monkey 寄せ
   Jetpack側がGutenbergコンポーネント(.components-*)を使うことがあるため併記
   --------------------------------------------------------- */
body .jetpack-subscription-modal input,
body .jetpack-subscription-modal .components-text-control__input,
body .jetpack-subscribe-modal input,
body .jetpack-subscribe-modal .components-text-control__input{
  font: inherit !important;
  color: var(--jp-sm-text) !important;
  background: var(--jp-sm-bg) !important;

  border: 1px solid var(--jp-sm-border) !important;
  border-radius: var(--jp-sm-radius) !important;

  padding: .75em 1em !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body .jetpack-subscription-modal input:focus,
body .jetpack-subscription-modal .components-text-control__input:focus,
body .jetpack-subscribe-modal input:focus,
body .jetpack-subscribe-modal .components-text-control__input:focus{
  border-color: var(--jp-sm-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; /* 色指定したくなければこの行は削除OK */
}

/* ---------------------------------------------------------
   2) ボタン形が崩れる問題への対処
   「モーダル内のbutton全部」を上書きすると閉じる×なども巻き込むので、
   いったんリセット → submitだけを装飾する
   --------------------------------------------------------- */
body .jetpack-subscription-modal button,
body .jetpack-subscribe-modal button{
  background: revert !important;
  border: revert !important;
  color: revert !important;
  padding: revert !important;
  border-radius: revert !important;
  box-shadow: revert !important;
}

/* ---------------------------------------------------------
   3) 送信（購読）ボタンだけ Snow Monkey寄せ（形 + 色）
   --------------------------------------------------------- */
body .jetpack-subscription-modal button[type="submit"],
body .jetpack-subscribe-modal button[type="submit"],
body .jetpack-subscription-modal input[type="submit"],
body .jetpack-subscribe-modal input[type="submit"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: var(--jp-sm-radius) !important;
  padding: .85em 1.2em !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;

  background: var(--jp-sm-accent) !important;
  border: 1px solid var(--jp-sm-accent) !important;
  color: #fff !important;

  background-image: none !important; /* Jetpack側の装飾が残る保険 */
}

/* hover（必要なら） */
body .jetpack-subscription-modal button[type="submit"]:hover,
body .jetpack-subscribe-modal button[type="submit"]:hover,
body .jetpack-subscription-modal input[type="submit"]:hover,
body .jetpack-subscribe-modal input[type="submit"]:hover{
  filter: brightness(.95) !important;
}

/* ---------------------------------------------------------
   4) ポップアップ内の見出し(h2)だけ Snow Monkeyの装飾をOFF
   疑似要素(::before / ::after)に線や装飾が乗るケースもあるため両方消す
   --------------------------------------------------------- */
body .jetpack-subscription-modal h2,
body .jetpack-subscribe-modal h2{
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

body .jetpack-subscription-modal h2::before,
body .jetpack-subscription-modal h2::after,
body .jetpack-subscribe-modal h2::before,
body .jetpack-subscribe-modal h2::after{
  content: none !important;
  display: none !important;
}

うまくいかない時のチェック

• 入力欄だけ効かない → inputが .components-text-control__input になっている可能性（上のCSSは対応済み）
• ボタンが変な形になる → button 全体を触ってしまい「閉じる×」まで巻き込んでいるケースが多いので、上の「リセット→submitだけ装飾」の形にする
• 色だけ変わらない → Snow Monkeyのアクセント変数は --accent-color。別の変数を参照しているとズレます（上のCSSは対応済み）
• 見出し装飾が消えない → h2ではなく外側ラッパー（例：.wp-block-heading）に装飾が付いている場合がある。その場合は該当要素に同様の「背景/ボーダー/疑似要素OFF」を追加する

仕上げ（おすすめ）

動作が固まったら、将来的には「追加CSS」から **My Snow Monkey（カスタムプラグイン）**へ移して管理すると、テーマ変更や調整時にも追いやすいです。

スクショ差し込み用：確認チェックリスト（Inspectで見る場所）

ポップアップのCSS調整は「どの要素に、どのCSSが勝っているか」を一度押さえると、以後ほぼ迷子になりません。スクショを撮るなら、次の3枚が鉄板です。

1) 入力欄（email）を選択して「Elements」と「Styles」

1. ブラウザで記事ページを開く
2. ポップアップを出す（スクロール）
3. 開発者ツール（Inspect）で メール入力欄をクリックして選択
4. 右ペインで
   • Elements（HTML構造）
   • Styles（当たっているCSSの一覧）
     をスクショ

見るポイント

• input が input[type="email"] なのか、class="components-text-control__input" なのか
• background / border / border-radius / padding の項目で、どのCSSが最終的に勝っているか（取り消し線が付いているか）

2) 購読ボタン（submit）を選択して「Computed」

1. ポップアップ内の 購読ボタンを選択
2. Computed タブ（計算後スタイル）を開いてスクショ

見るポイント

• border-radius が意図した値になっているか
• background-color が Snow Monkey のアクセント色（--accent-color）になっているか
• background-image が残っていないか（残ると“色が違って見える”原因になります）

3) 見出し（h2）を選択して「疑似要素（::before / ::after）」

1. ポップアップの **見出し（h2）**を選択
2. Styles内で ::before / ::after のセクションが出ていればそこをスクショ

見るポイント

• 装飾が h2 本体ではなく 疑似要素で付いているかどうか
  （今回の「装飾だけOFF」はここが原因になりがち）

追加CSSから My Snow Monkeyへ移す（運用・保守が楽になる版）

追加CSSで動作が固まったら、Snow Monkey更新や調整の時に追いやすいように **My Snow Monkey（カスタムプラグイン）**へ移すのがおすすめです。
ここでは「CSSファイルを作ってenqueueする」王道手順を紹介します。

手順A：CSSファイルを作る（おすすめ）

1) CSSファイルを作成

My Snow Monkey プラグイン配下に、以下のように置きます。

• wp-content/plugins/my-snow-monkey/assets/css/jetpack-newsletter-modal.css

このファイルの中身に、前項の 完成版CSS をそのまま貼り付けます。

2) My Snow Monkey のPHPに enqueue を追加

My Snow Monkey（my-snow-monkey.php など、今まで追記しているファイル）に以下を追記します。

add_action('wp_enqueue_scripts', function () {
  // CSSファイルのパス（プラグイン内）
  $rel_path = 'assets/css/jetpack-newsletter-modal.css';
  $file     = plugin_dir_path(__FILE__) . $rel_path;
  $url      = plugin_dir_url(__FILE__)  . $rel_path;

  // ファイルが存在する時だけ読み込む
  if (file_exists($file)) {
    wp_enqueue_style(
      'tarc-jetpack-newsletter-modal',
      $url,
      array(),
      filemtime($file) // 更新が反映されやすいようにmtimeをバージョンにする
    );
  }
}, 999);

ポイント

• 999 にしておくと、だいたいのCSS読み込みより後ろに来やすく、上書きが安定します。
• filemtime() を使うと、CSSを更新した時にキャッシュが効きすぎて反映されない事故が減ります。

手順B：CSSを「インライン」で最後に差し込む（手早い／小規模向け）

ファイルを作るのが面倒なら、PHP内にCSSを文字列として持たせて最後に差し込む方法もあります。

add_action('wp_enqueue_scripts', function () {
  $css = '/* ここに完成版CSSを貼る */';

  wp_register_style('tarc-jetpack-newsletter-inline', false);
  wp_enqueue_style('tarc-jetpack-newsletter-inline');
  wp_add_inline_style('tarc-jetpack-newsletter-inline', $css);
}, 999);

注意

• 長大なCSSになるほど可読性が下がるので、運用するなら「手順A（CSSファイル化）」が基本おすすめです。

反映されない時の最終チェック（運用編）

• キャッシュ系（WP Fastest Cache / Jetpack Boost / ブラウザ）を一度クリア
• 追加CSSとMy Snow Monkeyの両方に同じコードが残っている場合、意図しない競合が起きるので 片方に寄せる
• どうしても勝てない指定がある時は、最後の手段として セレクタを少しだけ強くする
  例：body .jetpack-subscription-modal ... のように body を付ける

「TarCoon☆CarToon」の -official web site- は、ワードプレスのテーマ「Snow Monkey」を使用して構築しています。このテーマは、ユーザーフレンドリなデザインと高いカスタマイズ性が大きな特徴です。今回は、このテーマを使って構築された「ヒーローヘッダー」について、具体的なメソッドや方法の解説を交えながら紹介します。

ヒーローヘッダーの演出内容

まず、「TarCoon☆CarToon」の -official web site- のヒーローヘッダーの要素をご紹介します。ヒーローヘッダーはサイトのファーストビューに位置し、訪問者にブランドの詣を気識させる重要な要素です。以下は、ヒーローヘッダーで行なっている演出です。

背景画像のアニメーション

金田光り

伝説のアニメーター金田伊功（かなだよしのり）が産み出した「丸」と「十字」の光を組み合わせてレンズゴーストを再現した人工的な輝きを表現する技法。「金田光」とも呼…

正にヒーローらしく登場！バウンス・ダウンするTarCoon☆CarToon

真上から登場して、バウンスして着地します。主役のキャラクターが画面の外から登場することで、このサイトの主役である、TarCoon☆CarToonの存在を引き立たせる狙いがあります。

キャラクターが登場した後にLOGOの「TARCOON CARTOON」が左右から入ってきます。
また、クリックすると、オーバーレイ表示でピックアップ記事のスライダーが表示されます。

このサイトを簡単に説明したメッセージをフェードで表示させ
ユーザーにサイトの目的を簡単に伝える文章を配置。

上から順に流れ落ちてくるSNSのボタンリンク
各サイトへの流入を効率的に促すための動的な演出をしています。次々と見覚えのあるロゴが落ちてくるので、押してみたくなりませんか？

これらの内容は、PCサイズ、タブレットサイズ、スマホサイズでも、一画面で最低限の情報が伝わるようにまとめています。

Snow Monkeyの機能を使ったヒーローヘッダーの構築

「Snow Monkey」のテーマは、WordPressのブロックエディターを使ってビジュアルを構築することが可能です。ここでは、ヒーローヘッダーの構築手順を解説します。

使用したブロック

複数のブロックを組み合わせて作成しています。一番効果を発揮している大きな特徴として、セクション（ブロークングリッド）ですね。一番目立たせたいキャラクターを存在感を出すことと、リンクボタンや、伝えたいテキストなどをなんかちょっといい感じに重ねて表示することで、全体を馴染ませる効果があります。

あとはSnow Monkeyの複数のブロックを組み合わせることで、内容をコンパクトにまとめています。続きを読むボックスはそこまで必要はないけれども、必要としている人には詳しくみてもらう効果があって、丁度いいです。

Snow Monkeyのブロック

• ヒーローヘッダー
• コンテナー
• セクション（ブロークングリッド）
• 続きを読むボックス

デフォルトのブロック

• 段落
• スペーサー
• 画像
• グループ
• ソーシャルアイコン

ヒーローヘッダーで画面ギリギリまで

ヒーローヘッダーブロックは背景画像と、その上にコンテンツを重ねることができます。重ね具合はグリッドに沿ってどれくらいずらすか、どのグリッド線に沿わせてレイアウトするかを設定できます。

TarCoon☆CarToonのイラストの背景にアニメーション（動画ファイル）を再生させたかったので、使用しました。
斜めに動く背景に、金田光と言われる「丸」と「十字」の光を組み合わせてレンズゴーストの模様を重ねた背景動画を再生することで、登場するTarCoon☆CarToonのイラストの存在を引き立てます。

賑やかな動きにすることで、動画でこのサイトが何のサイトなのかを伝える効果を生みました。

Snow Monkey Blocks v19.6.0 をリリースしました

Snow Monkey Blocks v19.6.0 の概要 機能追加 「ヒーローヘッダー」ブロックを追加 ボ…

snow-monkey.2inc.org

最も特徴的な効果を出しているセクション（ブロークングリッド）

Snow Monkeyが提供する「セクションブロック（ブロークングリッド）」を使用して、写真の上にテキストがちょっと乗っかるような崩しレイアウトを行いました。これによって、TarCoon☆CarToonのイラストの上に少し重なる形でLOGOやテキスト、SNSアイコンを重ねることができます。と、同時に少し大きめにTarCoon☆CarToonのイラストを配置できてよりTarCoon☆CarToonを強調できます。

「セクションブロック（ブロークングリッド）」の魅力は、ある程度「崩し」ができないと成立しないのだけど、自由なレイアウトが制限されて代わりに崩しのルールだけ設定できる様になっているので、オイラのようなデザインセンスがない人でもいい感じに崩しをした様に見える点です。

ビフォーアフター

セクションブロック（ブロークングリッド）を使う前は、カラムブロックでレイアウトしてたのでその違いを比較してみると一目瞭然です！今まで目立たなかったキャラクターをグリッドを超えて大きく表示されることで強調することができました。

ブロークングリッドなセクションブロックを追加した、Snow Monkey Blocks v4.3.0 をリリースしました！

Snow Monkey Blocks は、WordPress のブロックエディターに実用的で便利なブロックを追…

snow-monkey.2inc.org

Snow Monkey Editorのプラグインを使って動きを追加

Snow Monkey Editorのアニメーションの項目は、各ブロックごとに、ブロックが画面に入ってきたときに動作するアニメーションを設定することができます。
当サイトのヒーローヘッダーでは、このアニメーション機能を多用することで、TarCoon☆CarToonのヒーロー性を演出しています。

まず、TarCoon☆CarToonが上部から下部に向かってバウンス・ダウンする事で着地した効果を出しています。
また、サイトのタイトルである「TARCOON CARTOON」のロゴをTarCoon☆CarToonとは別の方角、左右から登場させることで、タイトルの存在感も引き立たせています。

新機能「左右フェードイン」アニメーションの実装
Snow Monkey Blocksのアニメーション設定機能を使い、左右から滑らかに表示される動きを追加しました。この力強い動作により、ビジュアルの印象は一気に高まります。

Gutenberg ブロックエディターの機能を拡張してブログの書きやすさを爆上げするプラグイン Snow Monkey Editor をリリースしました！

もともとブログ・メディア向けとを謳っていた Snow Monkey ですが、アップデートを重ねるにつれてコーポ…

snow-monkey.2inc.org

まとめ

「TarCoon☆CarToon」の -official web site- のヒーローヘッダーは、Snow Monkeyの力強い機能を駆使して作成されました。作成過程で導入した「左右フェードイン」アニメーションは、ユーザーに効果的な視覚的インパクトを与えることに成功しています。Snow Monkeyのカスタマイズ性とブロックエディターの便利さを最大限に活用したこの構築手順は、少しでも皆さんのウェブサイト作成の参考になれば嬉しいです。

推薦文を表示する方法

ショートコードを使用して、投稿またはページ内に紹介文を表示することもできます。使用する必要があるショートコードは次のとおりです。

[testimonials]

AKINORI Shougunmimanアキノリ将軍未満 政治活動家／芸術家ネオ幕府 アキノリ党 1986年、東京都新宿区生まれ。本名・相川絹二郎（あいかわ けんじろう）。東京国際大学人間社会学部卒業。政治活動家、芸術家 […]

― アキノリ将軍未満（AKINORI Shougunmiman）

ABE Tomoe阿部 智恵 革命家／越境実践者「性別」破壊党 1996年12月26日、愛知県名古屋市に生まれる。出生時、医師により男性と判定されるも、その真偽は不明。幼少期より、自らが社会的に「男」として扱われることに […]

― 阿部智恵（ABE Tomoe）─「性別」破壊党 党首

これ以上のカスタマイズを行わない私の Web サイト上の紹介文は次のようになります。

実際にショートコードに属性を追加することで、推薦文の外観をカスタマイズできます。

カラム

デフォルトでは、お客様の声は 1 列に表示されるように設定されていますが、これは columns 属性で変更できます。たとえば、次のショートコードは、お客様の声を 2 列に表示します。

[testimonials columns=2]

コンテンツ

デフォルトでは、体験談の内容が表示されます。抜粋を提供した場合は、完全な内容ではなく抜粋が表示されます。

ただし、抜粋を提供したものの完全なコンテンツを表示したい場合は、display_content属性を使用してそれをfullに設定できます。

[testimonials display_content=full]

コンテンツを表示したくない場合は、display_content 属性を使用しますが、それをfalseに設定します。

[testimonials display_content=false]

アイキャッチ画像

デフォルトでは、注目の画像 (割り当てている場合) が表示されます。表示したくない場合は、image属性を使用してfalseに設定します。

[testimonials image=false]

表示する投稿数

デフォルトでは、ショートコードを使用すると、すべての推薦状が表示されます。表示される推薦の数を指定したい場合は、showposts属性を使用できます。

[testimonials showposts=5]

注文

デフォルトでは、お客様の声は日付の昇順で表示されますが、 order属性をDESCに設定して降順で表示するように切り替えることができます。

[testimonials order=DESC]

orderby属性を使用すると、別の基準で推薦文を並べ替えることもできます。推薦文を作成者別に並べ替えるには、 orderby 属性をauthorに設定します。

[testimonials orderby=author]

日付で並べ替えるには、dateに設定します。

[testimonials orderby=date]

推薦のタイトルで並べ替えるには、タイトルをtitleに設定します。

[testimonials orderby=title]

最後に、推薦文をランダムな順序で表示するには、randに設定します。

[testimonials orderby=rand]

お客様の声をさらにスタイル設定するには、CSS を追加する必要があります。既成のテーマを編集する場合は、子テーマをまだ作成していない場合は必ず作成してください。

Snow Monkey のページヘッダー画像、アイキャッチ画像はアスペクト比が固定されているためどんな画像でも枠にはめ込んで表示することができるものの、文字や人物が入っているような画像だとトリミングされたくないところでトリミングされてしまったりするというデメリットもあります。

そこで、トリミングされない箇所はどこかを検証しましたのでご紹介します。
このガイドを使えば、サイズだけでなく表示される箇所で画像が断ち切られてしまうエリアと切られない「安全エリア」もわかります。

Snow Monkeyの公式サイト内のスタートアップガイドの記事に、ここで紹介しているアイキャッチ画像表示範囲をわかりやすく示したガイド線が描かれた定型フォーマットのイラレデータを掲載していただきました。
一番最後の項目の「Snow Monkey のアイキャッチ画像について」に記載されています。

スタートアップガイド

初めてSnow Monkeyを使用する方向けのガイドページです。何をすればいいかよくわからない…という方の…

snow-monkey.2inc.org

アイキャッチ画像とは？

アイキャッチ画像は、その名の通り、読者の視線を引き付ける役割を持つ画像です。

WordPressのサイトでは、新着情報や人気の記事のサムネイルとして用いられることが多いほか、各記事の冒頭やタイトルの下で大きく表示されることもあります。これは、アイキャッチ画像が記事の“顔”として機能しているからです。

ただ、アイキャッチ画像の役割は、デザインの向上だけにとどまりません。内容を直感的に伝え、興味を引く力のあるアイキャッチを選択することで、さまざまなメリットが生まれます。

WordPressのテーマのひとつであるSnow Monkeyでは、ひとつのアイキャッチ画像の設定で、複数部場面で使用されます。新着情報や人気の記事のサムネイルはもちろん、各記事の冒頭ヘッダー部分に大きな画像で表示されます。

アイキャッチ画像が使われている場所

アイキャッチ画像は表示される場所によってトリミングされる縦横の比率が変わってきます。それぞれどのサイズで表示されるかご紹介します。

デスクトップ表示 １６：９の画像をベースにした場合

ページヘッダー画像

最小は８：５から始まり、１６：９の比率までは高さは最大表示されます。その後、デスクトップ横の長さに合わせて縦が狭くなっていきます。

アイキャッチ画像

４：３

埋め込みリンクのOGP

４：３

フォローボックス

４：1

facebookのいいね！ボックス

２：１

新しい投稿 古い投稿

１０：３

ウィジットで追加した最近の投稿

１：１

モバイル表示 １６：９の画像をベースにした場合

ページヘッダー画像

４：３

アイキャッチ画像

４：３

埋め込みリンクのOGP

４：３

フォローボックス

６：５

facebookのいいね！ボックス

１：１より少し幅狭い

新しい投稿 古い投稿

１１：３

任意のタクソノミー投稿 大きな画像レイアウトでの表示

３：４

ダウンロード

アイキャッチ画像の作成に役立つガイド付きイラレデータを配布します！

Snow Monkeyのアイキャッチ画像は、1枚の画像をスクエア、4：3、16：9、4：1などの異なるアスペクト比にレスポンシブに変換してくれます。これは非常に便利ですが、時々作成した画像が意図したように正しく表示されないことがあります。

そこで、オイラは自分でアイキャッチ画像を作成する際に使用していた、各サイズに適したガイドラインを持ったイラレデータを皆さんに配布することに決めました。このガイドを参考にして画像を配置すれば、様々なサイズに適切にフィットしたレイアウトが実現できます。

是非、このデータを活用して、アイキャッチ画像の作成をもっとスムーズに進めてみてください。

Snow Monkey用

アイキャッチ画像表示範囲

• 16:9の画像をベースに表示サイズが記載されています。イラストレーター形式のファイルとなります。

ダウンロード

Snow Monkey用

アイキャッチガイド-サイズ比較

• ２：１、４：３、１６：９、A4のベースサイズごとにアートボードを用意しています。

ダウンロード