WordPressテーマのデザインを簡単にカスタマイズしたい場合は、 Yellow Pencil WordPressプラグイン あなたのサイトに必要な単なるアドオンかもしれません。このビジュアルスタイルエディターを使用すると、コードの行に触れることなく、サイトの外観を変更できます。.
イエローペンシルを使用すると、Webデザインの楽しさがわかり、訪問者を魅了する美しいサイトを作成できます。ウェブサイトのあらゆる要素を、すべてフロントエンドでリアルタイムで編集します。サイトのデザインに対する唯一の制限は、あなた自身の想像力です.
イエローペンシルのプレミアムバージョンを使用するためのこの詳細なガイドでは、ポイントアンドクリックのライブCSS編集機能やWordPressテーマとの互換性など、主な機能について説明します。次に、提供されているユーザーエクスペリエンスを確認し、セットアップと設計をすぐに開始できるようにします。.
黄色の鉛筆は誰のためのものですか?
サイトをより速くカスタマイズする方法を探している場合でも、CSSに慣れていない場合でも、黄色の鉛筆が役立ちます。このプラグインには高度なツールとカスタマイズオプションが含まれており、クライアント用に新しいサイトを作成したいプロフェッショナルに最適です。.
ただし、必要なコーディングの欠如、使いやすさ、直感的なインターフェース、詳細なサポートドキュメントにより、設計の経験が浅い人でもこのプラグインにアクセスできます。つまり、WordPress Webサイトの外観をカスタマイズしたい場合、Yellow Pencilが視覚的なスタイルエディターになります。.
つまり、WordPress Webサイトの外観をカスタマイズしたい場合は、Yellow Pencilがビジュアルスタイルエディターになります。.
イエローペンシルの主な特徴
イエローペンシルは本当に印象的なデザインツールです。利用可能な機能とツールにより、サイトの外観を完全に制御できます。任意のWordPressテーマまたはプラグインで使用でき、スタイリッシュで応答性の高いWebページを作成できます.
Element Inspectorを使用すると、WordPress Webサイトのすべての視覚要素を選択してカスタマイズできます。色、背景、境界線などを編集します。これはすべて、サイトのフロントエンドでリアルタイムに行われるため、変更を加えながら変更を表示できます。 Yellow Pencilはバックグラウンドでコードを生成するので、必要がない限り、自分でコードを確認する必要はありません。その他の機能は次のとおりです。
ドラッグアンドドロップで要素を再配置 マウスに触れるだけで要素のサイズを変更する 600以上のフォント、300以上の背景パターン、50以上のアニメーションなどから選択 無制限の色が利用可能、またはイエローペンシルの最新のカラーパレットから選択 ライブCSSエディターを使用する このWordPressビジュアルスタイルエディターを最大限に活用するために役立つ広範なドキュメントとサポートも利用できます.
これで、イエローペンシルの機能がわかりました。しかし、どのように始めればいいですか?ユーザーエクスペリエンスは、それが提供する機能と同じくらい印象的です?
黄色の鉛筆をインストールする方法 イエローペンシルは非常に素早く簡単にインストールできます。 CodeCanyonからプラグインを購入した後(またはプラグインを無料で含むニューヨークのようなプレミアムテーマを購入した後)、Envatoのダウンロードページから「インストール可能なWordPressファイルのみ」をダウンロードします(または、次のサイトで入手できる無料バージョンを使用できます) WordPress.org ).
次に、WordPressダッシュボードを開きます。 [プラグイン]> [新規追加]を選択します.
[プラグインの追加]ページで、[プラグインのアップロード]> [ファイルの選択]をクリックします.
ダウンロードした場所から「waspthemes-yellow-pencil.zip」を選択します。 [今すぐインストール]をクリックします.
プラグインをインストールしたら、[アクティベート]をクリックします。プラグインの購入時に指定したアクティベーションコードを入力します。これにより、プラグインの更新がリリースされたときにそれらにアクセスできます。.
アクティベーション後、イエローページのウェルカムページがダッシュボードに表示されます。 「リソース」の下に、プラグインのドキュメント、チュートリアル、およびその他のヘルプとサポートがあり、開始する必要がある場合があります。.
準備ができたら、「始めましょう」をクリックします。これにより、直接編集モードになります.
イエローペンシルインターフェイスについて Yellow Pencilのインターフェースは非常に明確で、直感的に使用できます。ページの左側にあるバーには、使用可能なツールが表示されます.
ページの右側にあるパネルは、エディターパネルです。ページ上の要素が選択されていない場合は、編集可能な3つのカスタマイズタイプが表示されます。.
ページ上の要素をクリックすると、エディターパネルが変更され、スタイルプロパティが含まれます。.
選択した要素の周りに青いボックスが表示され、追加のカスタマイズオプションが表示されます.
必要な重要なツール 左側のツールバーには多数のツールが表示されますが、いくつかのツールはすぐに使用を開始するのに役立ちます…
Element Inspector –これにより、ページ上の任意の要素を選択してカスタマイズできます. 元に戻すとやり直し–編集を元に戻したりやり直したりできるという知識のもとで、ページ上のさまざまなデザインを安全に試してください。. フルスクリーン–フルスクリーンで作業し、カスタマイズした内容を明確に表示します. エディタパネルには3つの重要なボタンが組み込まれています…
ライブプレビュー–表示されている黄色の鉛筆のインターフェイスなしで変更をプレビュー. 変更をリセット–編集内容を気に入りませんか?行った変更をリセットするだけです. 保存–作業をプレビューし、結果に満足したら、保存ボタンをクリックするだけです. カスタマイジングタイプの選択
ページ上の要素を選択して編集を開始する前に、まずカスタマイズタイプを選択する必要があります。要素が選択されていない場合、これらはエディタパネルに表示されます。 3つのタイプから選択できます。グローバルカスタマイズ、1ページのカスタマイズ、およびテンプレートのカスタマイズ.
それぞれのタイプは比較的自明です。 「グローバルカスタマイズ」を選択すると、加えた変更がサイトのすべてのページに適用されます。 [1つのページをカスタマイズ]を選択すると、すべての編集は作業中のページにのみ影響します。 「テンプレートのカスタマイズ」は現在の投稿タイプに適用されます。これは、すべての製品またはブログページを設定する場合に適したオプションです。.
選択したカスタマイズタイプは、エディタパネルの上部に表示されます。作業を保存する前に、正しいタイプで編集していることを確認してください.
黄色い鉛筆でできること? インターフェースに慣れてきたら、いよいよ始めましょう。以下は、このプラグインが提供する多数のカスタマイズツールと機能の一部のサンプルです。これらは、美しくプロフェッショナルなウェブサイトを作成する方法のお手伝いをします.
タイポグラフィを変更する
Webサイトに適したフォントを選択することは重要な作業です。イエローペンシルにはさまざまなオプションが用意されており、Webサイトのデザインに合った方法でテキストのスタイルを設定し、読者の注意を引くことができます。.
編集するテキストのセクションをクリックして、エディタパネルから[テキスト]を選択します。これにより、タイポグラフィのカスタマイズオプションが表示されます。 600以上のフォントタイプから選択し、フォントのサイズを変更し、行の高さを変更し、文字と単語の間隔を制御するだけでなく、その他にも多くのことができます。イエローペンシルの最新のカラーパレットから選択してテキストの色を変更したり、独自の色を選択することもできます.
ボーダーを追加
ページ上の特定のアイテムに境界線を追加すると、重要な情報を強調し、効果的なビジュアルを作成するのに役立ちます。ボーダーを追加する画像またはテキストを選択した後、エディターパネルから[ボーダー]を選択します。の4つのスタイルがあります
ボーダーを追加する画像またはテキストを選択した後、エディターパネルから[ボーダー]を選択します。ボーダーには4つのスタイルがあります。実線、点線、破線、または非表示。境界線の幅を変更して、境界をより明確にし、色を変更することもできます.
印象的な機能は、境界線の両側を個別にカスタマイズできることです。これは、4つの側面のそれぞれに異なる色、スタイル、厚さを与えることができ、独特で目を引く外観をもたらすことを意味します.
背景を変える
印象的な背景は、要素をポップにするのに役立ちます。黄色の鉛筆を使用すると、サイト上のすべての要素の背景を変更できます.
そのためには、選択したアイテムをクリックして、エディターパネルから[背景]を選択します。.
ここでは、背景色を変更したり、Yellow Pencils 300+パターンの1つから選択したり、CSSグラデーションを選択したりできます。独自のカスタム画像をアップロードすることもできます。背景を決定したら、背景のサイズ、位置を調整できます。画像を追加した場合は、静止画像か、ページの残りの部分でスクロールするかを選択できます.
アニメーションを使用する
アニメーションを使用することは、コンテンツに影響を与えるのに役立つもう1つの優れた方法です。エディタパネルの[アニメーション]で、選択した要素にアニメーション効果を追加できます.
ライブアニメーションマネージャーで、ズームインやフェードアウトからバウンス、スピンなど、50以上のアニメーションの1つを選択します。必要に応じて、期間と遅延を制御したり、複数のアニメーションを同時に実行したりできます。これはあなたのサイトの独創性を与えるだけでなく、あなたのページの重要な側面に注意を引くでしょう。ツールバーのアニメーションジェネレーターを選択して、独自のカスタムアニメーションを作成することもできます。.
要素のサイズ変更と再配置 Yellow Pencilを使用すると、任意の要素のサイズ変更と再配置が非常に簡単です.
サイズを変更するには、項目を直接クリックして、青色で強調表示されたボックスをその周囲に表示します。次に、青いボックスの水平線と垂直線をドラッグしてサイズを変更します.
要素の位置を変更するには、要素をクリックして、マウスボタンを押したままにします。ページ上の適切な位置にドラッグアンドドロップします.
このドラッグアンドドロップ機能の欠点は、モバイルでの表示に問題が発生する可能性があることです。ツールバーにあるレスポンシブツールを使用して、Webページがすべての画面サイズでどのように表示されるかを確認します。それに応じてデザインを変更する必要があるかもしれません.
価格
Yellow Pencil WordPressプラグインは、CodeCanyonから26ドルで入手できます。これには6か月のサポートが含まれますが、サポートを最大12か月まで延長するために追加の7.88ドルを支払うオプションがあります.
最終的な考え Yellow Pencilは、WordPressサイトの外観をカスタマイズする場合に使用できる優れたツールです。機能と使いやすさは、カスタムWordPress Webサイトを作成するために必要なすべてを提供します。最良の結果を得るには、サイトの外観を明確にするビジョンがあることを確認してください.
Yellow Pencilには、WordPress Webサイトをパーソナライズするために必要な機能がありますか?以下にあなたの考えを共有してください…
07.06.2020
黄色い鉛筆でWordPressテーマのデザインを微調整する
Jeffrey Wilson チュートリアル
WordPressテーマのデザインを簡単にカスタマイズしたい場合は、 Yellow Pencil WordPressプラグイン あなたのサイトに必要な単なるアドオンかもしれません。このビジュアルスタイルエディターを使用すると、コードの行に触れることなく、サイトの外観を変更できます。.
イエローペンシルを使用すると、Webデザインの楽しさがわかり、訪問者を魅了する美しいサイトを作成できます。ウェブサイトのあらゆる要素を、すべてフロントエンドでリアルタイムで編集します。サイトのデザインに対する唯一の制限は、あなた自身の想像力です.
イエローペンシルのプレミアムバージョンを使用するためのこの詳細なガイドでは、ポイントアンドクリックのライブCSS編集機能やWordPressテーマとの互換性など、主な機能について説明します。次に、提供されているユーザーエクスペリエンスを確認し、セットアップと設計をすぐに開始できるようにします。.
Contents
黄色の鉛筆は誰のためのものですか?
サイトをより速くカスタマイズする方法を探している場合でも、CSSに慣れていない場合でも、黄色の鉛筆が役立ちます。このプラグインには高度なツールとカスタマイズオプションが含まれており、クライアント用に新しいサイトを作成したいプロフェッショナルに最適です。.
ただし、必要なコーディングの欠如、使いやすさ、直感的なインターフェース、詳細なサポートドキュメントにより、設計の経験が浅い人でもこのプラグインにアクセスできます。つまり、WordPress Webサイトの外観をカスタマイズしたい場合、Yellow Pencilが視覚的なスタイルエディターになります。.
つまり、WordPress Webサイトの外観をカスタマイズしたい場合は、Yellow Pencilがビジュアルスタイルエディターになります。.
イエローペンシルの主な特徴
イエローペンシルは本当に印象的なデザインツールです。利用可能な機能とツールにより、サイトの外観を完全に制御できます。任意のWordPressテーマまたはプラグインで使用でき、スタイリッシュで応答性の高いWebページを作成できます.
Element Inspectorを使用すると、WordPress Webサイトのすべての視覚要素を選択してカスタマイズできます。色、背景、境界線などを編集します。これはすべて、サイトのフロントエンドでリアルタイムに行われるため、変更を加えながら変更を表示できます。 Yellow Pencilはバックグラウンドでコードを生成するので、必要がない限り、自分でコードを確認する必要はありません。その他の機能は次のとおりです。
このWordPressビジュアルスタイルエディターを最大限に活用するために役立つ広範なドキュメントとサポートも利用できます.
これで、イエローペンシルの機能がわかりました。しかし、どのように始めればいいですか?ユーザーエクスペリエンスは、それが提供する機能と同じくらい印象的です?
黄色の鉛筆をインストールする方法
イエローペンシルは非常に素早く簡単にインストールできます。 CodeCanyonからプラグインを購入した後(またはプラグインを無料で含むニューヨークのようなプレミアムテーマを購入した後)、Envatoのダウンロードページから「インストール可能なWordPressファイルのみ」をダウンロードします(または、次のサイトで入手できる無料バージョンを使用できます) WordPress.org).
次に、WordPressダッシュボードを開きます。 [プラグイン]> [新規追加]を選択します.
[プラグインの追加]ページで、[プラグインのアップロード]> [ファイルの選択]をクリックします.
ダウンロードした場所から「waspthemes-yellow-pencil.zip」を選択します。 [今すぐインストール]をクリックします.
プラグインをインストールしたら、[アクティベート]をクリックします。プラグインの購入時に指定したアクティベーションコードを入力します。これにより、プラグインの更新がリリースされたときにそれらにアクセスできます。.
アクティベーション後、イエローページのウェルカムページがダッシュボードに表示されます。 「リソース」の下に、プラグインのドキュメント、チュートリアル、およびその他のヘルプとサポートがあり、開始する必要がある場合があります。.
準備ができたら、「始めましょう」をクリックします。これにより、直接編集モードになります.
イエローペンシルインターフェイスについて
Yellow Pencilのインターフェースは非常に明確で、直感的に使用できます。ページの左側にあるバーには、使用可能なツールが表示されます.
ページの右側にあるパネルは、エディターパネルです。ページ上の要素が選択されていない場合は、編集可能な3つのカスタマイズタイプが表示されます。.
ページ上の要素をクリックすると、エディターパネルが変更され、スタイルプロパティが含まれます。.
選択した要素の周りに青いボックスが表示され、追加のカスタマイズオプションが表示されます.
必要な重要なツール
左側のツールバーには多数のツールが表示されますが、いくつかのツールはすぐに使用を開始するのに役立ちます…
エディタパネルには3つの重要なボタンが組み込まれています…
カスタマイジングタイプの選択
ページ上の要素を選択して編集を開始する前に、まずカスタマイズタイプを選択する必要があります。要素が選択されていない場合、これらはエディタパネルに表示されます。 3つのタイプから選択できます。グローバルカスタマイズ、1ページのカスタマイズ、およびテンプレートのカスタマイズ.
それぞれのタイプは比較的自明です。 「グローバルカスタマイズ」を選択すると、加えた変更がサイトのすべてのページに適用されます。 [1つのページをカスタマイズ]を選択すると、すべての編集は作業中のページにのみ影響します。 「テンプレートのカスタマイズ」は現在の投稿タイプに適用されます。これは、すべての製品またはブログページを設定する場合に適したオプションです。.
選択したカスタマイズタイプは、エディタパネルの上部に表示されます。作業を保存する前に、正しいタイプで編集していることを確認してください.
黄色い鉛筆でできること?
インターフェースに慣れてきたら、いよいよ始めましょう。以下は、このプラグインが提供する多数のカスタマイズツールと機能の一部のサンプルです。これらは、美しくプロフェッショナルなウェブサイトを作成する方法のお手伝いをします.
タイポグラフィを変更する
Webサイトに適したフォントを選択することは重要な作業です。イエローペンシルにはさまざまなオプションが用意されており、Webサイトのデザインに合った方法でテキストのスタイルを設定し、読者の注意を引くことができます。.
編集するテキストのセクションをクリックして、エディタパネルから[テキスト]を選択します。これにより、タイポグラフィのカスタマイズオプションが表示されます。 600以上のフォントタイプから選択し、フォントのサイズを変更し、行の高さを変更し、文字と単語の間隔を制御するだけでなく、その他にも多くのことができます。イエローペンシルの最新のカラーパレットから選択してテキストの色を変更したり、独自の色を選択することもできます.
ボーダーを追加
ページ上の特定のアイテムに境界線を追加すると、重要な情報を強調し、効果的なビジュアルを作成するのに役立ちます。ボーダーを追加する画像またはテキストを選択した後、エディターパネルから[ボーダー]を選択します。の4つのスタイルがあります
ボーダーを追加する画像またはテキストを選択した後、エディターパネルから[ボーダー]を選択します。ボーダーには4つのスタイルがあります。実線、点線、破線、または非表示。境界線の幅を変更して、境界をより明確にし、色を変更することもできます.
印象的な機能は、境界線の両側を個別にカスタマイズできることです。これは、4つの側面のそれぞれに異なる色、スタイル、厚さを与えることができ、独特で目を引く外観をもたらすことを意味します.
背景を変える
印象的な背景は、要素をポップにするのに役立ちます。黄色の鉛筆を使用すると、サイト上のすべての要素の背景を変更できます.
そのためには、選択したアイテムをクリックして、エディターパネルから[背景]を選択します。.
ここでは、背景色を変更したり、Yellow Pencils 300+パターンの1つから選択したり、CSSグラデーションを選択したりできます。独自のカスタム画像をアップロードすることもできます。背景を決定したら、背景のサイズ、位置を調整できます。画像を追加した場合は、静止画像か、ページの残りの部分でスクロールするかを選択できます.
アニメーションを使用する
アニメーションを使用することは、コンテンツに影響を与えるのに役立つもう1つの優れた方法です。エディタパネルの[アニメーション]で、選択した要素にアニメーション効果を追加できます.
ライブアニメーションマネージャーで、ズームインやフェードアウトからバウンス、スピンなど、50以上のアニメーションの1つを選択します。必要に応じて、期間と遅延を制御したり、複数のアニメーションを同時に実行したりできます。これはあなたのサイトの独創性を与えるだけでなく、あなたのページの重要な側面に注意を引くでしょう。ツールバーのアニメーションジェネレーターを選択して、独自のカスタムアニメーションを作成することもできます。.
要素のサイズ変更と再配置
Yellow Pencilを使用すると、任意の要素のサイズ変更と再配置が非常に簡単です.
サイズを変更するには、項目を直接クリックして、青色で強調表示されたボックスをその周囲に表示します。次に、青いボックスの水平線と垂直線をドラッグしてサイズを変更します.
要素の位置を変更するには、要素をクリックして、マウスボタンを押したままにします。ページ上の適切な位置にドラッグアンドドロップします.
このドラッグアンドドロップ機能の欠点は、モバイルでの表示に問題が発生する可能性があることです。ツールバーにあるレスポンシブツールを使用して、Webページがすべての画面サイズでどのように表示されるかを確認します。それに応じてデザインを変更する必要があるかもしれません.
価格
Yellow Pencil WordPressプラグインは、CodeCanyonから26ドルで入手できます。これには6か月のサポートが含まれますが、サポートを最大12か月まで延長するために追加の7.88ドルを支払うオプションがあります.
最終的な考え
Yellow Pencilは、WordPressサイトの外観をカスタマイズする場合に使用できる優れたツールです。機能と使いやすさは、カスタムWordPress Webサイトを作成するために必要なすべてを提供します。最良の結果を得るには、サイトの外観を明確にするビジョンがあることを確認してください.
Yellow Pencilには、WordPress Webサイトをパーソナライズするために必要な機能がありますか?以下にあなたの考えを共有してください…