このドキュメントは、社内ブログを書くにあたって、ブログ内でのUIパーツの再利用性を高めるために、各パーツの用例と実表示例をまとめたスタイルガイドです。
このように記事のはじめには必ず要約テキストが入ります。要約テキストのあとにはスポンサード広告が自動挿入されます。
中見出し Heading Level.1
各セクションの中見出しはh3要素でマークアップします。section要素はh3要素を基準に決定します。
小見出し Heading Level.2
小見出しはh4要素でマークアップします。このブログで使える最小の見出しです。これよりも細かい見出しが必要になる場合は、別の記事にするなど記事を再構成します。
画像
ページ全体の背景には、アイキャッチ画像が入ります。契約しているストックフォトから記事にふさわしいアイキャッチを選別し、必要に応じて加工のうえ、設定します。
本文内にはキャプション付きの画像を設定することもできます。
リンク
通常のテキストです。ここはテキストリンクです。通常のテキストです。
リスト
序列を表すのが望ましい場合は、ol要素でマークアップします。序列に関係のない箇条書きリストで表せる場合は、ul要素でマークアップします。各リストはli要素を使います。
序列リストの例
- 本体右横の電源ボタンを2秒長押しして、電源を入れます。
- 電源を入れて、しばらくするとロック画面が表示されます。
- 画面をスワイプしてロックを解除します。
箇条書きリストの例
- ゲーム
- スポーツ
- ファッション
- エンタメ
注釈
注釈は、ul要素にnoteのclass名をつけて、各注釈ごとにリストにします。文頭には、※をspan要素でマークアップし、テキストはsmall要素でマークアップします。
<ul class="note">
<li><span>※</span><small>ここに注釈テキストが入ります</small></li>
</ul>- ※税込価格です。
- ※取り付けはオプションで別料金となります。
取り付け料金は、1箇所につき1,080円(税込)です。
引用文
quoteのclass名をつけた引用ブロックの中に、引用文をblockquote要素内で、引用元をcite要素でマークアップします。
Example textLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
テーブル
必要に応じて、thead要素とtbody要素は省いて使います。
| 課金方式 | 最低入札額 | 説明 |
|---|---|---|
| CPC | ¥24 | クリック時に課金 |
| CPM | ¥400 | 1,000回表示ごとに課金 |
| CPF | ¥50 | 友だち追加時に課金 |
ソースコード
次のソースコードでマークアップした内容は、自動的にシンタックスハイライトします。
<pre><code class="highlight">
ここにコードを入れる
</code></pre>ソースコードの内容から適切な言語へのハイライトを判別します。判別が正しくない場合は、必要に応じて、ソースコードの言語を明示して、シンタックスハイライトの動作を補助することができます。lang-xx でxxに言語名のついたclassをhighlightに続いて追加します。
HTMLの場合 highlight lang-html
<html>
<head>
<title>W3G</title>
</head>
</html>CSSの場合 highlight lang-css
.important{
color: red;
font-weight: bold;
font-size: 2rem;
}JSの場合 highlight lang-js
window.onload = function() {
alert('Hello world!!');
console.log('Hello world!!');
};PHPの場合 highlight lang-php
<?php
echo 'Hello world!!';
?>外部メディアの埋め込み
Youtube, Vimeo, Instagram, Twitterなどの各種ソーシャルの共有ボタンを押して表示される埋め込みソースコードを貼り付けます。Youtube, Vimeoは自動的に16:9の比率でレスポンシブ表示にします。