WordPressテーマおすすめ5選！有料を使うべき理由と失敗しない6つの選びかた
2024年1月26日
コメントはまだありません
これからWordPressをはじめるにあたり、必要になってくるのがテーマ選びです。
テーマは無料・有料を入れると、数えきれないくらい公開されているため、どれを選ぶべきなのかを迷ってしまうものです。
そこで今回は、有料テーマのおすすめと選びかたについてお話ししますので、参考にしてみてください。
ウィジェット（固定ページなどの編集ページでのElementorの機能）のうち、プロ版グループ – ポストについて説明します。
投稿ウィジェット（ポストウィジェット）を使えば、カスタム投稿タイプを含む任意の投稿タイプの一覧を、様々なレイアウトや方法で表示することができます。この実用的なウィジェットは、特定のカテゴリや他のタクソノミー、最近の投稿などの投稿を表示するために使用することができます。
このウィジェットには３種類のスキンが用意されています。
各項目のタイトルをクリックすると詳細説明が表示されます。
表示例
クラシックスキン
クラシックスキンは完全にカスタマイズ可能なレイヤーテンプレートで、投稿ウィジェットに適用され、あなたの投稿に伝統的なデザインスタイルを与えます。
ブログのトラフィックを増やす方法 – 簡単な方法（実証済みの27のヒント）
2022年9月13日
コメントはまだありません
最近では、WordPressなどのプラットフォームを利用して、ブログを始めることが簡単にできるようになりました。しかし、一度立ち上げると、次の大きな課題は、あなたのブログやウェブサイトにもっと多くのトラフィックをもたらすことです。
心配しないでください、あなたはあなたのブログを促進するためにマーケティングの第一人者である必要はありません。あなたは簡単にいくつかの実績のあるベストプラクティスを使用することにより、より多くの訪問者を得るためにあなたのブログのトラフィックを増やすことができます。
WordPressブロックエディター（Gutenberg）で再利用可能なブロックを作成する方法
2022年8月29日
コメントはまだありません
WordPress の投稿で同じ内容のスニペットをよく使用しますか？もしそうなら、新しいWordPressブロックエディターの再利用可能なブロック機能を気に入るはずです。これは、任意のコンテンツブロックを保存し、あなたのウェブサイト上の他の投稿やページでそれらを再利用することができます。
この記事では、Gutenbergとしても知られているWordPressブロックエディタで、再利用可能なブロックを簡単に作成する方法を紹介します。また、WordPressの投稿に再利用可能なブロックを追加し、それらをエクスポートして他のWordPressウェブサイトで使用する方法も紹介します。
カードスキン
カードスキンは、カスタマイズ可能なデザイン済みのレイヤーテンプレートで、投稿ウィジェットに適用され、投稿にトレンディなマテリアルデザインのスタイルを与えます。
WordPressテーマおすすめ5選！有料を使うべき理由と失敗しない6つの選びかた
これからWordPressをはじめるにあたり、必要になってくるのがテーマ選びです。
テーマは無料・有料を入れると、数えきれないくらい公開されているため、どれを選ぶべきなのかを迷ってしまうものです。
そこで今回は、有料テーマのおすすめと選びかたについてお話ししますので、参考にしてみてください。
2024年1月26日
コメントはまだありません
ビギナーガイド
ブログのトラフィックを増やす方法 – 簡単な方法（実証済みの27のヒント）
最近では、WordPressなどのプラットフォームを利用して、ブログを始めることが簡単にできるようになりました。しかし、一度立ち上げると、次の大きな課題は、あなたのブログやウェブサイトにもっと多くのトラフィックをもたらすことです。
心配しないでください、あなたはあなたのブログを促進するためにマーケティングの第一人者である必要はありません。あなたは簡単にいくつかの実績のあるベストプラクティスを使用することにより、より多くの訪問者を得るためにあなたのブログのトラフィックを増やすことができます。
2022年9月13日
コメントはまだありません
ビギナーガイド
WordPressブロックエディター（Gutenberg）で再利用可能なブロックを作成する方法
WordPress の投稿で同じ内容のスニペットをよく使用しますか？もしそうなら、新しいWordPressブロックエディターの再利用可能なブロック機能を気に入るはずです。これは、任意のコンテンツブロックを保存し、あなたのウェブサイト上の他の投稿やページでそれらを再利用することができます。
この記事では、Gutenbergとしても知られているWordPressブロックエディタで、再利用可能なブロックを簡単に作成する方法を紹介します。また、WordPressの投稿に再利用可能なブロックを追加し、それらをエクスポートして他のWordPressウェブサイトで使用する方法も紹介します。
2022年8月29日
コメントはまだありません
フルコンテンツスキン
フルコンテンツスキンでは、投稿リストページに投稿内容全体を表示することができます。
コンテンツ
レイアウト - クラッシックスキン
クラシック、カード、フルコンテンツのいずれかのスキンを選択します。
- Classic（デフォルト）
- Cards
- Full Content
以下はクラッシックスキンを選択した際のオプションです。
表示される列数を1～6の範囲で設定します。
- 1 ~ 6（デフォルト：3）
- Cards
- Full Content
表示する投稿数を設定します。
- 値（デフォルト：6）
コンテンツに対する画像の位置を設定します。オプションは以下の通りです。オプションには、上/左/右/なしがあります。
注：携帯電話で画像の位置を設定する方法については、以下の注意事項を参照してください。
- 上（デフォルト）
- 左
- 右
- なし
石積みレイアウトにするにはONにします。
- オン
- オフ（デフォルト）
サムネイルからフルサイズまで、画像のサイズを設定します。
- Thumbnail – 150 x 150
- Medium – 300 x 300（デフォルト）
- Medium Large – 768 x 0
- Large – 1024 x 1024
- 1536×1536 – 1536 x 1536
- 2048×2048 – 2048 x 2048
- フル
画像の比率を設定します。
- 値（デフォルト：0.66）
：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
画像の幅を設定します。
- 値（デフォルト：100）
- 単位：
- %：パーセント。全体で100%になるように（デフォルト）
- PX：ピクセル単位
タイトルの表示・非表示を選択します。
- 表示（デフォルト）
- 非表示
タイトルに使用するHTMLタグを選択します。
- H1
- H2
- H3（デフォルト）
- H4
- H5
- H6
- div
- span
- p
抜粋の表示・非表示を選択します。
- show（表示）（デフォルト）
- hide（非表示）
抜粋の長さを選択し、表示される単語数を設定します。
- 値（デフォルト：25）
注：単語とは英単語のことで、日本語の場合有効になりません（2020年12月現在）
ウィジェットに表示するメタデータを選択します。フィールドをクリックすると、オプションのリストが開きます。オプションには、著者、日付、時間、コメントが含まれています。
- author（著者名）
- date（日付）
- time（時間）
- comments（コメント）
- Date Modified（更新日）
メタデータの間に使用する区切り文字を選択します。
- 値（デフォルト：///）
「続きを読む」ボタンの表示・非表示を選択します。
- show（表示）（デフォルト）
- hide（非表示）
「続きを読む」のテキストをカスタマイズします。
- 値（デフォルト：Read More »）
「続きを読む」ボタンを押した際、新しいウィンドウで開くかを選択します。
- YES
- NO（デフォルト）
レイアウト - カードスキン
クラシック、カード、フルコンテンツのいずれかのスキンを選択します。
- Classic（デフォルト）
- Cards
- Full Content
以下はカードスキンを選択した際のオプションです。
表示される列数を1～6の範囲で設定します。
- 1 ~ 6（デフォルト：3）
- Cards
- Full Content
表示する投稿数を設定します。
- 値（デフォルト：6）
注目の画像の表示・非表示を選択します。
- はい（デフォルト）
- いいえ
石積みレイアウトにするにはONにします。
- オン
- オフ（デフォルト）
サムネイルからフルサイズまで、画像のサイズを設定します。
- Thumbnail – 150 x 150
- Medium – 300 x 300（デフォルト）
- Medium Large – 768 x 0
- Large – 1024 x 1024
- 1536×1536 – 1536 x 1536
- 2048×2048 – 2048 x 2048
- フル
画像の比率を設定します。
- 値（デフォルト：0.66）
：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
タイトルの表示・非表示を選択します。
- 表示（デフォルト）
- 非表示
タイトルに使用するHTMLタグを選択します。
- H1
- H2
- H3（デフォルト）
- H4
- H5
- H6
- div
- span
- p
抜粋の表示・非表示を選択します。
- show（表示）（デフォルト）
- hide（非表示）
抜粋の長さを選択し、表示される単語数を設定します。
- 値（デフォルト：25）
注：単語とは英単語のことで、日本語の場合有効になりません（2020年12月現在）
ウィジェットに表示するメタデータを選択します。フィールドをクリックすると、オプションのリストが開きます。オプションには、著者、日付、時間、コメントが含まれています。
- author（著者名）
- date（日付）
- time（時間）
- comments（コメント）
- Date Modified（更新日）
メタデータの間に使用する区切り文字を選択します。
- 値（デフォルト：///）
「続きを読む」ボタンの表示・非表示を選択します。
- show（表示）（デフォルト）
- hide（非表示）
「続きを読む」のテキストをカスタマイズします。
- 値（デフォルト：Read More »）
「続きを読む」ボタンを押した際、新しいウィンドウで開くかを選択します。
- YES
- NO（デフォルト）
バッジを表示または非表示にします。
- 表示（デフォルト）
- 非表示
バッジは、カード内のカテゴリ、タグ、その他の分類法を表示することができます。
- 値（デフォルト：カテゴリー）
投稿者のユーザーアバターを表示・非表示にします。
- 表示（デフォルト）
- 非表示
レイアウト - フルコンテンツスキン
クラシック、カード、フルコンテンツのいずれかのスキンを選択します。
- Classic（デフォルト）
- Cards
- Full Content
以下はフルコンテンツスキンを選択した際のオプションです。
表示する投稿数を設定します。
- 値（デフォルト：6）
投稿ごとのすき間を設定します。
- 値（デフォルト：35）
- いいえ
「はい」または「いいえ」を選択して、注目の画像を表示または非表示にします。
- オン
- オフ（デフォルト）
タイトルの表示・非表示を選択します。
- 表示（デフォルト）
- 非表示
タイトルに使用するHTMLタグを選択します。
- H1
- H2
- H3（デフォルト）
- H4
- H5
- H6
- div
- span
- p
ウィジェットに表示するメタデータを選択します。フィールドをクリックすると、オプションのリストが開きます。オプションには、著者、日付、時間、コメントが含まれています。
- author（著者名）
- date（日付）
- time（時間）
- comments（コメント）
- Date Modified（更新日）
メタデータの間に使用する区切り文字を選択します。
- 値（デフォルト：///）
「続きを読む」ボタンを押した際、新しいウィンドウで開くかを選択します。
- YES
- NO（デフォルト）
注：
デスクトップビューとモバイルビューの画像の幅と比率を以下のように調整してください。
注：
Posts Per Pageオプションに関しては、Postsウィジェットにはすべての付箋（固定）記事＋Posts Per Pageオプションで設定した1ページあたりの記事数が読み込まれますのでご注意ください。これがWordPressの基本的な付箋（固定）記事の扱い方です。例えば、「Posts Per Page = 1」と設定していても、付箋（固定）記事が5件ある場合、フロントエンドで読み込まれる記事の総数は6件（1+5=6}となります。
注：
Elementorが投稿を表示するとき、その投稿に抜粋がない場合、Elementorは自動的にその投稿の内容から抜粋を生成します。Excerpt Lengthオプションは、この自動生成された抜粋の長さを制御することができます。ただし、抜粋の長さは、手動での抜粋が入力されていない投稿にのみ適用されます。Elementorウィジェットで指定された長さは、手動で生成された抜粋が投稿に存在する場合は無視されます。
Query
ウィジェットがコンテンツを表示するソースを選択します。オプションには、投稿、ページ、カスタム投稿タイプ（利用可能な場合）、手動選択、現在のクエリ、関連があります。クエリに選択したソースに応じて、結果をフィルタリングするためのオプションが表示されます。
- 投稿（デフォルト）
- 固定ページ
- （お客様環境によって変化）
用語または著者名を選択し、使用する項目を選ぶために検索と選択を使用します。用語には、タクソノミー内のすべての項目が含まれます。利用可能なタクソノミーは、カテゴリ、タグ、フォーマット、カスタムタクソノミーです。
- 値（デフォルト：なし）
- （お客様環境によって変化）
すべて、過去の日、過去の週、過去の月、過去の四半期、過去の年、カスタム（日付の前後を選択）から選択してください。
- All（すべて）（デフォルト）
- Past Day（過去の日）
- Past Week（過去の週）
- Past Month（過去の月）
- Past Quarter（過去の四半期）
- Past Year（過去の年）
- Custom（カスタム）
投稿を表示する順番を設定します。オプションは以下の通りです。日付、タイトル、メニュー順、ランダム
- Date（日付）（デフォルト）
- Title（タイトル）
- Menu Order（メニュー順）
- RandomAll（ランダム）
DESC (降順) または ASC (昇順)を選びます。
- DESC (降順) （デフォルト）
- ASC (昇順)
固定投稿を無視するか選択します。 (Sticky Postsオプションはゼロ条件が選択されている場合にのみ機能します)
- はい （デフォルト）
- いいえ
サーバーサイドでのフィルタリングを可能にするために、クエリーにカスタムのユニークな ID を与えます。この高度な機能の使い方については開発者向けのドキュメントを参照してください。
- 値 （デフォルト：なし）
除外する項目を設定します。。現在のポスト、マニュアル選択、用語、または著者の選択を行う場合は、マニュアル、用語、または著者の選択肢を検索して選択してください。
- 値（デフォルト：なし）
- （お客様環境によって変化）
フロントエンドのみに重複した投稿を表示しないようにするにはYesを選択してください。
Elementorは、Postsウィジェット内に重複する投稿が存在しないことを考慮して、ページレベル（ウィジェットレベルではなく）で重複を探します。
- はい
- いいえ（デフォルト）
この設定を使用すると、投稿を読み飛ばすことができます。（例：2つの投稿を読み飛ばす場合は「2」）
- 値（デフォルト：0）
Include利用時の注意：
ソースとして「関連」（Related）を選択し、インクルード条件として「カテゴリ」を選択すると、現在表示されている投稿に割り当てられているカテゴリに関連する投稿が表示されます。例えば、ユーザーが旅行カテゴリの投稿を表示している場合、ページには旅行カテゴリの関連投稿が表示されます。現在表示されている投稿に複数のカテゴリが割り当てられている場合、関連投稿はその投稿に割り当てられている最初のカテゴリ（アルファベット順）から投稿を引き出します。重要な例外です。関連投稿にフォールバックを設定した場合、クエリは考慮されないことに注意してください。以下のようにフォールバックを選択すると、最新の投稿がすべてプルされて表示されます。
Pagination
結果のページ送り方法を選択します。オプションには、「なし」、「数字」、「前/次」、「数字＋前/次」があります。
- なし（デフォルト）
- Numbers（数字）
- Previous/Next（前/次）
- Numbers + Previous/Next（数字＋前/次）
スタイル
レイアウト
カラム間のスペースを設定します。
- 値（デフォルト：30）
行間のスペースを設定します。
- 値（デフォルト：35）
ウィジェット内のコンテンツの配置を左、中央、または右に設定します。
- 左
- 中央
- 右
Box - クラッシックスキン
投稿のボックスの周囲の枠線の太さを設定します。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
投稿のボックスの周囲の枠線の丸みを設定します。
- 値（デフォルト：なし）
- 単位：
- PX：ピクセル単位（デフォルト）
- %：パーセント。全体で100%になるように
投稿のボックスの周囲の枠線内のパディングを設定します。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
投稿のボックスの内容だけを囲むように追加のパディングを設定します。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
通常モードとホバーモードの両方で、投稿ボックスの周りのボックスシャドウオプションを設定します。
- 色：カラーピッカー
- 水平：値（デフォルト0）
- 垂直：値（デフォルト0）
- ぼかし：値（デフォルト10）
- スプレッド：値（デフォルト0）
- 位置： [アウトライン、インセット]
- トランジション所要時間：値（デフォルトなし）変化までの時間を設定します。
- [デフォルトに戻す]ボタン：設定をデフォルトに戻ります。
通常モードとホバーモードの両方で投稿ボックスの背景色を選択します。
- デフォルト
- カラーピッカー
通常モードとホバーモードの両方で投稿ボックスの枠線の色を選択します。
- デフォルト
- カラーピッカー
Card - カードスキン
カードの背景色を選択します。
- デフォルト
- カラーピッカー
カードのボーダーの色を選択します。
- デフォルト
- カラーピッカー
カード周りの枠の太さを設定します。
- 値（デフォルト：なし）
カードのボーダーの角の丸みを設定します。
- 値（デフォルト：なし）
- 単位：
- PX：ピクセル単位（デフォルト）
- %：パーセント。全体で100%になるように
カードの内容の水平方向のパディングを設定します。
- 値（デフォルト：なし）
カードの内容の垂直方向のパディングを設定します。
- 値（デフォルト：なし）
「はい」を選択して、事前に定義されたボックスシャドウをカードに適用します。
- はい（デフォルト）
- いいえ
ホバー効果は、なしまたはグラデーションのいずれかを選択します。
- なし
- Gradient（デフォルト）
メタデータの上の境界線の色を選択します。
- デフォルト
- カラーピッカー
Box - フルコンテンツスキン
ボックスの枠線の幅を設定できます。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
ボックスのボーダーの角の丸みを設定します。
- 値（デフォルト：なし）
- 単位：
- PX：ピクセル単位（デフォルト）
- %：パーセント。全体で100%になるように
ボックス全体のパディングを設定します。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
ボックスの内容のみのパディングを設定します。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
ボックスシャドウをボックスに適用します。
- 色：カラーピッカー
- 水平：値（デフォルト0）
- 垂直：値（デフォルト0）
- ぼかし：値（デフォルト10）
- スプレッド：値（デフォルト0）
- 位置： [アウトライン、インセット]
- トランジション所要時間：値（デフォルトなし）変化までの時間を設定します。
- [デフォルトに戻す]ボタン：設定をデフォルトに戻ります。
ボックスの色を選択します。
- デフォルト
- カラーピッカー
通常状態とホバー状態のボックスの境界線の色を選択します。
- デフォルト
- カラーピッカー
画像 - クラッシック・フルコンテンツ
画像 - カードスキン
画像とコンテンツの間のスペースを設定します。
- 値（デフォルト：20）
ぼかし、明るさ、コントラスト、彩度、色相の設定のCSSフィルタのスケールを変更して、画像のスタイルを調整します。
- ぼかし：値（デフォルト0）
- 明るさ：値（デフォルト100）
- コントラスト：値（デフォルト100）
- 彩度：値（デフォルト100）
- Hue：値（デフォルト0）
- ボタン：デフォルトに戻す
バッジをカードの左右に揃えます。
- 左
- 右（デフォルト）
バッジの背景色を選択します。
- デフォルト
- カラーピッカー
バッジの文字色を選択します。
- デフォルト
- カラーピッカー
バッジの角の丸みを設定します。
- 値（デフォルト：なし）
バッジのサイズを設定します。
- 値（デフォルト：なし）
カードの上部と側面からバッジの距離をコントロールします。
- 値（デフォルト：20）
バッジテキストの書体を設定します。
カスタム
- グローバルフォント：グローバルフォントの設定
- メイン
- サブ
- テキスト
- アクセント
タイポグラフィ
- フォント：
- デフォルト
- システム
- Googleフォント（数百種類）
- サイズ：
- 値（デフォルトなし）
- 単位：PX（デフォルト）、EM、REM、VW
- 太さ：
- デフォルト
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- Normal
- Bold
- 変換：
- デフォルト
- 大文字
- 小文字
- 先頭大文字
- ノーマル
- スタイル：
- デフォルト
- ノーマル
- イタリック
- 斜体
- 装飾：
- デフォルト
- 下線
- 上線
- 取消線
- なし
- 行の高さ：
- 値（デフォルトなし）
- 単位：PX、EM（デフォルト）
- 字間：値（デフォルトなし）
- ボタン：デフォルトに戻す
- ボタン：新規グローバルフォントの作成
アバターのサイズを設定します。
- 値（デフォルト：なし）
コンテンツ
タイトルの色を設定します。
- デフォルト
- カラーピッカー
タイトルの書体を設定します。
カスタム
- グローバルフォント：グローバルフォントの設定
- メイン
- サブ
- テキスト
- アクセント
タイポグラフィ
- フォント：
- デフォルト
- システム
- Googleフォント（数百種類）
- サイズ：
- 値（デフォルトなし）
- 単位：PX（デフォルト）、EM、REM、VW
- 太さ：
- デフォルト
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- Normal
- Bold
- 変換：
- デフォルト
- 大文字
- 小文字
- 先頭大文字
- ノーマル
- スタイル：
- デフォルト
- ノーマル
- イタリック
- 斜体
- 装飾：
- デフォルト
- 下線
- 上線
- 取消線
- なし
- 行の高さ：
- 値（デフォルトなし）
- 単位：PX、EM（デフォルト）
- 字間：値（デフォルトなし）
- ボタン：デフォルトに戻す
- ボタン：新規グローバルフォントの作成
タイトルとコンテンツの間隔を設定します。
- 値（デフォルト：なし）
メタデータの色を設定します。
- デフォルト
- カラーピッカー
メタデータの区切り文字の色を設定します。
- デフォルト
- カラーピッカー
メタデータの書体を設定します。
カスタム
- グローバルフォント：グローバルフォントの設定
- メイン
- サブ
- テキスト
- アクセント
タイポグラフィ
- フォント：
- デフォルト
- システム
- Googleフォント（数百種類）
- サイズ：
- 値（デフォルトなし）
- 単位：PX（デフォルト）、EM、REM、VW
- 太さ：
- デフォルト
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- Normal
- Bold
- 変換：
- デフォルト
- 大文字
- 小文字
- 先頭大文字
- ノーマル
- スタイル：
- デフォルト
- ノーマル
- イタリック
- 斜体
- 装飾：
- デフォルト
- 下線
- 上線
- 取消線
- なし
- 行の高さ：
- 値（デフォルトなし）
- 単位：PX、EM（デフォルト）
- 字間：値（デフォルトなし）
- ボタン：デフォルトに戻す
- ボタン：新規グローバルフォントの作成
メタデータと抜粋の間隔を設定します。
- 値（デフォルト：なし）
抜粋の色を設定します。
- デフォルト
- カラーピッカー
抜粋の書体を設定します。
カスタム
- グローバルフォント：グローバルフォントの設定
- メイン
- サブ
- テキスト
- アクセント
タイポグラフィ
- フォント：
- デフォルト
- システム
- Googleフォント（数百種類）
- サイズ：
- 値（デフォルトなし）
- 単位：PX（デフォルト）、EM、REM、VW
- 太さ：
- デフォルト
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- Normal
- Bold
- 変換：
- デフォルト
- 大文字
- 小文字
- 先頭大文字
- ノーマル
- スタイル：
- デフォルト
- ノーマル
- イタリック
- 斜体
- 装飾：
- デフォルト
- 下線
- 上線
- 取消線
- なし
- 行の高さ：
- 値（デフォルトなし）
- 単位：PX、EM（デフォルト）
- 字間：値（デフォルトなし）
- ボタン：デフォルトに戻す
- ボタン：新規グローバルフォントの作成
抜粋と続きを読むの間隔を設定します。
- 値（デフォルト：なし）
続きを読むの色を設定します。
- デフォルト
- カラーピッカー
続きを読むの書体を設定します。
カスタム
- グローバルフォント：グローバルフォントの設定
- メイン
- サブ
- テキスト
- アクセント
タイポグラフィ
- フォント：
- デフォルト
- システム
- Googleフォント（数百種類）
- サイズ：
- 値（デフォルトなし）
- 単位：PX（デフォルト）、EM、REM、VW
- 太さ：
- デフォルト
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- Normal
- Bold
- 変換：
- デフォルト
- 大文字
- 小文字
- 先頭大文字
- ノーマル
- スタイル：
- デフォルト
- ノーマル
- イタリック
- 斜体
- 装飾：
- デフォルト
- 下線
- 上線
- 取消線
- なし
- 行の高さ：
- 値（デフォルトなし）
- 単位：PX、EM（デフォルト）
- 字間：値（デフォルトなし）
- ボタン：デフォルトに戻す
- ボタン：新規グローバルフォントの作成
続きを読むテキストと投稿ボックスの下部の間隔を設定します。
- 値（デフォルト：なし）
高度な設定
高度な設定
マージン（枠線の外側）のスペースを設定します。
- 上、右、下、左：マージンの値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
- 単位：
- PX：ピクセル単位（デフォルト）
- EM：文字の高さを基準とした単位
- %：パーセント。全体で100%になるように
- REM：CSSで指定した単位
- ：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
パディング（枠線の内側）のスペースを設定します。
- 上、右、下、左：マージンの値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
- 単位：
- PX：ピクセル単位（デフォルト）
- EM：文字の高さを基準とした単位
- %：パーセント。全体で100%になるように
- REM：CSSで指定した単位
- ：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
z-indexとはボックスの重なり順序を指定するプロパティです。 重なりの順序を数値で指定します。 0を基準として、値が大きいものほど前面（手前）に表示されます。
- 値を入力します。（デフォルトなし）
- ：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
セクションのCSSIDを設定します
- 値を入力します。（デフォルトなし）
セクションのCSSクラスを設定します
- 値を入力します。（デフォルトなし）
モーション効果 PRO版
スクロール効果を [オン] に設定すると、ユーザーがページをスクロールしたときに発生するさまざまなアニメーションやインタラクションから選択できます。スクロール効果の詳細
- オフ（デフォルト）
- オン（オンにすると以下のオプションが設定できます）
縦スクロールは、スクロール中に要素をページとは異なる速度で、選択した方向と速度で移動させます。詳細
Direction（方向）
上か下かを選択します。
- Up（上）（デフォルト）
- Down（下）
Speed（速度）
縦スクロールの移動速度を 0～10 に設定します。
- 値（デフォルト：4）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:0%, Top: 100%）
ボタン：デフォルトに戻す
横スクロールとは、訪問者が上下にスクロールすると、それに応じて要素が左右に移動することを意味します。詳細
Direction（方向）
左か右かを選択します。
- To Left（左）（デフォルト）
- To Right（右）
Speed（速度）
横スクロールの移動速度を 0～10 に設定します。
- 値（デフォルト：4）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:0%, Top: 100%）
ボタン：デフォルトに戻す
透明度は、訪問者のスクロールに応じて、要素を徐々に透明化したり、可視化したりすることができます。例としては、スクロールに応じてタイトルが表示され、それに合わせて溶けていくというものがあります。詳細
効果には4つの種類があります。
フェードイン – 要素が透明な状態で始まり、徐々に見えるようになることを意味します。
フェードアウト – 要素が透明な状態で始まり、徐々に透明になります。
フェードアウトイン – 要素が可視状態で始まり、フェードアウトしてから再び可視状態になります。
フェードインアウト – 要素は透明な状態で始まり、可視状態になり、その後再び透明になります。
Direction（方向）
4つの効果から1つを選択します。
- Fade In（フェードイン）（デフォルト）
- Fade Out（フェードアウト）
- Fade Out In（フェードアウトイン）
- Fade In Out（フェードインアウト）
Level（レベル）
透過度を0～10の間で設定します。
- 値（デフォルト：10）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:20%, Top: 80%）
ボタン：デフォルトに戻す
この設定は透明度に似ていますが、透明度の代わりに要素がぼやけます。良い例としては、ユーザーが下にスクロールしたときにのみ適切なフォーカスが得られる背景画像があります。詳細
効果には4つの種類があります。
フェードイン – レベルとビューポートの設定に基づいて、要素がぼやけた状態で始まり、徐々にクリアになります。
フェードアウト – レベルとビューポートの設定に基づいて、要素はクリアな状態で始まり、徐々にぼやけた状態になります。
フェードアウトイン – レベルとビューポートの設定に基づいて、要素がクリアな状態で始まり、フェードアウトしてぼやけた状態になり、再びクリアな状態になります。
フェードインアウト – レベルとビューポートの設定に基づいて、要素がぼやけた状態で始まり、クリアになり、その後再びぼやけた状態になります。
Direction（方向）
4つの効果から1つを選択します。
- Fade In（フェードイン）（デフォルト）
- Fade Out（フェードアウト）
- Fade Out In（フェードアウトイン）
- Fade In Out（フェードインアウト）
Level（レベル）
透過度を0～10の間で設定します。
- 値（デフォルト：7）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:20%, Top: 80%）
ボタン：デフォルトに戻す
スクロールすると要素が回転します。詳細
メモ: 2つの設定、XとYのアンカーポイントは、要素が回転する軸を決定します。向きを左上に設定すると、要素の左上の点を中心に回転します。向きを中心に設定した場合、回転はその中心を中心に回転します。
Direction（方向）
左か右かを選択します。
- To Left（左）（デフォルト）
- To Right（右）
Speed（速度）
回転速度を 0～10 に設定します。
- 値（デフォルト：1）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:0%, Top: 100%）
ボタン：デフォルトに戻す
スケールは、スクロールに応じて要素を拡大・縮小することができます。詳細
Direction（方向）
スケールアップ、スケールダウン、スケールダウンアップ、スケールアップダウンから選択します。
- Scale Up（スケールアップ）（デフォルト）
- Scale Down（スケールダウン）
- Scale Down Up（スケールダウンアップ）
- Scale Up Down（スケールアップダウン）
Speed（速度）
スケーリング速度を 0～10 に設定します。
- 値（デフォルト：4）
Viewport（ビューポート）
ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、移動を開始するタイミングを決定します。例えば、ビューポートの値が50～100の間に設定されている場合、ビューポートの高さの半分の高さまでスクロールした後に初めて移動が開始されます。
- 値（デフォルト：Bottom:20%, Top: 80%）
ボタン：デフォルトに戻す
要素がスケールされる水平軸を左、中央、または右から選択します。
- Left（左）
- Center（中央）（デフォルト）
- Right（右）
要素がスケールされる垂直軸を選択し、上、中央、または下から選択します。
- Top（上）
- Center（中央）（デフォルト）
- Bottom（下）
デスクトップ、タブレット、モバイルデバイスにモーション効果を適用するには、選択します。
- Desktop（デスクトップ）
- Tablet（タブレット）
- Mobile（モバイル）
デフォルト、ビューポート、ページ全体から選択します。
- Default（デフォルト）
- Viewport（ビューポート）
- Entire Page（ページ全体）
訪問者のマウスの動きに関連して動く要素を設定します。詳細
- オフ（デフォルト）
- オン（オンにすると以下のオプションが設定できます）
訪問者のマウスの動きに関連して動く要素を設定します。詳細
- オフ（デフォルト）
- オン（オンにすると以下のオプションが設定できます）
鉛筆編集アイコン をクリックします。詳細
Direction（方向）
Opposite（反対側）とDirect（直接）から選択します。Opposite は、マウスの動きと反対方向に要素を移動させます。ダイレクトは、マウスの動きと同じ方向に要素を移動させます。
- Opposite（反対側）（デフォルト）
- Direct（直接）
Speed（速度）
速度を 0 から 10 に設定します。
- 値（デフォルト：1）
ボタン：デフォルトに戻す
Mouse Trackがマウスの動きに関連して要素を移動させるのと同様に、3D Tilt効果はカーソルの同じ動きに応じて要素を傾斜させます。詳細
Direction（方向）
Opposite（反対側）とDirect（直接）から選択します。Opposite は、マウスの動きと反対方向に要素を傾けます。ダイレクトは、マウスの動きと同じ方向に要素を傾けます。
- Opposite（反対側）（デフォルト）
- Direct（直接）
Speed（速度）
チルト速度を 0～10 に設定します。
- 値（デフォルト：4）
ボタン：デフォルトに戻す
スティッキースクロールエフェクトは、セクションやウィジェットをスティッキー（固定）に設定することで、画面の上部や下部にスティッキーが付くようにすることができます。詳細
- None（利用しない）（デフォルト）
- Top（上）
- Bottom（下）
ドロップダウンをクリックしてアニメーションを選択します。
：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
| Fading | Zooming | Bouncing | Sliding |
|---|---|---|---|
| Fade in | Zoom in | Bounce in | |
| Fade in Down | Zoom in Down | Bounce in Down | Slide in Down |
| Fade in Left | Zoom in Left | Bounce in Left | Slide in Left |
| Fade in Right | Zoom in Right | Bounce in Right | Slide in Right |
| Fade in up | Zoom in Up | Bounce in Up | Slide in Up |
| Rotating | Attention Seekers | Light Speed | Specials |
|---|---|---|---|
| Rotate in | Bounce | Light Speed in | Roll in |
| Rotate in Down Left | Flash | ||
| Rotate in Down Right | Pulse | ||
| Rotate in Up Left | Rubber Band | ||
| Rotate in Up Right | Shake | ||
| Head Shake | |||
| Swing | |||
| Tada | |||
| Wobble | |||
| Jello |
| Chrome | Firefox | Safari | Opera |
|---|---|---|---|
| サポートされています | サポートされています | サポートされています | サポートされています |
| Edge | Internet Explorer |
|---|---|
| サポートされています | サポートされていません |
注意:
Elementorはユーザが設定できる "reduced motion property "の設定を尊重します。ユーザが以下のいずれかを設定している場合、そのユーザに対してモーション効果は無効になります。
モーション効果が無効になる設定
Macの場合："システム環境設定＞アクセシビリティ＞ディスプレイ」で「動きを減らす」のチェックボックスをオン／オフする
iOSの場合：「設定＞一般＞アクセシビリティ」で「動きを減らす」のオンオフを切り替える
Windows10の場合： "設定 > アクセスのしやすさ > 表示 > Windowsの簡素化とパーソナライズ"
Safariでモーション効果が効かない場合
Safariでマウスエフェクトが表示されない、またはSafariで要素が消える問題が発生している場合、これはWordPressで使用されている古いjQueryのバージョンが原因です。場合によっては、Safari経由でマウストラックのエフェクトを表示すると、jQueryのエラーが発生して、例えばカルーセルの矢印が消えてしまうなど、要素が消えてしまうことがあります。この場合、「最大コールスタックサイズが超過しました」を参照するエラーが表示されることもあります。この問題を解決するには、モーション エフェクト付きのウィジェットから入り口のアニメーションを削除するか、スクロールとマウス エフェクトが同時に有効になっている領域からマウス エフェクトを削除します。
背景 PRO版
通常、マウスオーバー共に、以下２種の背景タイプを選択できます。
- クラッシック
- グラデーション
色：
１つ目の色を選択します。
- デフォルト
- カラーピッカー
場所：
１つ目の色の位置を選択します。
- 値（デフォルト：0）
２つ目の色：
２つ目の色を選択します。
- デフォルト
- カラーピッカー
場所：
２つ目の色の位置を選択します。
- 値（デフォルト：100）
タイプ：
グラデーションの種類を選択します。
- 線状
- 放射状
角度（線状）：
タイプ：線状を選んだ際の角度を設定します。
- 値（デフォルト：180）
位置（放射状）：
タイプ：放射状を選んだ際の位置を選択します。
- 中央の中
- 左中央
- 右中央
- 上 中央寄せ
- 左上
- 右上
- 中央下
- 左下
- 右下
マウスオーバーした時のスライドの変化の時間を設定します。
- 値（デフォルト：0.3）
枠線
ボーダー（枠線）タイプを選択します。
- なし
- 直線
- 2本線
- 点線
- 破線
- 溝
枠線の幅を設定できます。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
枠線の色を選択します。
- デフォルト
- カラーピッカー
枠線の角を丸くできます。
- 上、右、下、左：値を入力します。
- ：値をまとめて設定（デフォルト）、クリックで個別設定
- 単位：
- PX：ピクセル単位（デフォルト）
- %：パーセント。全体で100%になるように
：デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
枠線のまわりに影をつけます。
- 色：カラーピッカー
- 水平：値（デフォルト0）
- 垂直：値（デフォルト0）
- ぼかし：値（デフォルト10）
- スプレッド：値（デフォルト0）
- 位置： [アウトライン、インセット]
- トランジション所要時間：値（デフォルトなし）変化までの時間を設定します。
マウスオーバーした時のスライドの変化の時間を設定します。
- 値（デフォルト：0.3）
レスポンシブ
デスクトップ表示のとき、このセクションを表示または非表示にするかを設定します。
- 表示
- 非表示
注：レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
タブレット表示のとき、このセクションを表示または非表示にするかを設定します。
- 表示
- 非表示
注：レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
モバイル表示のとき、このセクションを表示または非表示にするかを設定します。
- 表示
- 非表示
注：レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
属性 PRO版
ヒント：
ラッパー要素にカスタム属性を設定します。アトリビュート・キーと値の間には、「｜」文字を使います。
カスタムCSS PRO版
のメッセージが出てPRO版の利用をアナウンスします。カスタム CSS のご紹介
カスタム CSS を使用すると、任意のウィジェットに CSS コードを追加して、エディタでライブ表示することができます。
Elementor Proを使えば、セクション、カラム、ウィジェットにカスタムCSSを追加することができます。詳細
- 値（CSS）
注意:
特定の要素をターゲットにする場合、排他的にターゲットにしたいタグやクラスの前に `selector` を追加してください。
例：selector a { color: red;}
例：selector a { color: red;}
注意:
一部のカスタムCSSコードがElementorと干渉したり、衝突したりして、Elementorを使ってフォントやその他のスタイリングオプションを編集できないなどの問題を引き起こす可能性があることにも注意してください。これらの問題が発生している場合は、カスタムCSSコードを安全な場所にコピーし、ページからカスタムCSSコードを一時的に削除し、そのコードが問題の原因となっているかどうかを確認してください。