むねさだブログ

またの名を「わんぱくブログ」食・写真・ガジェットを使用した感想や情報を発信中!!

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

      2015/06/12

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

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

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

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

 

 

 

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

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

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

 
 


スポンサード リンク

<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%の文字が書けるわけです。

 

 

見だしを手に入れたぞ

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

見だしのプレビュー

 

いや~!嬉しいな。

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

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

 

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

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

 

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

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

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

 

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

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

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

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

 

 

 - ブログカスタマイズ , ,

        
  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る
コメントはこちら。

Comment

  1. […] 超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・ | むねさだブ… […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

STINGERってこんなにカンタンなの!?お試しのつもりが即適用!ブログのテーマが気がついたら変わっていたぞ! #ブロネク #stinger5

ブログを毎日更新し続けて950日以上が経ちました、むねさだ(@mu_ne3)です …

【初心者でもできる!】ブログに「パンくずリスト」を追加するプラグイン「Prime Strategy Bread Crumb」を設定してみたぞ!

HTMLとかCSSは全く知識が無いのでブログをカスタマイズする時は恐る恐るな、む …

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

一応、毎日ブログ更新をしていますむねさだ(@mu_ne3)です。 日曜日の昼下が …

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

HTMLとかCSSとかほとんど理解せずにブログ書いてます、むねさだ(@mu_ne …

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

むねさだブログを開設して、もうすぐで3年が経過します、むねさだ(@mu_ne3) …

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

ブログのカスタマイズが楽しくなってきました、むねさだ(@mu_ne3)です。 H …

むねさだブログのデザインリニューアルを行ったぞ!

HTMLとかCSSとか知識はほとんどありません、むねさだ(@mu_ne3)です。 …

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

他の人のブログで、自分のブログが紹介されていると嬉しくなります、むねさだ(@mu …

プロブロガー本2が予約開始っ。モチロン購入するぞっ!

このブログを始めて1年と4ヶ月毎日更新しています。 今でこそ毎日ブログを書くこと …

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

html、CSSって何ですか?って位WEBの知識の無い、むねさだ(@mu_ne3 …