アフィリエイト広告を利用しています

広告

posted by fanblog

2020年01月28日

【CSS】記事に見出しを入れよう

学習(HTML_CSS)アイキャッチ.png
今回は記事を読みやすくするために見出しを取り入れてみる事にした。

是非続きから読んでいただきたい。

【履歴】
  • 2020年1月28日(作成)
私もゲームの攻略記事などを見るが大抵下記のイメージのように記事の上部に見出しのリストがあって下部に見出し毎の文章が書かれている。

〜ページ内リンクと見出しのイメージ〜

  • 見出し01へ(ページ内リンク)
  • 見出し02へ(ページ内リンク)
  • 見出し03へ(ページ内リンク)
見出し01
ごにょごにょ〜
見出し02
ごにょにょ〜
見出し03
ごごごにょにょ〜

という感じだ。ページ内リンクが無いサイトもあるが長文の場合やはりあった方が便利だ。

私の今までの記事も見返してみると項目の見出しやページ内リンクがあった方が見やすいように思う。
なのでまずは見出しを取り入れてみる事にした。

私はファンブログの記事作成ページで記事を作成している。
こだわらなければHTMLやCSSの知識が無くてもリストや見出し、画像の挿入も簡単に出来るものだ。

見出しの場合は見出しとして表示したい文言を入力し、用意された見出しのスタイルから選ぶだけで下記のようにソースコードが記述される。
  <div style="〜;">表示文言</div>
今回は記述されたソースコードに手を加え、表示文言の左だけでなく下にもラインを入れる。
今後よく使うのでdivに見出し用classを設定し、style〜の部分を外部CSSに追記する。

〜記事HTML〜
  <div class="class名">表示文言</div>

〜外部CSS〜
  .class名{
border(線):種類、色;
border-width(線の太さ):上px 右px 下px 左px;
ほか余白など〜
}

〜結果〜
表示文言
見出し完成。

次はページ内リンクを設定してみようと思う。

今回の記事はここまで。
ではまた次回。


タグ:CSS 見出し
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/9588961
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
お知らせ
ご意見ご要望ありましたらコメントかTwitterへお願い致します。

戦闘関係の記事以外なら出来る範囲で作成します。
ブログの筆者
櫻野 暦(さくらの こよみ)さんの画像
櫻野 暦(さくらの こよみ)
プロフィール
こよみのTwitter
カテゴリーアーカイブ
2023年8月人気記事TOP5
  1. 1. 【アサエク】ギフトコードを入力してアイテムゲット!
  2. 2. 【幻想神域2】幻想神域2の歴史F
  3. 3. 【雑談】最近・・・
  4. 4. 【幻想神域】幻神の誕生日一覧(2021年10月30日現在:全126(108+18)体)
  5. 5. 【幻想神域】幻神の経験クリスタルを稼ごう!
検索
最新記事
タグクラウド
ファン
×

この広告は30日以上新しい記事の更新がないブログに表示されております。