輝くようにあなたの文章を紹介する方法：3つのCSSスタイリングの秘訣

公開: 2022-03-22

あなたの文章はあなたのブログの目玉です。

コンテンツは王様ですよね？

それは人々を引き込み、あなたのブログを読み続けさせるものです。

しかし、同じように重要なのは、実際に自分の文章をどのように紹介するかです。 視覚的に、それはです。

あなたのコンテンツは素晴らしいかもしれませんが、誰かが読むのが難しい場合、あなたはあなたが思っているよりも多くの読者を失っているかもしれません。

ほら、私は訓練を受けた作家ではありませんが、私はWebデザイナーであり、何が良く見えるかを知っています。 そして、通常見栄えがするのは、装飾や味ではなく、何が機能し、何が読みやすく、理解しやすいかということです。

私は何年もの間、コンテンツをデジタル形式で表示するさまざまな方法を研究してきました。そのため、Webデザイナーの観点から、ブログ投稿にコンテンツが適切に表示されるようにするためのすばやく簡単な方法をいくつか紹介したいと思います。

ライターであるあなたがコンテンツを紹介し、読者ができるだけ簡単に楽しめるように、小さなCSS（Cascading Style Sheets）を使用してブログのスタイルをすばやく調整する方法がいくつかあります。

カスタムスタイルシートに追加して好みに合わせて編集できるCSSスワイプコードをいくつか紹介します。 ブログのカスタムスタイルシートにアクセスする方法がわからない場合は、ブログのCSSを編集する方法の指示に従ってください。

あなたの文章を紹介するためにあなたのコンテンツをスタイリングするための3つの秘訣

  1. 段落をきれいにする

段落を読みやすくするために、ここで覚えておくべきいくつかのヒントがあります。 ここでp（段落）タグを一緒にスタイリングします。

  • 見やすいフォントを選択してください。 手書きのフォントではなく、セリフフォントまたはサンセリフフォントを目指します。

薄すぎないウェイトを選択してください。 一部の非常に薄いフォントは、特定のブラウザやオペレーティングシステム（MacやPCなど）では見栄えがよくないため、他の人に確認してもらい、親指を立ててもらいます。

同時に、太すぎないフォントを選択してください。 太字のテキストと十分なコントラストを持たせる必要があります。

フォントを選択するときは、システムフォント、ブログファイルにアップロードしたフォント、またはGoogleフォントのいずれかを使用していることを確認してください。 Googleフォントは無料で、種類が豊富で、最も使いやすいので、Googleフォントを使用することをお勧めします。 詳細については、ブログでクールなフォントを使用する方法を確認してください。

フォントを選択したら、カスタムスタイルシートに移動して次のコードを追加します。

<pre>
p {
font-family：INSERT FONT NAME;
}
</ pre>

  • どのサイズの画面でも読みやすいフォントサイズを使用してください。 電話でブログをチェックし、テキストが疲れている人や年配の人にとって小さすぎないことを確認してください。

段落の適切なサイズは通常14〜16pxです。 すべてのフォントが同じサイズで同じように表示されるわけではないので、フォントを試してみて、何が最もよく見えるかを確認してください。

<pre>
p {
font-family：INSERT FONT NAME;
フォントサイズ：16px;
}
</ pre>

  • 適切な線の高さ（先頭）を使用します。 適切な行の高さは、段落に余裕を与えるため、読みやすさにも役立ちます。 適切な行の高さは1.5、つまりテキストのサイズの1.5倍です（行の高さ2は2倍の間隔になります）。

<pre>
p {
font-family：INSERT FONT NAME;
フォントサイズ：16px;
行の高さ：1.5;
}
</ pre>

  • 白地に真っ黒なテキストは避けてください。 目には難しいです。 代わりに、コントラストを少し下げるために、コピーにダークグレー（＃333333が好き）を選択してください。

<pre>
p {
font-family：INSERT FONT NAME;
フォントサイズ：16px;
行の高さ：1.5;
色：＃333333;
}
</ pre>

  • 段落を中央揃えにすることは避けてください。 本文のコピーを中央に配置すると、アマチュアに見え、読みにくくなります。 なんで？ 目が新しい行に移動するたびに、同じ場所にあることはないため、次の行の開始点を見つけるのに苦労する必要があります。詩、キャプション、または注意を引く短いテキストの中央揃えを予約し、左を選択します通常の段落を揃えたり、正当化したりします。 両端揃えのテキストは、段落の左側と右側の両方が直定規になるように間隔が空けられています。

<pre>
p {
font-family：INSERT FONT NAME;
フォントサイズ：16px;
行の高さ：1.5;
色：＃333333;
text-align：justify;
}
</ pre>

<pre> text-align：左; </ pre>はデフォルトの動作であり、以前のスタイルをオーバーライドする必要がない限り、指定する必要はありません。

  • 最後に、空白を追加します。 読みやすさを最適化するには、段落間に十分な空白が必要です。 経験則として、各段落の下にフォントサイズの約2倍の余白を追加します。

<pre>
p {
font-family：INSERT FONT NAME;
フォントサイズ：16px;
行の高さ：1.5;
色：＃333333;
text-align：justify;
マージンボトム：32px;
}
</ pre>

  1. 階層を使用する

見出しと小見出しを使用して投稿の概要を示す場合は、階層を使用します。

投稿に視覚的な階層を作成するには、見出しと小見出しのスタイルを設定して、それらを簡単に区別できるようにします。 ここにいくつかのヒントがあります：

  • さまざまなサイズのすべての見出しに同じフォントを使用します。
  • セリフフォントやサンセリフフォントなど、読みやすいフォントを使用してください。 ボディコピーと同じ書体をより厚いウェイトで使用するか、ボディコピーと見事に対照的な別の書体を選択することができます。
  • 見出しと小見出しを太字または太字に設定します。
  • Typecastを使用して、見出しのさまざまなフォント、サイズ、太さを試して、段落テキストと比較します。

段落のフォントサイズが16pxに設定されている場合、サイズ設定の例を次に示します。 次に、そこから上に移動します。

  • h6見出し=16px（通常は段落テキストと同じサイズですが、太字で独自の行にあります）
  • h5見出し=18px
  • h4見出し=22px
  • h3見出し=26px
  • h2見出し=30px
  • h1見出し（ブログ投稿のタイトル）= 36px

繰り返しになりますが、Typecastで遊んで、自分の目に最もよく見えるものを確認してください。 見出しに使用するフォントとサイズを決定したら、カスタムスタイルシートに移動して、すべての見出しにこのCSSを追加します。

<pre>
h1、h2、h3、h4、h5、h6 {
font-family：INSERT FONT NAME;
フォントサイズ：36px;
フォントの太さ：太字;
}
</ pre>

次に、見出しの各レベルのサイズを変更するために、CSSオーバーライドをいくつか追加します。

<pre>
h2 {
フォントサイズ：30px;
}

h3 {
フォントサイズ：26px;
}

h4 {
フォントサイズ：22px;
}

h5{
フォントサイズ：18px;
}

h6 {
フォントサイズ：16px;
}
</ pre>

  1. リンクを使用

読者に考えさせないでください！ リンクはリンクのように見える必要があります。つまり、クリックするものであることを完全に明確にする必要があります。 これを行ういくつかの方法があります：

  • 通常のテキストとは対照的なリンクの色を選択してください。
  • リンク用に1色を予約してください。 見出し、小見出し、サイドバーウィジェットのタイトル、またはその他のテキストにこれと同じ色を使用しないでください。
  • ただし、ボタンはクリック可能な要素でもあるため、必要に応じてこの色をボタンに使用できます。
  • リンクではないテキストに下線を付けないでください。通常、下線付きのテキストはリンクであると見なされるため、混乱を招きます。

<pre>
a {
色：ピンク;
テキスト装飾：下線;
}
</ pre>

読者がそれらをリンクとして区別しやすくするために、さまざまなリンク状態のスタイルを設定します。 ユーザーがそれらにカーソルを合わせたときに外観を変更すると、それがアクティブなリンクであることがさらに示されます。

<pre>
a：ホバー{
青色;
テキスト装飾：なし;
}
</ pre>

また、訪問したリンクのスタイルを変更して、特定のリンクに既にアクセスしたことをユーザーに示すこともできます。

<pre>
a：訪問済み{
青色;
}
</ pre>

あなたの文章を紹介して輝かせるには、ほんの少しの簡単な編集が必要です

これらは、読みやすくしてコンテンツを目立たせるために、あなたの文章を紹介するためのいくつかのトリックです。

ユーザーが読みやすいようにブログ投稿をレイアウトする他の方法はありますか？

CSSを活用してブログを読者にとってより魅力的なものにし、実際に自分の文章を紹介する方法について詳しく知りたいですか？ 素晴らしい！ それなら、CSSに関する無料のビデオトレーニングに参加してください。 間もなく開始されますので、今すぐサインアップしてください。

画像提供：Pixabay