例文エントリー

sora.jpg
文字サイズ:大(x-large)
文字サイズ:中(large)
文字サイズ:小(large)

em
strong
下線
斜体
打ち消し線

見出し(h4)



水平線



記事内のリンク色

  • リスト
  • ul

  1. リスト
  2. ol


blockquote,cite

HTML5 は、プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム(JavaFX、Adobe Flash、Silverlight 等)を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。

2008年以降に発表されたウェブブラウザの多くは HTML5 に段階的に対応している。Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9 などであり主にaudio要素・ video要素・canvas要素への対応が進んでいる(2010年3月現在)。また WebSocket など、当初 HTML5 の一部とされていたものの切り離され別の規格として策定作業が進められているものがある。
Wikipediaより



pre,code
#wrapper {
background: #ffffff;
margin: 10px auto;
text-align: left;
width: 920px;
}



HTML5から追加された新要素


mark
文字をハイライト
関連記事

カスタマイズ:OK、NG

カスタマイズでOKなこと



  1. 文字色・リンク色・文字サイズ・フォントの種類の変更 *1

  2. 左右カラムの変更

  3. カラムの増減

  4. コンテンツの幅を変更

  5. 日付・コメントなど記事に関する情報や、プラグインの位置を変更

  6. 余白の変更

  7. 寄せの変更 *2

  8. ヘッダー画像の変更(ある場合のみ)

  9. コンテンツを追加(ヘッダー部分に画象を置きたいなど)

  10. HTML、CSS、JavaScriptを追加または削除*3


*1 フォントに関してはサイズを変更すると素材にズレが生じる場合もあります。そのような場合はご自身で調整してください

*2 センタリングする場合はcenterタグを使用しないでください。詳しくはこちら

*3 CSSにある「▼基本設定」の「リセット」はよく分からない場合はいじらないでください。これは各ブラウザとの差異をなくす為です

カスタマイズでNGなこと



  1. 背景色、背景画像の変更

  2. テンプレート内の画像の変更(背景画像を差し替えるなど。ヘッダー画像は除きます)

  3. テンプレート内の画像の加工、再配布

  4. 他所様の素材サイトと組み合わせること*1

  5. カスタマイズ後の再配布、共有テンプレートへの登録、FC2ブログ以外での使用

  6. 広告表示と当ブログへのリンクを削除



*1 サイトによっては併用を可としている方もいますがそうでもない方も居ます。たまに素材サイトの規約を守らず利用している方を見ますが、こちらとしては面倒事を背負い込むのは嫌ですので基本的には使用しないでください。相手側の方は私が規約を守らずにテンプレートを作っていると勘違いされても困りますので…
関連記事

カスタマイズ:注意点

個人的にカスタマイズ後のソースを見て気になった点など

文字が小さい


小さめの文字を好んで8pxなど10px以下に設定する方が見受けられます。正直、見づらいです。最低限でも10px~12pxぐらいがいいと思われます。

コンテンツの幅が大きい


まれに#wrapperのサイズを1500pxなど大きめのサイズに設定している方を見受けます。ご自身のPCの解像度が大きい為にそのようなサイズになったと思われます。

幅を変更するのは自由ですが、見ている方が同じ解像度とは限りません。あまりにも大きすぎると小さめの解像度で見ている方からすれば横にスクロールバーが出て非常に見づらく感じます。

id、classの使い方


id(#="id名")を重複して使用している方がいましたが、原則としてidは1度しか使えません。逆にclass(class="class名")は何度でも使うことが可能です。

またid・class名に日本語を使用している方がいましたが半角英数字を利用してください。試してみると反映はしましたが文法的にいいとは言えません。

記事本文をセンタリングする際にcenterタグを使用している


これがもっとも見かけるやり方です。centerタグは使用ないでください。HTML5では廃止されたタグとなっています。その他にも、big、font、uなどいくつかのタグは廃止となっています。詳しくは廃止された要素とバリデーションをご覧ください。

画像のように記事本文をセンタリングしたい場合は、以下の部分にコードを追加してください。当方のテンプレートでの例です。

centering.jpg

テンプレートによって違いますが、HTMLの記事の部分に

  • <section class="content"><%topentry_body></section>
  • <!--△記事本文 -->

というのがあります。この場合、本文にあたる部分はcontentというクラスに囲まれています。なので、CSSの▼記事(個別)にある

  • .content {
  • margin: 15px 0;
  • padding: 8px 15px;
  • }

の部分に

  • .content {
  • margin: 15px 0;
  • padding: 8px 15px;
  • text-align: center;
  • }

「text-align:center;」を追加すれば文章がセンタリングされます。

廃止されてるといってもブラウザがサポートしているかぎりは反映はします。ですが、HTML5に限らず元々centerタグなどは非推奨のタグとなっています。出来るだけCSSを使用してください。
関連記事

その他:ブラウザ

ご利用しているブラウザについて



  • HTML5で構成されているためIE(IE9は除く)や旧バージョンのブラウザで見るとレイアウトが崩れる場合があります

  • また、JavaScriptを無効にしている場合、IE9以下はレイアウトが崩れます。

  • ブラウザのCSS実装状況によってディテールの異なるパーツがあります

  • IE8以下での利用は非推奨です。IE6に関しては非対応だと思ってください

理由としては、IEはバージョンごとにバグがあり(特にIE6は酷い)こちらでは全てを対処し切れないからです。私自身も一部分しか把握していません。差異がないように気をつけていますが、出来るだけ最新のブラウザをお使いください。

なお、IE9はOSがVista以降でないと利用出来ないのでご注意ください。個人的にはFirefoxGoogle Chromeの利用をお薦めします。