むねさだブログ
  • プロフィール
  • グルメ
  • ガジェット
  • カメラ・写真
  • 子育て
  • 旅行
  • イベント
  • お問い合わせ
  1. ホーム
  2. ブログカスタマイズ

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・

2012/08/29
  • ツイートする

  • シェアする

  • はてブする

このむねさだブログを書き始めて後数日で半年が経とうとしています。

前のブログから引っ越してきた3月4日から、毎日更新し続けてきました。

むねさだブログに移転しました | むねさだブログ

 

 

 

そんな僕が、先日のブログ合宿でみんなに教えてもらった、

知らないとチョット恥ずかしいぞ・・・レベルなことを、

htmlとかの知識が全くなくブログを書いている人の参考になればと思い、ご紹介します。

 
 

SPONSORED LINK
SPONSORED LINK

<h2>タグって文字サイズが大きくなるだけだと思ってた

いきなりですが、<h2>っていうタグがあるのですよ。

これを使うと文字が大きくなるんです。
こんな感じで
 

なので、僕の中では

<h2>タグ=文字が大きくなるタグ

という認識でいて、結構多用してたんです。

 

例えば、
ウマすぎる
とかね。

 

 

当たり前のことが当たり前じゃなかった

そんな感じでブログを書いていたわけで、

そして誰にも突っ込まれて来なかったので疑問にも思わなかったんです。

 

それが、先日のブログ合宿でdelaymania.comに寄稿した際、

初めて判明したんです。

 

何度か説明を受けないと僕も頭で理解できなかったけど、

どうやらWEBの世界では、<h2>は”見出し2”として使うものらしい。

 

見出しって何だ?

↑これが見出しです・・・。

これまた全く知らなかったのですが、

style.cssというものをいじくることによって、<h2>タグで文字を囲むと

自動的に上のような見出しになってくれるんだと。

 

そんな貴重な情報、どうして誰も教えてくれなかったのかね・・・。

 

ってことで、その場にいた切り抜きジャックのタムカイや、

delaymania.comの大ちゃんに教えてもらいながら、CSSと言うものをいじってみました。

みだし

とりあえず、<h2>タグはこれまで多用していたので、

これをこのまま見だしとして運用始めるとどえらいことになる・・・。

というのは僕でも分かるので、ソレを回避する方法も教えてもらう。

クラスというものを使って見出しをつくる
h2.mds {
font-size: 150%;
font-weight:bold;
padding:3px 6px;
margin:0 0 10px 0;
border-left:10px solid #7ee028;
border-bottom:1px solid #7ee028;
}

もうね、呪文のようだけどとりあえずcssに上記を追記して、

普段のブログ書いているhtmlの中に、

<h2 class=”mds”>見だし</h2>

と入れるだけで、見出しデザインになるらしい!

 

そして、文字サイズを変えれるようにこれまたCSSをいじる。

fontsize_css

style.cssで文字サイズを変えれるように追記
/* mu_ne3 original style */
.fontLL{
font-size:200%;
}
.fontL{
font-size:175%;
}
.fontM{
font-size:125%;
}
.fontS{
font-size:81.3%;
}

一応4種類のサイズを容易しておきました。

何を書いているのかほとんど分からないけど、これで文字のサイズが変えられるようになったようだ。

 

ちなみに、文字サイズを変えるときはこういう記述。

<span class=”fontL”>文字サイズ</span>

これで文字サイズが175%の文字が書けるわけです。

 

 

見だしを手に入れたぞ

そして、「むねさだブログ」はついに見出しを手に入れた!

見だしのプレビュー

 

いや~!嬉しいな。

そして、これがあるとブログが読みやすくなるので、

ここを読んでくれている人に、もっと読みやすい記事を提供できるじゃないですか!

 

わんぱくブロガー的まとめ

ブログ合宿ってこういう当たり前だと思っていたことを気づかせてくれる良い機会でした。

 

みなさんも、当たり前だと思っていること、普段やっている行動を

友人や同僚に見てもらってはどうでしょうか?

非効率だったり、綺麗じゃない仕事の仕方をしているかもしれませんよ・・・。

 

聞くは一時の恥、聞かぬは末代の恥

どうせなら早めに聞いて効率や品質を高めて行きたいよね。

まだまだ本当に知らないことだらけだけど、

少しずつ勉強しながら見やすく楽しく役に立つブログを書いていこうと思います。

 

 

デザイン ブロガー わんぱくブロガー
SPONSORED LINK
SPONSORED LINK
  • ツイートする

  • シェアする

  • はてブする

いいね!を押して
最新記事をチェック

おすすめ記事

プロフィール

munesada

ブロガー、むねさだ よしろうです。
ワクワク感で笑顔を拡げる、”わんぱくブロガー”。

新しいものが大好き!食べ物・ガジェット・カメラ・旅行・生活雑貨など興味があるものを幅広くご紹介してます。
iPhone15 Pro Max・MacBook Pro16・EOS 5D4・OM-1ユーザー。
11歳になる娘がいます。パパ目線での子育てグッズの紹介も。 ScanSnapプレミアムアンバサダー、HHKBエバンジェリスト、おもいでばこ認定アンバサダーなど。

@mu_ne3さんをフォロー
くわしいプロフィール
Yahoo!で動画配信中

ブログの更新情報

follow us in feedly
@munesada_blogさんをフォロー
むねさだブログ

Facebookページへの「いいね」をして頂けると毎日の更新情報がFacebookで見れます。

人気記事

    • チャレンジタッチのキーボードをパソコンで使えるように変換ケーブルを買ったぞ!

    • 紙×AIを体感せよ!「ScanSnap NEXT 2025」に参加してきたぞ! #ScanSnapNext

    • 折れたネジの外し方!「ネジはずしビット」でカンタンに外せるぞ!

    • ヘルシオで作る!丸鷄のローストチキン(照り焼き)が食育にもなりめっちゃジューシーで美味しいぞ!

    • Dyson V12 detect Slimを購入!付属の純正スタンドについて紹介するぞ!

関連記事

ブログのスマホ用デザインをカスタマイズしたぞ!
ブログカスタマイズ

ブログのスマホ用デザインをカスタマイズしたぞ!

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!
ブログカスタマイズ

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!
ブログカスタマイズ

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!

わんぱくなRSS・Twitterアイコンを自作してみたぞ!
デザイン・アート

わんぱくなRSS・Twitterアイコンを自作してみたぞ!

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!
ブログカスタマイズ

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!

ブログカスタマイズの記事をもっと読む

新着記事

セブンで復刻!?「ハーゲンダッツ ザ・ミルク」が激うま濃厚アイスだぞ!
グルメ

セブンで復刻!?「ハーゲンダッツ ザ・ミルク」が激うま濃厚アイスだぞ!

久しぶりに360度カメラ「Insta360 X5」を購入したぞ!
360度カメラ

久しぶりに360度カメラ「Insta360 X5」を購入したぞ!

「こだわり酒場のタコハイ〈白いプレーン〉」
お酒

「こだわり酒場のタコハイ〈白いプレーン〉」

店頭販売のみだったサッポロ「エーデルピルス」が缶ビールで数量限定販売だぞ!
お酒

店頭販売のみだったサッポロ「エーデルピルス」が缶ビールで数量限定販売だぞ!

紙×AIを体感せよ!「ScanSnap NEXT 2025」に参加してきたぞ!  #ScanSnapNext
イベント

紙×AIを体感せよ!「ScanSnap NEXT 2025」に参加してきたぞ! #ScanSnapNext

新着記事をもっと読む

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒
agilemedia
15301346_1142448849144320_1929483738_n
むねさだの欲しいものリスト公開中!
むねさだブログ
  • ホームに戻る
  • プロフィール
  • お問い合わせ

© 2025 むねさだブログ

閉じる

  • トップページへ戻る
  • プロフィール
  • お問い合わせ

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒