• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / [Elementor] ウェブページ作成時に便利な要素のテンプレート化とスタイルのコピー

[Elementor] ウェブページ作成時に便利な要素のテンプレート化とスタイルのコピー

池田祐太郎 | 2021年5月11日 公開 コメントを書く

Elementor(エレメンター)は5百万以上ダウンロードされている人気のWordPress用ページビルダープラグインです。以前はテーマ開発としてオリジナルテーマを0から開発することが主流でしたが、最近はページビルダープラグインを活用して完全レスポンシブなテーマをページビルダー上で制作することが増えてきました。

Elementorを使っていて「これは便利だ」と感じる機能があります。

  • 要素をテンプレート化して、別のページ等で使い回す
  • 異なる内容の箇所に対して同じデザインを適用したい

この記事では上記のやり方について説明します。

目次

  • 1 同じデザインの要素を別ページ等でも使う
  • 2 異なるコンテンツに対して同じデザインを適用する
  • 3 もっと便利で楽なサイト制作を

同じデザインの要素を別ページ等でも使う

例えば、「画像 + 見出し + 説明文」というブロックがあるとしましょう。

サンプル用のサイト。よくある「画像 + 見出し + 説明文」という形。

これを別の部分でも再利用し、画像やテキストだけ入れ替える、というのはよくある作業です。そこで、Elementorの機能としてテンプレートとして保存できる機能が備わっているので、これを利用します。

セクションの編集を右クリックするとコンテキストメニューが表示される

セクション部分に表示されるメニューのような場所(セクションの編集)を右クリックするとコンテキストメニューが表示されます。この中に「テンプレートとして保存」があるので、これをクリック。

名前を入力して保存

画面が切り替わるので、テンプレートの名称を入力して保存します。ここでは画像と見出しのパーツという意味で、「Part – image + headline」としました。(日本語でもOK)

保存されたテンプレート一覧

保存が成功すると、テンプレート一覧画面が表示されます。今回作成したテンプレートが保存されたのが確認できました。

次に、この保存したテンプレートを別のページで再利用してみます。

「テンプレートを追加」をクリック

別のElementorで作成するページを開き、要素を追加する際にテンプレートを追加するボタンをクリックします。

該当するテンプレートの「挿入」をクリック

先程と同じテンプレート一覧画面が表示されるので、保存したテンプレート「Part – image + headline」の「挿入」をクリックします。確認ダイアログが表示されますが、「はい」をクリックして挿入します。

無事テンプレートが複製された

画面が戻り、保存したテンプレートがそのまま表示されました。あとは画像やテキストを差し替えたり要素を追加または削除等して、調整していきます。

ちなみに、コンテキストメニューに表示される「コピー」を使って、セクションに対して「貼り付け」をすると同等のことができます。何回か使うことが想定される場合はテンプレートとして保存し、一度だけの利用の場合はコピー&ペーストで対処する、といったような使い方が良さそうです。

さらに、スタイル情報は完璧には引き継がれないというのはありますが、別ページだけでなく別サイトにも利用できます。

異なるコンテンツに対して同じデザインを適用する

上のとも少し似ていますが、使い方が違います。例えば、こんな感じの複数の同じような要素があったとします。

よくあるようなカラムが並ぶ要素

デスクトップは2つ並び、タブレットとモバイルは1つ並びになり、それぞれデバイスによって余白やフォントサイズ等が変わるため、一つに設定したら残りのカラムにも設定する必要があります。これを手作業でやっていては大変。そんな時に一括で設定できる便利な「スタイル貼り付け」機能を活用します。

デザインを変更した例。左上のカラムを他のカラムにも適用したい

試しに、カラムのひとつのデザインを変更しました。色、フォントサイズ、行間、余白等を調整しています。これを他のカラムにも適用します。

編集ボタンを右クリックしコンテキストメニュー内からコピーを選択

コピー対象となる要素(例だと緑色の「01」という見出し箇所)の隅にある編集ボタンを右クリックし、コンテキストメニュー内にある「コピー」をクリックします。これでこの要素のデザイン情報がコピーされました。

適用したい要素に対して「スタイル貼り付け」を行う

その状態で、隣の要素(例だと青色の「02」という見出し箇所)の編集ボタンを右クリックし、コンテキストメニュー内の「スタイル貼り付け」をクリックします。すると貼り付けとは異なり文字情報はそのままで、デザイン情報だけ上書きされました。

青から緑に変わったのがわかる

コンテンツはそのままに見た目に関わる部分だけを上書き設定できて便利な機能です。要素が多いとその分都度行わないといけないのが大変ですが、ショートカットキーが使えるので活用することでより早く楽に行えます。Elementorの特性上、ショートカットキーを使う場合は一度編集ボタンをクリックしてからでないと効かないようなので注意。

全ての要素のスタイル情報を上書きした状態

それぞれの要素に対してスタイル貼り付けを行いました。デスクトップ、タブレット、モバイルと、レスポンシブで異なるデザインを設定していることが多いと思うので、手作業で適応していたらかなり苦労する作業ですが、スタイル貼り付けを利用することで(さらにショートカットキーを活用することで効率的に)、文字情報の異なる要素に対してデザインを適用させられる便利な機能です。

もっと便利で楽なサイト制作を

Elementorのテンプレートとして保存する機能とスタイル貼り付け機能のご紹介でした。今はレスポンシブに対応するのは当たり前となっており、さらに複数のデバイス対応や、より幅の広いデスクトップの場合の対応等、求められることが多くなってきています。ページ公開後、サイトを制作した会社(さらにその会社の制作担当者)しか更新できないというブラックボックス化するのではなく、簡単なテキストの変更や追加、画像の差し替え程度であれば管理画面からできるようになっているのが望ましいはずです。

その点、Elementorでは導入時の学習コストは多少かかりますが、レスポンシブに対応したテーマ作成ができるプラグインとなり、各ページの編集はもちろん、テーマに関わる部分も基本的に管理画面からできるような設計です。とはいえ、一風変わったデザインをしたい場合やElementorでの表現が難しいレイアウトなどの場合は無理やり設定しないといけない場合が出てくるので、事前にサイトデザインや構成が適応できるものなのかどうかの確認は必要です。

それがクリアされていれば、Elementorを使ってより早く、楽にテーマ開発やページ制作ができるようになるケースが多いのではないかと思います。そのあたりも今後紹介していきたいと思います。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:elementor

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

Elementor の編集画面でウィジェットパネルのローディングが終わらず編集できない時の解決方法
2022年1月6日
タグ: elementor
カテゴリー: TIPS
Elementorで表を作る3つの方法
2021年6月1日
タグ: elementor
カテゴリー: TIPS
[Elementor]アコーディオンやタブでテキスト以外を切り替えたい時
2021年5月12日
タグ: elementor
カテゴリー: WordPress

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  4. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ
  5. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  6. コラム:class名とid名はどうやってつければいい?

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • SNS等でシェアされやすい形式になっているかがわかる簡単な確認方法
  • トップでも知らない人もいる、文字をペーストするときに書式を解除して貼り付ける方法(Win, Mac, iPhone)
  • テスト環境を作るときのドメインの選択肢と把握しておきたいリスク
  • クラウドの検索順位チェックツール、Nobilistaを使ってみた感想(おすすめ)
  • git pull してもエラーが出てファイルが反映されないときの対処法

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android Backlog BtoC CMS css Dropbox Paper elementor Google+ google workspace Gutenberg HTML IE10 iOS iPhone jQuery Mac php SEO shopify SNS ssh Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サブスクリプション サーバー ショートカット スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.