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

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

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

@mu_ne3さんをフォロー
くわしいプロフィール
     Yahoo!エキスパートで記事書いてます

ブログの更新情報

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

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

人気記事

    • ファミマ「も~っちり食感たまご蒸しパン」が、想像以上にもっちもちで美味しいぞ!

    • ビールになった新「金麦」を旧金麦と飲み比べ!味の違いを比べてみたぞ!

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

    • 遠投ウキの収納に!ダイソーの長もの用ケースがちょうど良いぞ!

    • 常温保存できるの!?ロッテ「生サブレ」がしっとり食感でめちゃくちゃ美味しいぞ!

関連記事

【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク
ブロネク

【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!
ブログカスタマイズ

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!

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

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

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

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

【ブロガー必見!】GoogleAnalyticsで自分のブログへの被リンクが分かる「トラックバック」機能が便利だぞ!
ブログカスタマイズ

【ブロガー必見!】GoogleAnalyticsで自分のブログへの被リンクが分かる「トラックバック」機能が便利だぞ!

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

新着記事

「未来のレモンサワー 檸檬ジンジャー」が爽やかなレモン×ジンジャーの辛旨で美味しいぞ!
チューハイ

「未来のレモンサワー 檸檬ジンジャー」が爽やかなレモン×ジンジャーの辛旨で美味しいぞ!

お菓子

33万円でも安い!?30周年記念「HHKB Professional Elite」が300台限定で発売だぞ!
ガジェット

33万円でも安い!?30周年記念「HHKB Professional Elite」が300台限定で発売だぞ!

新発売!「金麦〈豊潤〉」がプレミアムビールのような豊かな味わいで美味しいぞ!
チューハイ

新発売!「金麦〈豊潤〉」がプレミアムビールのような豊かな味わいで美味しいぞ!

ポテトチップスのために生まれた「ぽろしり」を使った「ぽろしり 味わいチーズ味」を実際に食べてみたぞ!
お菓子

ポテトチップスのために生まれた「ぽろしり」を使った「ぽろしり 味わいチーズ味」を実際に食べてみたぞ!

新着記事をもっと読む

おすすめカテゴリー

ガジェット

最新ガジェットや便利グッズ、iPhoneやMacなどをレビュー

ガジェットの記事を見る

グルメ

話題のお店やコンビニグルメ、お取り寄せまで幅広く紹介

グルメの記事を見る

飲み物

コンビニの新商品からビール・チューハイ・ジュースまで。実際に飲んで感じた美味しさをレビュー

飲み物の記事を見る

旅行

旅行先の観光スポットやホテル、旅がもっと楽しくなる情報を紹介

旅行の記事を見る

釣り

堤防釣りを中心に釣行記や道具、釣りを楽しむコツを紹介

釣りの記事を見る

カメラ・写真

カメラ機材のレビューから撮影テクニックまで、写真を楽しむ情報を紹介

カメラ・写真の記事を見る

▶ カテゴリー一覧を見る

agilemedia
むねさだの欲しいものリスト公開中!
むねさだブログ
  • ホームに戻る
  • プロフィール
  • お問い合わせ

© 2026 むねさだブログ

閉じる

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

おすすめカテゴリー

ガジェット

最新ガジェットや便利グッズ、iPhoneやMacなどをレビュー

ガジェットの記事を見る

グルメ

話題のお店やコンビニグルメ、お取り寄せまで幅広く紹介

グルメの記事を見る

飲み物

コンビニの新商品からビール・チューハイ・ジュースまで。実際に飲んで感じた美味しさをレビュー

飲み物の記事を見る

旅行

旅行先の観光スポットやホテル、旅がもっと楽しくなる情報を紹介

旅行の記事を見る

釣り

堤防釣りを中心に釣行記や道具、釣りを楽しむコツを紹介

釣りの記事を見る

カメラ・写真

カメラ機材のレビューから撮影テクニックまで、写真を楽しむ情報を紹介

カメラ・写真の記事を見る
すべてのカテゴリーを見る