はるなぴログ

WEBサイト作成技術研究

Innocent(はてなブログテーマ)の表示を確認する

はてなブログのテーマInnocentを使っています。Innocentは非常に人気の高いテーマで2018年6月現在人気順位3位です。

非常にシンプルなテーマのInnocentが、プレーンな状態ではHTMLがどのように表示されるか確認してみます。

f:id:hal7pi:20180606210226j:plain

見出し(Header)

まずは見出しの確認です。H1はまぁいいですね。記事タイトルですから見ればわかります。

H2もいいかな。このセクションの見出しがH2です。H3から下を見ていきましょう。

見出しレベル3(H3)

はい、これが見出しレベル3です。見出しレベル2と3までは良く使うことになると思います。

見出しレベル4(H4)

これが見出しレベル4です。できれば見出しレベル4も使って書いていきたいです。

見出しレベル5(H5)

これが見出しレベル5です。H5まで使うことは稀かな。

見出しレベル6(H6)

これが見出しレベル6です。まぁH6まで使うなんてことはまず無いでしょうけどね。

強調表示

強調がどのように表示されるか確認します。

まずはemタグの強調表示を見てみましょう。

次はstrongタグの強調表示を見てみます。

最後にmarkタグも確認しておきます。

リスト

リスト表示を確認します。

箇条書きリスト

  • はてなブログ
  • アメーバブログ
  • ココログ
  • ライブドアブログ

順番付きリスト

  1. Yahoo!ブログ
  2. gooブログ
  3. Blogger
  4. FC2ブログ

コード

プログラムコードの表示を確認します。

インラインコード

インラインコードがどのように表示されるか確認します。strongタグは強調表示に使われます。

コードブロック

コードブロックの表示を確認します。

article .toc {
  background: #ffffe0;
  border: outset thin #ccc;
  font-size: 1rem;
  padding: 10px;
  margin: 0 0 20px;
  display: block;
  box-sizing: border-box
}

ブロッククウォート(Blockquote)

「BLOCKQUOTE」とは、引用・転載であることを示すタグです。やってみましょう。

ここから引用開始。どんどん文章を引用していきます。そして最後までずっと引用。

テーブル (Table)

テーブルがデフォルト状態でどのように表示されるか確認します。

サービス 特徴 評価
はてなブログ 技術
Yahooブログ B級グルメ
gooブログ 写真
ライブドアブログ 炎上

リンク (aタグ)

最後にリンクも確認しておきましょう。

静的サイトジェネレータHugoがまたまた進化していて驚いた件