黄色の鉛筆で WordPress テーマのデザインを微調整する

WordPress テーマのデザインを簡単にカスタマイズしたい場合は、Yellow Pencil WordPress プラグインがあなたのサイトに必要なアドオンかもしれません。このビジュアルスタイルエディターを使用すると、コード行に触れることなく、サイトの外観を変更できます。

Yellow Pencil を使用すると、訪問者を驚かせる美しいサイトを作成しながら、Web デザインの楽しさを学ぶことができます。 Web サイトのあらゆる要素をフロントエンドでリアルタイムに編集します。サイトのデザインを制限するのはあなた自身の想像力だけです。

Yellow Pencil のプレミアムバージョンを使用するためのこの詳細なガイドでは、ポイントアンドクリックによるライブ CSS 編集機能や WordPress テーマとの互換性など、その主な機能について説明します。次に、すぐにセットアップとデザインを行えるようにする、提供されるユーザーエクスペリエンスを見ていきます。

黄色の鉛筆は誰のためのものですか?

サイトをより迅速にカスタマイズする方法を探している場合でも、CSS に詳しくない場合でも、Yellow Pencil が役に立ちます。このプラグインには高度なツールとカスタマイズオプションが含まれており、クライアント向けに新しいサイトを作成しようとしている専門家に最適です。

ただし、コーディングが不要で、使いやすく、直感的なインターフェイス、詳細なサポートドキュメントがあるため、設計経験が限られている人でもこのプラグインにアクセスできます。つまり、WordPress Web サイトの外観をカスタマイズしたい場合は、Yellow Pencil が最適なビジュアルスタイルエディターです。

つまり、WordPress Web サイトの外観をカスタマイズしたい場合は、Yellow Pencil が最適なビジュアルスタイルエディターです。

イエローペンシルの主な特徴

Yellow Pencil は本当に印象的なデザインツールです。利用可能な機能とツールを使用すると、サイトの外観を完全に制御できます。あらゆる WordPress テーマやプラグインで使用でき、スタイリッシュで応答性の高い Web ページを作成できます。

要素インスペクターを使用すると、WordPress Web サイト上のすべての視覚要素を選択してカスタマイズできます。色、背景、境界線などを編集します。これらはすべてサイトのフロントエンドでリアルタイムで行われるため、変更を加えたときにその変更を確認できます。 Yellow Pencil はバックグラウンドでコードを生成するため、望まない限り、自分でコードを確認する必要はありません。その他の機能は次のとおりです。

ドラッグアンドドロップして要素の位置を変更します
マウスをタッチして要素のサイズを変更する
600 個以上のフォント、300 個以上の背景パターン、50 個以上のアニメーションなどから選択できます
無制限の色が利用可能、または Yellow Pencil のモダンなカラーパレットから選択可能
ライブCSSエディターを使用する

この WordPress ビジュアルスタイルエディターを最大限に活用するために、広範なドキュメントとサポートも利用できます。

これで、Yellow Pencil が何を提供するかがわかりました。しかし、どうやって始めればよいのでしょうか? ユーザーエクスペリエンスは、提供される機能と同じくらい優れているのでしょうか?

黄色の鉛筆のインストール方法

Yellow Pencil は非常に素早く簡単にインストールできます。 CodeCanyon からプラグインを購入したら（またはプラグインが無料で含まれる New York などのプレミアムテーマを購入したら）、Envato のダウンロードページから「インストール可能な WordPress ファイルのみ」をダウンロードします（または、WordPress で入手可能な無料バージョンを使用することもできます）。組織）。

次に、WordPress ダッシュボードを開きます。「プラグイン」>「新規追加」を選択します。

[プラグインの追加] ページで、[プラグインのアップロード] > [ファイルの選択] をクリックします。

ダウンロードした場所から「waspthemes- yellow-pencil.zip」を選択します。「今すぐインストール」をクリックします。

プラグインがインストールされたら、「有効化」をクリックします。プラグインの購入時に提供されたアクティベーションコードを入力します。これにより、リリースされたプラグインの更新にアクセスできるようになります。

アクティブ化すると、イエローページのウェルカムページがダッシュボードに表示されます。「リソース」には、プラグインのドキュメント、チュートリアル、開始するために必要なその他のヘルプとサポートがあります。

準備ができたら、「始めましょう」をクリックします。これにより、直接編集モードに移行します。

黄色の鉛筆インターフェイスを理解する

Yellow Pencil インターフェイスは非常に明確で直感的に使用できます。ページの左側にあるバーには、使用可能なツールが表示されます。

ページの右側にあるパネルはエディターパネルです。ページ上の要素が選択されていない場合は、編集可能な 3 つのカスタマイズタイプが表示されます。

ページ上の要素をクリックすると、エディタパネルが変更され、スタイルプロパティが含まれます。

選択した要素の周囲に青いボックスが表示され、追加のカスタマイズオプションが表示されます。

必要となる重要なツール

左側のツールバーには多数のツールが表示されますが、そのうちのいくつかは、開始するのにすぐに重要なものです…

要素インスペクター – ページ上の任意の要素を選択してカスタマイズできます。

元に戻すとやり直し – 編集を元に戻したりやり直したりできることを理解した上で、ページ上で別のデザインを安全に試してください。

全画面 – 全画面で作業し、カスタマイズ内容を明確に表示します。

エディターパネルには 3 つの重要なボタンが組み込まれています…

ライブプレビュー – 黄色の鉛筆インターフェイスを表示せずに、変更をプレビューします。

変更をリセット – 編集内容が気に入らない場合は、加えた変更をリセットするだけです。

保存 – 作業をプレビューして結果に満足したら、保存ボタンをクリックするだけです。

カスタマイズタイプの選択

ページ上の要素を選択して編集を開始する前に、まずカスタマイズタイプを選択する必要があります。これらは、要素が選択されていないときにエディターパネルに表示されます。 3 つのタイプから選択できます。グローバルカスタマイズ、1 ページのカスタマイズ、およびテンプレートのカスタマイズ。

それぞれのタイプは比較的自明です。「グローバルカスタマイズ」を選択すると、加えた変更がサイトのすべてのページに適用されます。「1 ページをカスタマイズ」を選択した場合、すべての編集は作業中のページにのみ影響します。「テンプレートのカスタマイズ」は現在の投稿タイプに適用され、すべての製品ページまたはブログページを設定する場合に適したオプションです。

選択したカスタマイズタイプがエディタパネルの上部に表示されます。作業を保存する前に、正しいタイプで編集していることを必ず確認してください。

黄色の鉛筆で何ができますか?

インターフェースに慣れたら、早速始めましょう。以下は、このプラグインが提供する多数のカスタマイズツールと機能の一部のサンプルです。これらは、美しくプロフェッショナルなウェブサイトを制作する上で役立ちます。

タイポグラフィを変更する

Web サイトに適したフォントを選択することは重要な作業です。 Yellow Pencil には、Web サイトのデザインに適合し、読者の注意を引く方法でテキストのスタイルを設定するのに役立つさまざまなオプションが用意されています。

編集したいテキストのセクションをクリックし、エディターパネルから「テキスト」を選択します。これにより、タイポグラフィのカスタマイズオプションが表示されます。 600 以上のフォントタイプから選択し、フォントサイズを変更し、行の高さを変更し、文字や単語の間隔を制御するなど、さまざまなことができます。また、Yellow Pencil の最新のカラーパレットから 1 つを選択してテキストの色を変更したり、独自の色を選択したりすることもできます。

枠線を追加する

ページ上の特定の項目に枠線を追加すると、重要な情報が強調表示され、効果的なビジュアルを作成できます。枠線を追加したい画像またはテキストを選択した後、エディターパネルから「枠線」を選択します。 4つのスタイルがあります

枠線を追加したい画像またはテキストを選択した後、エディターパネルから「枠線」を選択します。枠線のスタイルは 4 つから選択できます。実線、点線、破線、または非表示。境界線の幅を変更して境界線をより明確にしたり、色を変更したりすることもできます。

印象的な機能は、境界線の各辺を個別にカスタマイズできることです。つまり、4 つの側面のそれぞれに異なる色、スタイル、厚さを与えることができ、ユニークで目を引く外観が得られます。

背景を変更する

印象的な背景は、要素をポップにするのに役立ちます。 Yellow Pencil を使用すると、サイト上のすべての要素の背景を変更できます。

これを行うには、選択した項目をクリックし、エディターパネルから「背景」を選択します。

ここでは、背景色を変更したり、Yellow Pencils 300 以上のパターンから 1 つを選択したり、CSS グラデーションを選択したりできます。独自のカスタム画像をアップロードするオプションもあります。背景を決定したら、背景のサイズと位置を調整し、画像を追加した場合は画像を固定するか、ページの残りの部分と一緒にスクロールするかを選択できます。

アニメーションを使用する

アニメーションの使用は、コンテンツに影響を与えるもう 1 つの優れた方法です。エディタパネルの「アニメーション」で、選択した要素にアニメーション効果を追加できます。

ライブアニメーションマネージャーで、ズームインやフェードアウトから、跳ねたり、回転したりするまで、50 以上のアニメーションから 1 つを選択します。必要に応じて、持続時間と遅延を制御したり、複数のアニメーションを同時に実行したりできます。これにより、サイトにオリジナリティが与えられるとともに、ページの重要な側面に注目が集まります。ツールバーのアニメーションジェネレーターを選択して、独自のカスタムアニメーションを作成してみることもできます。

要素のサイズ変更と位置変更

Yellow Pencil を使用すると、要素のサイズ変更と位置変更が非常に簡単になります。

サイズを変更するには、項目を直接クリックして、その周囲に青色で強調表示されたボックスが表示されます。次に、青いボックスの水平線と垂直線をドラッグしてサイズを変更します。

要素の位置を変更するには、要素をクリックしてマウスボタンを押したままにします。ページ上の適切な位置にドラッグアンドドロップします。

このドラッグアンドドロップ機能の欠点は、モバイルでの表示に問題が発生する可能性があることです。ツールバーにあるレスポンシブツールを使用して、Web ページがすべての画面サイズでどのように表示されるかを確認します。それに応じてデザインを変更する必要がある場合があります。

価格設定

Yellow Pencil WordPress プラグインは、CodeCanyon から 26 ドルで入手できます。これには 6 か月のサポートが含まれますが、追加料金 7.88 ドルを支払ってサポートを最大 12 か月まで延長するオプションもあります。

最終的な考え

Yellow Pencil は、WordPress サイトの外観をカスタマイズしたい場合に最適なツールです。機能と使いやすさにより、カスタム WordPress Web サイトを作成するために必要なすべてが提供されます。最良の結果を得るには、サイトをどのように見せたいかについて明確なビジョンを持っていることを確認してください。

Yellow Pencil には、WordPress ウェブサイトをパーソナライズするために必要な機能がありますか?以下でご意見をお聞かせください…