WordPress テキストCSSの適用 - ブログデザイン改善のための小さなガイド

今回の記事では、皆さんと WordPress 本文テキストCSSを適用する方法についてお話してみようと思います。 現在、イサクさんが運営されている ワッフルコミュニティで活動していますが、そこで WordPress 装飾の第一歩！ タイトル飾る完璧なガイド（24年最新） ポストを通じて本文内のh2~4タグを飾ることを知りました。

ところが、ブログをやってみると、他の方がタイトルではなく、一般的な本文のテキストに蛍光ペンの形で飾るのを見て、しばらく気になるだけ（？ それで、週末に時間があるうちに、一度ポストに適用してみポストもやってみようとし、このように文を作成してみます。

テキストCSS適用の概要

ご存知の通り、ブログ運営においてデザインはとても重要です。私のような一般人がデザイナーのようにブログを飾るのは簡単ではありません。 しかし、ただ真似するだけでいいことがあるので、それを適用してみると、おそらく満足度が急上昇することでしょう。

過度に適用しなければ、ブログの訪問者に良い印象を与え、より頻繁なトラフィックを引き起こし、最終的にGoogleのような検索エンジンでも、よりよく露出されます。（最近はあまりにもみんな適用してみると、してないとおかしいほどです）。

この記事では、 WordPressで作成したポストの本文テキストにCSSを適用して、少しでもブログのデザインを改善する方法を説明します。 CSSを適用する方法は、上記のリンクをしたイサクさんのポストを参照してください。

今回のポストを書く前に気になってたことがあります。h2~h4タグのような場合、タグごとに指定をしてCSSコードを組むので、ポスト本文でビジュアル的にそのタイトルをh2~h4の中から選択するだけで、自動的に希望の装飾になります。 ところが、 別途タグを指定せずにテキスト化する本文内容のテキストは、ソースコードと本文テキストをどのようにマッチングさせるのかが私の気になるポイントでした。 このCSSを適用したい方も多分私のようにそれが一番気になるのではないでしょうか。 その気になる点を下の記事を読んでみて解決してみましょう。

本文テキストの3つの効果

1.蛍光ペン効果テキスト

/* 蛍光ペンスタイルの本文テキストの装飾*/ /* 蛍光ペンスタイルのテキスト装飾
u1 {text-decoration-line:none; padding：2px 5px; background: linear-gradient(to top, #c9e1f1 30%, transparent 40%);}

上記のソースコードを カスタマイズ > 追加CSS に行き、追加で貼り付けます。 その後はどうすればいいのでしょうか？それは、私たちがあまり使わない コードエディタモード(ちなみにショートカットは Ctrl + Shift + Alt + M です)。

このモードで私たちはエイリアンに出会います。 それを知らないふりをして、私が適用したいテキストの前後にとを入力すればそれで終わりです。言葉で説明するのは難しいので、下の図を見てもらえればすぐに理解できると思います。

ポストを作成してる時、ワッフルコミュニティから届いたコメントで別の方法を知りました。上記のように直接ソースコードを触る危険な(?)ことをせず、直接ソースコードに触れることなく テキストに太字(Bold)を指定すると、その部分に蛍光ペンの効果を与える式でその内容は こちらに行って確認してみてください。

2.波形の下線

/* 波状下線本文テキスト装飾*/ /*波状下線テキスト装飾
u {text-decoration-style: wavy; text-decoration-color:#c9e1f1; text-decoration-thickness:0.08em; }

このコードは、 ...タグ内のテキストに波状の青い下線を適用します。 適用方法は上記と同じです。適用すると、以下のような効果が発生します。

3.テキスト選択時の強調効果

::-moz-selection {
  color: #000；
  background-color: #ccffff；
}

::selection {
  color: #000；
  background-color: #ccffff；
}

このコードは、本文のテキストをドラッグして選択すると、背景色を薄い蛍光緑色に変え、テキストの色を黒に変えます。下の図のように表示されます。

整理する

上記のようにCSSを使用すると、 WordPress ブログのテキストに様々な視覚効果を与えることができます。蛍光ペン、波状の下線、テキスト選択時の強調など、このような効果を使用して、ブログのデザインを改善し、訪問者に良い印象を与えることができます。上記のコードを活用して、もう少しきれいな投稿をしてみてください。

ちなみに、デザインすると色と切り離せないのですが、関連するちょっとした知識を得たい方は 好きな色を見つける」技術-画像からの色抽出から調和のとれたカラーマッチングまで ポストをご覧ください。

今日は WordPress & CSSの知識レベル+1された皆さんにお祝いの拍手を送ります。

'secondlife.lol'のすべてのコンテンツは著作権法の保護を受けています。無断転載やコピー、配布などを禁じます。