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 は危険ではないので、間違った場合はコードを削除するか変更するだけで済みます。何も壊れることはありません :)

それはさておき、実際の CSS のヒントを例とともにいくつか紹介します。そうすれば、自分の WordPress サイトで試してみることができます。

要素を水平方向と垂直方向の中央に配置する

要素 (画像、テキスト、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 開発ビジネスへの段階的なロードマップ。 より多くのクライアントを獲得することから、狂ったようにスケールすることまで。

この電子ブックをダウンロードすることにより、WPMU DEV から時折電子メールを受信することに同意します。
当社はあなたの電子メールを 100% プライベートに保ち、スパムを送信しません。

無料の電子ブック
次の WP サイトを滞りなく計画、構築、立ち上げます。 私たちのチェックリストにより、プロセスが簡単かつ再現可能になります。

この電子ブックをダウンロードすることにより、WPMU DEV から時折電子メールを受信することに同意します。
当社はあなたの電子メールを 100% プライベートに保ち、スパムを送信しません。

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

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ルールは最大幅 768 ピクセルの画面をターゲットにし、2 番目の@mediaルールは最小幅 769 ピクセルの画面をターゲットにします。 各@mediaルール内のさまざまなセレクターは、画面サイズに基づいてページのレイアウトと外観を調整するために使用されます。

CSS のヒントをもう 1 つ…

すべてを正しく実行したにもかかわらず、コードが機能しない場合があります。 これは、コードとは異なる内容を記述している CSS コードがすでに存在していることが考えられます。

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

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

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

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 ウェブサイトの画像をスタイルする方法 – 画像はあらゆるウェブサイトの重要な部分であり、この記事では CSS を使用して画像をスタイルする方法に関するヒントを提供します。 枠線の追加、画像のサイズや配置の変更などの方法を学びます。
  • WordPress サイトにカスタム CSS を追加する方法 – この記事では、組み込みのカスタマイザーとプラグインの両方を使用して、WordPress Web サイトにカスタム CSS を追加するプロセスについて説明します。
  • WordPress サイトのライブ編集用の無料 CSS プラグイン – この記事では、WordPress ウェブサイトのライブ編集を可能にし、CSS 変更の効果をリアルタイムで確認しやすくする無料の CSS プラグインをいくつか紹介します。
  • WordPress 用の 14 のクールな CSS アニメーション ツール – CSS を使用して WordPress Web サイトにアニメーションを追加したい場合、この記事にはそのために使用できるいくつかのクールなツールがリストされています。
  • CSS を使用して石積みとグリッドのレイアウトを WordPress サイトに追加する – この記事では、CSS を使用して石積みとグリッドのレイアウトを WordPress ウェブサイトに追加し、より視覚的に魅力的なデザインを作成する方法について説明します。
  • WordPress の CSS コーディングをよりクリーンにするための 25 の専門家のヒント – CSS コードのクリーンさと読みやすさを改善したい場合、この記事ではそれを行うための 25 の専門家のヒントを提供します。
  • CSS ワークフローを改善するための 25 のプロのヒント – CSS プリプロセッサの使用から、コードをデバッグするためのブラウザ開発者ツールの使用まで、CSS ワークフローを改善するためのヒント。

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

貢献者

香 この投稿のアイデアと上で使用したいくつかの CSS サンプルを提供してくれた Incensy の WPMU DEV メンバーAntoineに感謝します。 詳細については、Incensy の代理店パートナー プロフィールをご覧ください。

途中で見つけた気の利いた CSS トリックを見逃していませんか? コメントでぜひ知りたいです!