閉じる
  1. マシュメロ(Marshmello)のおすすめ曲10選!中の人の正体は何…
  2. ショーンメンデス(Shawn Mendes)のおすすめ人気曲ランキング…
  3. Ariana Grande(アリアナ・グランデ)おすすめ人気曲ランキン…
  4. 【おすすめはこれだ!】Kygo(カイゴ)の人気曲ランキング14選!アル…
  5. リタ・オラ(RITA ORA)のおすすめ人気曲ランキング9選!アルバム…
  6. 【おすすめはこれだ!】Carly Rae Jepsen(カーリーレイジ…
  7. Avicii(アビーチ)のおすすめ人気曲ランキング15選!アルバムはど…
閉じる
閉じる
  1. 【おすすめはこれだ!】ステレオポニーの人気曲を勝手にランキング10選!…
  2. 【おすすめはこれだ!】ドラマストアの人気曲を勝手にランキング10選!
  3. 【おすすめはこれだ!】ネクライトーキーの人気曲を勝手にランキング10選…
  4. 【おすすめはこれだ!】ももちひろこの人気曲を勝手にランキング形式で紹介…
  5. 【おすすめはこれだ!】ビッケブランカの人気曲ランキング10選
  6. 【おすすめはこれだ!】Eveの人気曲ランキング10選!
  7. milet(ミレイ)のおすすめ人気曲を勝手にランキング10選!
  8. 【おすすめはこれだ!】Novelbrightの人気曲を勝手にランキング…
  9. 【おすすめはこれだ!】吉澤嘉代子の人気曲を勝手にランキング10選!
  10. 【おすすめはこれだ!】上野優華の人気曲を勝手にランキング10選!
閉じる

music finder

【CSS編集】h3,h4,h5タグで見出しをつける

全然音楽の紹介ではないのですが、ブログを制作していくにあたって僕もようやくphpやらcssを編集するようになりました。で、ブログに見出しをつけるようになったのですが、初心者の僕がどうやって見出しをつけたのか、また、見出しをつけるにあたって直面した問題点などをつづっていこうと思います。

見出しとは

そのまま、↑のような表示です。cssを編集することでいろいろなデザインにすることができます。


どうやって見出しをつくるのか

初心者の方は自分でcss書いてオリジナルを作るのは少々難易度が高いと思われますので、サンプルを入手して自分で手を加える、といった方法が良いかと。僕もこの方法でつくりました。

今回サンプルを利用させてもらったのは、
Web’Notes
このページにあるサンプル10個の中で、気に入ったものを試しに利用してみましょう。

今回僕が使用したのは、10番目の下線をつけた見出し。
まず、サンプルコードをコピーし、自分のブログのテーマのcssにコピーします。

cssって何ですか?

cssはページデザインをしているプログラム、と解釈しておけば大丈夫です。
今回の見出しもデザインをしなければいけませんので、cssを編集してあげる必要があります。
このcss、どこから編集するのかというと、wordpressを使っている人向けになってしまいますが、メニュー左のサイドバーに「外観」があるのでそれを選択。次に「テーマの編集」があるのでそれを選択。テーマの編集を選択すると、右下に「style.css」があると思いますので、それが編集すべき対象になります。

cssには分かりやすいように、

/* ———- h3 tag ———- */
サンプルコード

のような形で記述しておくと後から分かりやすくて良いです。
上記サンプルコードにさきほどコピーしたコードをコピーします。

これは後々、やりやすいようにするためにですが、サンプルコード中に
.heading10
とあると思いますが、これを一括して「h3」に置換しておきましょう。

cssのどこに記述すればよいの?と初めての方は思われるかもしれませんが、記述途中の箇所でなければどこでもよいです。心配であればcssの一番下にでも貼付ければOKです。

記事に記述する

cssを編集して記事に反映するためのデザイン、つまりは準備が終わりました。
あとは記事に実装していくだけです。

やり方は簡単。
次のコードを見出しで見せたいところに記述すればよいだけ!

<h3>見出しにしたい内容</h3>
見出しの色を変えてみる

サンプルをそのまま使用しても良いと思いますが、個人で好きな色を設定したい!って時にはcss中の「color」を検索して見つけてみましょう。検索の方法は、「ctrl + f」を打つと検索ウィンドウが出てきますので、そこで検索したいワードを入力します。colorを見つけたら、#6B0CE8とか、#FFFなどと記述されていると思いますが、これはパソコンが色を数字で表すというルールにのっとって記述されているのです。
何色が何番なのか分かんない!そんな時は、以下のサイトを参照。
カラーコード一覧表
このサイトで設定したい色のコードを探してcssで変更してみましょう。

あれ?css更新したのに反映されない。。そんなときはスーパーリロード

cssを更新したはずなのに、ページ更新ボタンを押しても更新されないぞ!

そこで活躍するのがスーパーリロード。
ざっくりですが、
windowsを使っている方は、ctrl + F5
Macを使っている方は、ctrl + R
これでちゃんと新しく編集したcssを読み取って表示してくれます。

ウィジェットにもh3タグが!?

使用しているテーマによってはウィジェット(サイドバーのこと)にもcssで反映した内容が反映されてしまっていることがあります。たいていの場合、「テーマ編集」を選択して、「functions.php」に設定が記述されています。
h3と検索すれば出てくると思いますので、これをh4,h5などに変更しておけばOK.

以上、簡単ですが初心者がcssを編集して見出しをつけるときに何かしら参考になれば幸いです!

おすすめ記事

  1. ショーンメンデス(Shawn Mendes)のおすすめ人気曲ランキング7選!新曲とアルバムも!
  2. Ariana Grande(アリアナ・グランデ)おすすめ人気曲ランキング18選!アルバムや新曲も!
  3. マシュメロ(Marshmello)のおすすめ曲10選!中の人の正体は何者!?新曲とアルバムもチェック!
  4. リタ・オラ(RITA ORA)のおすすめ人気曲ランキング9選!アルバムはどれが良い?
  5. 【おすすめはこれだ!】Kygo(カイゴ)の人気曲ランキング14選!アルバムや新曲も!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る