WordPress ユーザーのための 17 の時間を節約する CSS のヒント

公開: 2023-03-13

WordPress は、Web サイトのデザインとカスタマイズに無限の可能性を提供します。 この記事では、ヘッダーのスタイリングからフォントの微調整まで、WordPress ユーザー向けの実用的な CSS のヒントをいくつか紹介します。

WordPress には既製のテーマやテンプレートがたくさん用意されていますが、場合によっては自分で問題を解決し、CSS でカスタマイズする必要があります。

WordPress サイトで作業しているときに、次のような質問をしたことがある場合:

  • 「「続きを読む」ボタンを削除するにはどうすればよいですか?」
  • 「このリンクの色を変更するにはどうすればよいですか?」
  • 「このリンクをクリックできないようにするにはどうすればよいですか?」

…次に、あなたの Web サイトに役立つ CSS のテクニックを学びましょう。

このチュートリアルでは、以下について説明します。

  • WordPress CSS のヒント
    1. 要素を水平方向および垂直方向に中央揃えにする
    2. リンクの色を変更する
    3. リンクを削除する
    4. リンクを無効にする (リンクは表示されたままですが、ユーザーはクリックできません)
    5. ホバー時のリンクの色を変更する
    6. スタイル リンク
    7. ボタンのスタイルを設定する
    8. セクションのフォントを変更する
    9. 固定ヘッダーを作成する
    10. 影付きのスティッキー ヘッダーを作成する
    11. セクションに背景色を追加する
    12. ボディの背景色を変更する
    13. 特定の単語またはフレーズの色を変更する
    14. 画像の周囲に境界線を作成する
    15. 画像にホバー効果を作成する
    16. フォームのスタイルを設定する
    17. レスポンシブ レイアウトを作成する
  • CSS スキルを次のレベルに引き上げる

WordPress CSS のヒント

これらのヒントを実装するために知っておく必要があるのは、次の 2 つだけです。

  • CSS の仕組み
  • WordPressにCSSを追加する方法

注: CSS にはリスクはありません。間違えた場合は、コードを削除するか変更するだけで済みます。何も壊れることはありません :)

それはさておき、あなた自身の WordPress サイトで試すことができるように、いくつかの実用的な CSS のヒントを例とともに直接見てみましょう:

要素を水平方向および垂直方向に中央揃えにする

要素 (画像、テキスト、div など) を水平方向と垂直方向の両方で中央に配置するには、次の CSS コードを使用します。 

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

このコードでは、 position: relativeプロパティを使用して、最も近くに配置された祖先を基準にして要素を配置します。 top: 50%とleft: 50%プロパティは、要素をコンテナの中央に移動します。 最後に、 transform: translate(-50%, -50%)プロパティは、要素を独自の幅と高さの 50% 戻すことで、要素を水平方向と垂直方向の両方で中央揃えにします。

リンクの色を変更する

.item-class{
color : blue;
}

白、黒、青、赤などの色を使用できますが、特定の色を使用することもできます。

この場合、次のようにできます。 

.item-class{
color : #F7F7F7;
}

Web サイトのデザイン用にカラー パレットを作成する場合は、Paletton ツールを使用してみてください。 とても助かります！

注: 要素を結合する場合は、非常に簡単です。

たとえば、クリックを無効にしてリンクを黒に戻したいとします。

次のコードを使用できます。 

.item-class{
pointer-events : none;
color : black;
}

リンクを削除する

.item-class{
display : none;
}

注: 次のように、クラスを機能させるために、クラスの後にa付ける必要がある場合があります。 

.item-class a{
display : none;
}

a追加するか、a なしで実験して、コードが機能するかどうかを確認してください。 CSS を追加して保存し、フロントエンドを確認するだけです。

リンクを無効にする (リンクは表示されたままですが、ユーザーはクリックできません)

注: これを行うには常に HTML を変更することをお勧めしますが、CSS の方が簡単な場合や可能な唯一の解決策である場合は、次のコードを使用してください。 

.item-class{
pointer-events: none;
}

ホバー時のリンクの色を変更する

次の CSS コードを使用して、ユーザーがリンクの上にカーソルを置いたときにリンクの色を変えることができます。

a:hover {
color: red;
}

このコードでは、 a:hoverセレクターは、ユーザーが現在ホバーしているページ上のすべてのリンクをターゲットにしています。 color: redプロパティは、テキストの色を赤に変更します。

スタイル リンク

Web サイトのリンクのスタイルを設定するには、次の CSS コードを使用します。

a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

このコードでは、 aセレクターを使用して、ページ上のすべてのリンクのスタイルを設定しています。 colorプロパティはリンクの色を設定し、 text-decorationプロパティはデフォルトの下線を削除します。 border-bottomプロパティは、微妙な下線効果を追加します。 transitionプロパティは、ユーザーがリンクの上にカーソルを置いたときにスムーズな遷移効果を作成します。 a:hoverセレクターは、ユーザーがリンクにカーソルを合わせたときにリンクのスタイルを設定するために使用されます。

ボタンのスタイルを設定する

ボタンのスタイルを設定するには、次のコードを使用します。

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

このコードでは、さまざまなプロパティを使用してボタンのスタイルを設定します。これには、ボタンの外観を表すbackground-colorプロパティとcolorプロパティ、ボタンのサイズを表すpaddingプロパティ、ボタンの上にマウスを置いたときにマウス ポインターを変更するcursorプロパティが含まれます。

セクションのフォントを変更する

次の CSS コードを使用して、Web サイトのセクションのフォントを変更します。

.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

このコードでは、 font-familyプロパティによってフォントが Arial または類似のサンセリフ フォントに設定され、 font-sizeプロパティによってフォント サイズが 16 ピクセルに設定され、 line-heightプロパティによってテキストの行間隔が 1.5 に設定されます。フォントサイズの倍。

固定ヘッダーを作成する

ユーザーがスクロールしてもページの上部に固定されるヘッダーを作成する場合は、次の CSS コードを使用できます。

.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

このコードでは、 position: fixedプロパティによってヘッダーがビューポートの上部に固定され、 top: 0プロパティによってヘッダーがページの最上部に配置されます。 width: 100%プロパティは、ヘッダーがビューポートの幅全体にまたがることを保証します。 background-color 、 colorヘッダーのスタイル設定に使用され、 z-index: 9999プロパティはヘッダーがページ上の他のすべての要素の上に表示されるようにします。

影付きのスティッキー ヘッダーを作成する

ユーザーがスクロールしてもページの上部に固定されたままになる影付きのヘッダーを作成するには、次の CSS コードを使用します。

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

このコードでは、 position: fixedプロパティを使用して、ヘッダーをページの上部に固定しています。 top: 0およびleft: 0プロパティは、ヘッダーをページの左上隅に配置します。 width: 100%プロパティは、ヘッダーの幅をページ全体の幅に設定します。 background-colorプロパティはヘッダーの背景色を設定し、 z-indexプロパティはヘッダーがページ上の他の要素の上に表示されるようにします。 最後に、 box-shadowプロパティはヘッダーに微妙な影の効果を追加します。 .contentセレクターを使用してページの上部にパディングを追加し、コンテンツが固定ヘッダーで覆われないようにします。

セクションに背景色を追加する

Web サイトのセクションに背景色を追加しますか? 次に、次の CSS コードを使用します。

.section {
background-color: #f2f2f2;
padding: 20px;
}

このコードでは、 background-color: #f2f2f2プロパティによって背景色が薄い灰色に設定され、 padding: 20pxプロパティによってセクション内のコンテンツの周囲に 20 ピクセルのスペースが追加されます。

ボディの背景色を変更する

このコードを追加して、Web サイトの本文の背景色を変更します。

body {
background-color: #f5f5f5;
}

このコードでは、 background-colorプロパティによって背景色が薄い灰色に設定されます。

特定の単語またはフレーズの色を変更する

テキスト ブロック内の特定の単語またはフレーズの色を変更するには、次の CSS コードを使用できます。

p span {
color: red;
}

このコードでは、 p spanセレクターは、 p要素内に現れる任意のspan要素を対象としています。 次に、次のように、対象とする単語またはフレーズを HTML のspan要素でラップできます。

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

これにより、「consectetur adipiscing elit」というフレーズが赤で表示されます。

画像の周囲に境界線を作成する

画像の周りに境界線を追加する方法は次のとおりです。

img {
border: 2px solid #ccc;
}

このコードでは、 borderプロパティが境界線の幅、スタイル、および色を設定します。 2px値は境界線の幅を 2 ​​ピクセルに設定し、 solidスタイルを実線に設定し、 #ccc色を明るい灰色に設定します。

画像にホバー効果を作成する

このコード スニペットを使用して、画像にホバー効果を作成します。

img:hover {
opacity: 0.8;
}

このコードでは、 img:hoverセレクターは、ユーザーが画像の上にカーソルを置いたときに画像をターゲットにしています。 opacityプロパティは、画像の透明度を設定します。 この場合、値は 0.8 に設定され、ユーザーが画像の上にカーソルを置いたときに画像がわずかに透明になります。

フォームのスタイルを設定する

次の CSS コードを使用して、Web サイトのフォームのスタイルを設定します。

form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

このコードでは、フォームの全体的な外観background-color 、 padding 、およびborder-radiusプロパティを含む、さまざまなプロパティを使用してフォームのスタイルを設定しています。 form labelセレクターは、各フォーム フィールドに関連付けられたラベルのスタイルを設定するために使用されます。 form input[type="text"], form input[type="email"], form textareaセレクターは、フォーム内のさまざまな入力フィールドのスタイルを設定するために使用されます。 form input[type="submit"]セレクターは、送信ボタンのスタイルを設定するために使用されます。

レスポンシブ レイアウトを作成する

さまざまな画面サイズに適応するレスポンシブ レイアウトを作成する場合は、次の CSS コードを使用します。

@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

このコードでは、 @mediaルールを使用して、画面サイズごとに異なるスタイルを指定しています。 最初の@mediaルールは最大幅 768px の画面を対象とし、2 番目の@mediaルールは最小幅 769px の画面を対象としています。 各@mediaルール内のさまざまなセレクターを使用して、画面サイズに基づいてページのレイアウトと外観を調整します。

CSS のヒントをもう 1 つ…

すべてを正しく実行したにもかかわらず、コードが機能しないことがあります。 これは、コードとは異なることを言っている CSS コードが既に存在するためである可能性があります。

これをオーバーライドするには、次のように!importantを追加するだけです: 

.item-class{
pointer-events: none !important;
}

これらは、CSS を使用して WordPress Web サイトを強化する実用的な方法のほんの一例です。

CSS を使用すると、Web サイトの外観をカスタマイズする可能性は事実上無限にあります。 これらのヒントを学習して適用することで、視覚的に魅力的であるだけでなく、ユーザー エクスペリエンスが向上するように最適化された Web サイトを作成できます。

CSS スキルを次のレベルに引き上げる

初心者でも経験豊富なプロの Web 開発者または Web デザイナーでも、WordPress で CSS をさらに深く使いたい場合は、これらの追加の CSS チュートリアルが知識とスキルを広げるのに役立ちます。

  • WordPress の CSS を学習するための 10 の簡単なヒント – 特に WordPress で使用する CSS を学びたい初心者向けの実用的なヒント。 CSS 構文の理解から CSS フレームワークの使用まで、すべてをカバーしています。
  • WordPress の CSS の学習と参照 – 特に WordPress で使用する CSS の学習と参照に関する包括的なガイド。 WordPress カスタマイザーの使用、CSS セレクターの理解、子テーマの操作などのトピックをカバーしています。
  • CSS スニペットとインスピレーションを見つけるのに最適な 7 つのサイト – CSS コードのインスピレーションをお探しですか? この記事では、独自の WordPress Web サイトで使用できる CSS スニペットと例を提供する 7 つの Web サイトをリストします。
  • CSS を使用して WordPress Web サイトの画像をスタイルする方法 – 画像は Web サイトの重要な部分であり、この記事では CSS を使用してスタイルを設定する方法に関するヒントを提供します。 境界線を追加する方法、画像のサイズと配置を変更する方法などを学習します。
  • WordPress サイトにカスタム CSS を追加する方法 – この記事では、組み込みのカスタマイザーとプラグインの両方を使用して、WordPress Web サイトにカスタム CSS を追加するプロセスについて説明します。
  • WordPress サイトをライブ編集するための無料の CSS プラグイン – この記事では、WordPress Web サイトをライブ編集できる無料の CSS プラグインをいくつか紹介し、CSS の変更の効果をリアルタイムで簡単に確認できるようにします。
  • WordPress 用の 14 のクールな CSS アニメーション ツール – CSS を使用して WordPress Web サイトにアニメーションを追加したい場合は、この記事で使用できるいくつかのクールなツールを紹介します。
  • CSS を使用して WordPress サイトに組積造およびグリッド レイアウトを追加する – この記事では、CSS を使用して WordPress Web サイトに組積造およびグリッド レイアウトを追加し、より視覚的に魅力的なデザインを作成する方法について説明します。
  • WordPress のよりクリーンな CSS コーディングのための 25 の専門家のヒント – CSS コードの簡潔さと可読性を改善したい場合、この記事ではそれを行うための 25 の専門家のヒントを提供します。
  • CSS ワークフローを改善するための 25 のプロのヒント – CSS プリプロセッサの使用からブラウザー開発者ツールを使用したコードのデバッグまで、CSS ワークフローを改善するためのヒント。

リンクをクリックして詳細を確認し、WordPress Web サイトの改善を今すぐ開始してください。

寄稿者

お香 Incensy の WPMU DEV メンバーAntoineに、この投稿のアイデアと上記で使用したいくつかの CSS の例に貢献していただきありがとうございます。 詳細については、Incensy のエージェンシー パートナー プロフィールをご覧ください。

***

注: 外部ソースからの記事は受け付けていません。 ただし、WPMU DEV メンバーは、ブログ XChange を介して、ブログのチュートリアルや記事に関するアイデアや提案を提供することができます。

途中で見つけた気の利いた CSS トリックを見逃していませんか? コメントでそれらについて知りたいです！