むねさだブログ
  • プロフィール
  • グルメ
  • ガジェット
  • カメラ・写真
  • 子育て
  • 旅行
  • イベント
  • お問い合わせ
  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で見れます。

人気記事

    • 【注意】アイリスのパックごはんが自主回収!ロット番号を確認だぞ!

    • エアコンのドレンホースを延長したらベランダが濡れなくて気持ちが良いぞ!

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

    • 山梨観光「鳴沢氷穴」と「富岳風穴」どっちがおすすめか?両方に行った感想をまとめたぞ!

    • 電動アシスト付き自転車(ママチャリ)の前輪なら自分で簡単にパンク修理・タイヤ交換できるぞ!

関連記事

【要注意!】WordPressを使ったブログのサイドバーに「サイト管理」を残している人は即、外した方が良いぞ…!
ブログカスタマイズ

【要注意!】WordPressを使ったブログのサイドバーに「サイト管理」を残している人は即、外した方が良いぞ…!

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

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

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!
ブログカスタマイズ

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!

2年半ぶりにブログテーマを一新!苦手ならプロに任せるのはアリだぞ!
ブログカスタマイズ

2年半ぶりにブログテーマを一新!苦手ならプロに任せるのはアリだぞ!

描画をサクサクに!ブログのサーバーをロリポップからWPXサーバーに移転した手順をメモしておくぞ!
ブログカスタマイズ

描画をサクサクに!ブログのサーバーをロリポップからWPXサーバーに移転した手順をメモしておくぞ!

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

新着記事

UGREENのケーブル巻取り式の充電器・モバイルバッテリーが今なら安いぞ!
ガジェット

UGREENのケーブル巻取り式の充電器・モバイルバッテリーが今なら安いぞ!

UGREENのUSB Cケーブル内蔵65W充電器がスッキリ見えて良いぞ!
ガジェット

UGREENのUSB Cケーブル内蔵65W充電器がスッキリ見えて良いぞ!

ベビースターラーメンおつまみ「わさび味」がしっかりツーンとして、美味しいぞ!
グルメ

ベビースターラーメンおつまみ「わさび味」がしっかりツーンとして、美味しいぞ!

数量限定!贅沢搾りプレミアム 和梨が、濃厚な梨の香りと甘みで美味しいぞ!
お酒

数量限定!贅沢搾りプレミアム 和梨が、濃厚な梨の香りと甘みで美味しいぞ!

【注意】アイリスのパックごはんが自主回収!ロット番号を確認だぞ!
グルメ

【注意】アイリスのパックごはんが自主回収!ロット番号を確認だぞ!

新着記事をもっと読む

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • 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
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒