変更方法ワードプレスのリンクの色
WordPressでは、ハイパーリンクの書式設定がすぐに使えます。テーマカスタマイザー、WordPressデフォルトのブロックエディタ、またはカスタムCSSの実装です。
方法1:WordPressテーマカスタマイザーを使う
カスタマイザーのインターフェースは、使用するテーマによって若干異なる場合があります。ただし、以下に手順の概要を示します:
- WordPressの管理ダッシュボードにログインし、次のページに移動します。外装状態 > カスタマイズまたは外観>テーマ選択したテーマについてカスタマイズ.
- テーマカスタマイザーに入ったら、左のナビゲーションバーを下にスクロールし、"カラー".
- カスタマイザーからWordPressテーマカラーにアクセス。
- リンクカラーのオプションが見つかるまでもう一度下にスクロールし、希望の色合いに変更する。
- テーマカスタマイザーからリンクカラーを変更
結果は以下の通り:
テーマカスタマイザーを使って、リンクの色の前後を変更してください。
この方法は、ウェブサイト全体のリンクカラーを変更する場合に最適です。ハイパーリンクにカスタムカスタマイズを追加する柔軟性はありません。
方法2:デフォルトのWordPressブロックエディタを使用する
Gutenbergは、WordPressのデフォルトのブロックベースのエディタです。コンテンツの個々のブロックを使って、サイトのレイアウトやその他のカスタム設定を作成します。これにより、HTMLやCSSを気にすることなく、コンテンツの追加、移動、削除が簡単に行える。
また、ウェブサイト上の個々のリンクの色を変更することも可能です:
- WordPressの管理ダッシュボードから"文">"すべての記事"をクリックし、リンクの色をカスタマイズしたい投稿の下にある"コンパイラ".
- 変更したいブロックを見つけてクリックすると、右側に編集オプションが表示されます。
- 色」セクションで、テキストをクリックし、希望の色を選択するか、コードを入力します。
- 変更が完了したら、右上の"更新「ボタン
方法3:カスタムCSSを使う
WordPressテーマにリンクカラーのカスタマイズオプションが組み込まれていない場合は、カスタムCSSを追加してリンクスタイルを設定することができます。これは以下のように行う:
- WordPressの管理画面から外装状態 > カスタマイズ追加CSSオプションまでスクロールダウンし、それをクリックしてCSSエディタを開き、カスタムコードを追加します。
- テーマカスタマイザーにCSSを追加します。
サイト全体のリンクカラーを変更するには、特定のクラスやIDではなく、タグを使用する必要があります:
a {
color: #5246F1;
text-decoration: underline;
}
a:hover {
color: #B4AFFF; text-decoration: none; } a:hover { color: #B4AFFF; } a:hover {
text-decoration: none; } }.
}
このCSSコードでは、デフォルトでサイト上のすべてのリンクに下線が引かれ、#5246F1(青)で表示されます。マウスをリンクの上に置くと、リンクは薄い色(#B4AFFF)に変わり、下線は削除されます。
あなたはあるべき姿になった:
特定のリンクの色を変更したい場合は、ブラウザのInspectツールを使って、変更したいリンクのカテゴリーまたはIDを確認します。リンク上で右クリックし、Inspectを選択します。
以下のように、リンクのユニークな識別名を使用してカスタムCSSコードを追加します:
a.customise-unpreviewable{。
color: #5246F1;
text-decoration: underline;
}
a.customize-unpreviewable:hover{次のようになります。
color: #B4AFFF; text-decoration: none; } }.
text-decoration: none; } }.
}
カスタムCSSコードを追加するのは効果的ですが、かなりの労力と一連の手順を必要とします。うっかりウェブサイトの美観や機能を台無しにしてしまうような専門知識がない場合は、このオプションを選択しないでください。
概要
これらの方法を使えば、WordPressウェブサイトのリンクカラーをブランディングやユーザーエクスペリエンスのニーズに合わせて調整することが可能です。テーマカスタマイザー、ブロックエディター、カスタムCSSのいずれを使用する場合でも、リンクカラーがウェブサイト全体のデザインやブランディングと一貫していることを確認することは、ユーザーエクスペリエンスを向上させる重要なステップです。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間:月~金、9:30~18:30、祝日休み |