CSSで写真のキャプションとしてテキストを表示する方法

Webマスターは、CSS(Cascading Style Sheet) - さまざまな種類のテキストをフォーマットするコードを使用して、Webページにテキストを表示およびスタイル設定できます。 写真のキャプションとしてテキストを表示するには、キャプションテキストのCSSコードクラスを作成してから、各キャプションにクラス識別子を付けて自動的にテキストをキャプションスタイルにフォーマットします。

1。

通常のWebデザインプログラム、HTMLエディタアプリケーション、またはMicrosoftのメモ帳プレーンテキストツールを起動します。 フォーマットしたいキャプションを含むWebページを開きます。

2。

ページ上部のヘッダーセクションまでスクロールします。 ヘッダーセクションは ""タグで始まり、 ""タグで終わります。

3。

次のコードスニペットを「」タグの直前に入力するか貼り付けます。

4。

中括弧内の各属性を強調表示して編集し、キャプションテキストのスタイルと書式を設定します。 たとえば、「font-size」要素をキャプションに適したテキストサイズに変更します。 あなたの好みの書体に "font-family"を編集してください。 Webページの残りのテキストから目立つようにするか、ページの他の部分で使用されているフォントと一致するフォントを選択することをお勧めします。 色を「#000000」 - 標準の黒のテキスト - から好みのカラーコードに変更します。 太字のキャプションが必要な場合は、「font-weight」で属性を「normal」から「bold」に変更します。

5。

Webページの本文セクションで、スタイルを適用する各写真キャプションの位置まで、「」タグと「」タグの間にスクロールします。

6。

キャプションテキストの直前に「」を貼り付けるか入力します。 キャプションテキストの後に「」を挿入します。 コードは次のようになります。

画像の内容を説明するキャプションテキストの例。

7。

Webページを保存して、通常の方法でホストのコンテンツ管理システムのコントロールパネルを介して、またはファイル転送プロトコルアプリケーションを使用してWebサイトのホストサーバーにアップロードします。

ヒント

  • オンラインのカラーピッカーツールを使用して、手順4で好みのキャプションフォントの色に適した16進数のカラーコードを見つけます。
  • CSSキャプションテキストスタイルを適用するWebページごとにこの手順を繰り返します。

人気の投稿