【Xwrite対応】PCブラウザ風＆スマホ風フレームをブロックエディタに追加する方法【コピペOK】

2026-02-212026-03-19

WordPressで画像やYouTube動画を掲載する際、ただ貼るだけでは少し味気ないと感じたことはありませんか？

そこで今回は、PCブラウザ風フレームとスマホ風フレームをブロックエディタに追加するカスタマイズ方法をご紹介します。

この記事の方法は、実際にXwriteテーマで動作確認済みです。
CSSとfunctions.phpへのコードをコピペするだけで使えるようになります。

目次 [ close ]

完成イメージ

パソコンのブラウザ画面風デザイン
スマホ（ブラック）フレーム
スマホ（グレー）フレーム
画像・動画・YouTube埋め込みに対応

ブロックエディタの「スタイル」からワンクリックで適用できるようになります。

PCのブラウザ画面風デザイン

-写真16:9-

スマホ（ブラック）フレーム

-Youtube縦-

スマホ（グレー）フレーム

-写真9:16-

スマホ（ブラック）フレーム

-動画9:16-

※スマホ風フレームは様々な画面サイズがあって全てに対応するのが難しいため、「9:16」サイズに固定しています。

横長画像、動画の場合→左右が自動でトリミングされて中央に合わせて9:16に拡大表示されます。
縦長画像、動画の場合→上部に合わせて余った下部は自動でトリミングされます。

そのためスマホ風フレームを利用する予定の方は「９：１６」サイズで使用することを前提に検討をお願いします。

※PCフレームは縦長画像の使用を想定していないので縦横比の固定はしていません。縦横比問わず横長の画像を使用してください。

① 追加CSSを登録する

まずはデザイン部分のCSSを追加します。

外観＞カスタマイズ＞追加CSS に以下をコピペしてください。

noteで続きを読む

/* ================================
   Macブラウザ風フレーム
================================ */
/* 本体 */
.is-style-mac-frame {
  background: #f5f5f7;
  border-radius: 12px;
  border-right: solid 10px #e0e0e0 !important;
  border-left: solid 10px #e0e0e0 !important;
  border-bottom: solid 12px #e0e0e0 !important;
  overflow: hidden;
  position: relative;
}
/* 上部バー */
.is-style-mac-frame::before {
  content: "";
  display: block;
  height: 38px;
  background: #e0e0e0;
}
/* 3色ボタン */
.is-style-mac-frame::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: #ff5f57;
  border-radius: 50%;
  box-shadow:
    20px 0 #ffbd2e,
    40px 0 #28c840;
}
/* 画像・動画・YouTube対応 */
.is-style-mac-frame img,
.is-style-mac-frame video,
.is-style-mac-frame iframe {
  display: block;
  width: 100%;
}



/* ===============================
   iPhone Frame（縮小対応版）
=============================== */
.is-style-iphone-black,
.is-style-iphone-gray {
	aspect-ratio: 9 / 16;
	position: relative;
	width: 100%;
	max-width: 250px;
	margin: 60px auto;
	box-sizing: border-box;
	border-radius: 30px;
	background: #333;
	overflow: visible;
}
.is-style-iphone-gray > * {
	background: #e0e0e0;
}
.is-style-iphone-black > * {
	background: #4c4c4c!important;
}
/* 内側 */
.is-style-iphone-black > *,
.is-style-iphone-gray > * {
	width: 100%;
	height: 100%;
	padding: 10px;
	border-radius: 24px;
	overflow: hidden;
}

/* --- メディア --- */
.is-style-iphone-black img,
.is-style-iphone-gray img,
.is-style-iphone-black iframe,
.is-style-iphone-gray iframe,
.is-style-iphone-black video,
.is-style-iphone-gray video {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	object-position: center top;
	display: block;
}

/* YouTube iframe */
.is-style-iphone-black iframe,
.is-style-iphone-gray iframe {
	padding:10px;
	border-radius:28px;
}
.is-style-iphone-black video,
.is-style-iphone-gray video {
	border-radius: 24px;
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* =================================
   サイドボタン（beforeのみ使用）
================================= */

.is-style-iphone-black::before,
.is-style-iphone-gray::before {
	content: "";
	position: absolute;
	left: -4px;
	width: 4px;
	border-radius: 4px;
	z-index: 20;
}

/* ブラック */
.is-style-iphone-black::before {
	top: 90px;
	height: 36px;
	background: #4c4c4c;
	box-shadow:
		0 42px 0 #4c4c4c; /* 2段目 */
}

/* グレー */
.is-style-iphone-gray::before {
	top: 90px;
	height: 36px;
	background: #e0e0e0;
	box-shadow:
		0 42px 0 #e0e0e0;
}

/* =================================
   スマホ時レスポンシブ縮小
================================= */

@media (max-width: 480px) {
	.is-style-iphone-black,
	.is-style-iphone-gray {
		max-width: 85vw;
		height: auto;
	}
}
/* =================================
   ホームバー（after専用）
================================= */
.is-style-iphone-black::after,
.is-style-iphone-gray::after {
	content: "";
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 35%;
	height: 3px;
	border-radius: 3px;
	z-index: 30;
	pointer-events: none;
}
/* ブラック */
.is-style-iphone-gray::after,
.is-style-iphone-black::after {
	background: rgba(255,255,255,0.6);
}

② ブロックスタイルをfunctions.phpに登録する

次に、ブロックエディタの「スタイル」に表示させるためのPHPを追加します。

外観＞テーマファイルエディター＞ functions.php
（または子テーマのfunctions.php推奨）

/**
 * デバイスフレーム（Mac + iPhone）
 */
function u82_register_device_frame_styles() {

    $blocks = array(
        'core/image',
        'core/video',
        'core/embed',
    );

    foreach ( $blocks as $block ) {

        // Mac
        register_block_style( $block, array(
            'name'  => 'mac-frame',
            'label' => 'Macブラウザ風',
        ) );

        // iPhone 黒
        register_block_style( $block, array(
            'name'  => 'iphone-black',
            'label' => 'iPhone（ブラック）',
        ) );

        // iPhone グレー
        register_block_style( $block, array(
            'name'  => 'iphone-gray',
            'label' => 'iPhone（グレー）',
        ) );
    }
}
add_action( 'init', 'u82_register_device_frame_styles' );

③ 使い方

画像・動画・YouTubeを挿入
ブロックを選択
右サイドバー「スタイル」
好きなフレームを選択

これだけで、デバイス風フレームが適用されます。

動画がポップアップ表示されないようにJavaScriptに追記する

このJavaScriptを追記します。

Xwriteの場合は以下の場所に追記。

カスタマイズ＞ヘッダー＞headセクション＞<body>終了直前に挿入するコード

です。

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (location.pathname.indexOf('device-frame-block-style-add') !== -1) {
    document.querySelectorAll('video').forEach(function(v) {
      v.setAttribute('playsinline', '');
      v.setAttribute('webkit-playsinline', '');
    });
  }
});
</script>