WordPress カスタムHTML ブロックの使い方

WordPress

WordPress カスタムHTMLブロックの使い方を徹底解説

投稿や固定ページの編集画面(ブロックエディター)で独自のHTMLコードやCSSのコードを追加する際には、カスタムHTMLブロックを利用します。

今回は、カスタムHTMLブロックの使い方を詳しくご紹介します。

カスタムHTMLブロックの例
 

■WordPress カスタムHTMLブロックの使い方 (動画解説版)


 

(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
 


 

(関連記事)ブロックエディターの使い方について

本記事では、カラムブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

カスタムHTMLブロックを追加する方法

カスタムHTMLブロックの追加方法

まずはHTMLブロックを追加しましょう。「+」ボタンを押下して、「カスタムHTML」を選んでください。
カスタムHTMLを選択
 

カスタムHTMLブロックが追加されました。
カスタムHTMLブロックが追加されました
 

カスタムHTMLはブロックの中で、HTMLやCSSを記述できます。カスタムHTMLのブロックにコードを入力していきましょう。
HTMLコードを入力した例
 

上ツールバーでできる主な設定

プレビュー表示

上ツールバーの「プレビュー」のアイコンをクリックすれば、プレビューを表示できます。

プレビュー表示をクリックしてみましょう。
カスタムHTML>プレビュー
 

下記のようにHTMLのプレビュー画面が表示されます。
プレビューが表示された。
 

同様にHTMLのアイコンをクリックしたら、プレビューを解除できます。
上ツールバー>HTMLをクリック
 

ブロックタイプの変更

上ツールバーの「ブロックタイプまたはスタイルを変更」をクリックすると、「カスタムHTML」ブロックを別の種類のブロックに変更できます。
 

ブロックの種類の変更
 

カスタムHTMLから変更できるタイプは下記になります(WordPressバージョンによって異なる場合があります)。
ブロックの種類の変更
 
 

右メニューバーでできるカスタムHTMLブロックの設定

カスタムHTMLを選んだ状態で右メニューバーを選択すると、カスタムHTMLブロックの設定ができます。
カスタムHTMLブロックの右メニューでできる設定項目

ただし、基本的にカスタムHTMLブロックには標準で設定できる項目は特にありません。

テーマによっては非表示設定やアニメーション設定ができるので、ご利用のテーマにあわせてご利用ください。
 

Javascriptは記述可能だがPHPは記述NGな点に注意

カスタムHTMLブロックは、HTMLやCSSのほか、Javascriptを記述することができます。

Javascriptは記述可能

ただし、PHPは標準では記述しても有効化されませんので注意しましょう。
PHPは記述不可(コメントアウトされる)

■Chrome検証ツールで見た表示例。PHPはコメントアウトされて無効化される。
Chrome検証ツール。Javascriptは有効化されている。PHPはコメントアウトされて無効化される。
 

カスタムHTMLブロックのいろいろな利用シーン

HTMLやCSSなどをかけない人でもカスタムHTMLはよく使います。

地図の埋め込み、youtubeの埋め込み、TwitterやFacebook、アフィリエイトタグなど使うシーンは様々あります。

■Google Mapの埋め込み
下記は、GoogleMapの埋め込みコードをページ内に挿入する例です。


 

(関連記事)【WordPress】GoogleMap(グーグル マップ)を埋め込む方法
 

■Youtubeの埋め込み
カスタムHTMLでiframeを貼り付ければ完了
ブロックエディター >カスタムHTMLにYoutubeのiframeを埋め込む
 
(関連記事)【WordPressにYoutube動画を埋め込む方法
 

■アフィリエイトタグの埋め込み
好きなバナーまたはテキストの広告リンクのコードをコピーします。
広告リンクのコードをコピー

アフィリエイトコードを貼り付けます。
コピーしたコードを貼り付ける
 

まとめ

まとめです。今回はWordPressのブロックエディターで文章を入力する際に利用する段落ブロックの使い方を説明しました。
カスタムHTMLブロック
 

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,