使用する色

記事中で文字色を変える場合には以下の色を推奨します。

通常の文字色 #595959
カテゴリー色 #BF3965
カテゴリー色 #4C6A0C
カテゴリー色 #655385
リンク色 #068099
訪問済み時 #A160C2

図版の使用

図版はスマートフォンなどでの閲覧も想定し、小さい文字はなるべく控えてください。記事エリアの最大の横幅は615pxです。高さに制限はありません。

記事で使用するHTML要素

見出し(h2、h3、h4、h5、h6)

記事のタイトルをh1と定めているので、記事中の見出しはh2からスタートしてください。

h2~h5までが記事の段落と同じサイズです。それ以降は通常の段落より文字が小さくなります。以下はサンプルです。

プロモーションポイントを決める5つの要素

プロモーションポイントを決める5つの要素

プロモーションポイントを決める5つの要素

プロモーションポイントを決める5つの要素
プロモーションポイントを決める5つの要素

ソース上での表示

<h2>プロモーションポイントを決める5つの要素</h2>
<h3>プロモーションポイントを決める5つの要素</h3>
<h4>プロモーションポイントを決める5つの要素</h4>
<h5>プロモーションポイントを決める5つの要素</h5>
<h6>プロモーションポイントを決める5つの要素</h6>

段落

通常入力する場合は段落となります。

ソース上での表示

<p>通常入力する場合は段落となります。</p>

強調

強調する際に使用します。段落6、リストの中の場合、背景がマーカーで塗ったようなものになります。

サンプル

これはペンです

ソース上での表示

これは<strong>ペン</strong>です</p>

汎用ボックス01

伝えることが多すぎて読者の目を休めるとき、また箇条書きを強調する際に使用します。

この中で見出しを付ける場合はh3以下からスタートしてください。その際は、h3の装飾が通常よりシンプルになります。

汎用ボックス01内で使えない要素

  • h1、h2
  • blockquote
  • ソースコード表示ボックス
  • 外部サイトの埋め込みボックス(SlideShareなど)

汎用ボックス01のサンプル

「で、それ現場でどう使うの?」という話ですが、やる事は大体以下のような感じ

  • プロジェクトのコンセプトや理念など、いわゆる上流工程の部分を夢いっぱいに共有する
  • やった事に関して超具体的かつ専門的に褒める

ソース上での記述

<div class="modBox01">
<h4>サンプル</h4>
<p>「で、それ現場でどう使うの?」という話ですが、やる事は大体以下のような感じ</p>
<ul class="squareList">
<li>プロジェクトのコンセプトや理念など、いわゆる上流工程の部分を夢いっぱいに共有する</li>
<li>やった事に関して超具体的かつ専門的に褒める</li>
</ul>
</div>

箇条書き

箇条書きはいくつかの種類があります。情報構造に応じて使用します。箇条書き内の順序を変更しても成立する場合はul、順序を変更すると破綻するもの(ものごとの手順)などを説明する場合にはolを使用してください。

これらは汎用ボックス01内でも使用できます。

通常の箇条書き(ul.squareList、ol.squareList)

  • いらないコンテンツは思い切って捨てる
  • 勇気を持って言い回しを省く
  • 可能な限りページをまとめ、情報を鋭くする
ソース上での記述
<ul class="squareList">
<li>いらないコンテンツは思い切って捨てる</li>
<li>勇気を持って言い回しを省く</li>
<li>可能な限りページをまとめ、情報を鋭くする</li>
</ul>

強めの箇条書き(ul.strongSquareList、ol.strongSquareList)

  • いらないコンテンツは思い切って捨てる
  • 勇気を持って言い回しを省く
  • 可能な限りページをまとめ、情報を鋭くする
ソース上での記述
<ul class="strongSquareList">
<li>いらないコンテンツは思い切って捨てる</li>
<li>勇気を持って言い回しを省く</li>
<li>可能な限りページをまとめ、情報を鋭くする</li>
</ul>

数字の箇条書き(ul.numberList、ol.numberList)

  • いらないコンテンツは思い切って捨てる
  • 勇気を持って言い回しを省く
  • 可能な限りページをまとめ、情報を鋭くする
ソース上での記述
<ul class="numberList">
<li>いらないコンテンツは思い切って捨てる</li>
<li>勇気を持って言い回しを省く</li>
<li>可能な限りページをまとめ、情報を鋭くする</li>
</ul>

リンク強調用ボックス(a.link)

他のサイトや以前公開した記事を紹介する際に使用します。必ず段落の中、汎用ボックスの中で使用してください。別ウィンドウで開く場合には、「target="_blank"」を挿入してください。

また、a要素以外では使用できません。

Webディレクターズマニュアル

ソース上での記述
<p><a href="/" class="link">Webディレクターズマニュアル</a></p>

水平線

見出しを変えるほどでもない程度の文章の区切りを示す際に使用します。


ソース上での記述

<hr>

ソースコードの表示

HTMLやPHP、JavaScriptなどのコードを表示する場合に使用します。この際、欧文フォントがSource Code Proに代わり、「0」「O」などの区別が付きやすくなります。

強調するためのstrong要素は太字となり、文字色が赤めになります。

<script type="text/javascript">
var _gaq = _gaq || [];
var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-XXXXXX-Y']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>​

ソース上の記述

<pre class="prettyprint">
&lt;script type=&quot;&lt;strong&gt;text/javascript&lt;strong&lt;&quot;&gt;
var _gaq = _gaq || [];
var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-XXXXXX-Y']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);<br /> })();
&lt;/script&gt;​
</pre>

行数番号も表示する

行番号を表示する際にはclassにlinenumsを追加します。

<script type="text/javascript">
  var _gaq = _gaq || [];
  var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
  _gaq.push(['_setAccount', 'UA-XXXXXX-Y']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>​
<pre class="prettyprint linenums">
<script type="text/javascript">
  var _gaq = _gaq || [];
  var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
  _gaq.push(['_setAccount', 'UA-XXXXXX-Y']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  </script>​
</pre>

表組み(table.baseTable)

表は場合によることが多いので幅は個別にタグ内で指定してください。スマートフォンなどでの小さな端末では一律で幅いっぱいに広がるようにしています。

  列見出し 列見出し
行見出し セル セル
行見出し セル セル
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>列見出し</th>
<th>列見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th>行見出し</th>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<th>行見出し</th>
<td>セル</td>
<td>セル</td>
</tr>
</tbody>
</table>

SlideShare

スライドシェアは段落にslideshareというクラス名を振り、その中にiframeで埋め込みをします。

<p class="slideshare">
<iframe allowfullscreen="" frameborder="0" height="504" marginheight="0" marginwidth="0" mozallowfullscreen="" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/23714959" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" webkitallowfullscreen="" width="600"></iframe>
</p>

イベントボックス

イベントへの誘導を目的に使用します。

0からのWebディレクション講座@関西:設計編

5月開催の「制作・開発編」・6月の「運用編」に続くにもつながる大事な入り口「設計編」をお送りします。

日時4月27日(日) 13:00~19:00(開場:12:30~)
料金3,000円(セミナー代+ワークショップ+ミートアップ)
会場TAM Coworking(〒530-0053 大阪市北区末広町3-7
主催日本ディレクション協会

イベントを詳しく見る

<div class="eventBox">
<h2><a href="http://peatix.com/event/33436" target="_blank">0からのWebディレクション講座@関西:設計編</a></h2>
<p>5月開催の「制作・開発編」・6月の「運用編」に続くにもつながる大事な入り口「設計編」をお送りします。</p>
<table>
<tr><th>日時</th><td>4月27日(日) 13:00~19:00(開場:12:30~)</td></tr>
<tr><th>料金</th><td>3,000円(セミナー代+ワークショップ+ミートアップ)</td></tr>
<tr><th>会場</th><td><a href="https://www.facebook.com/TAMCoworking" target="_blank" >TAM Coworking</a>(〒530-0053 <a href="http://goo.gl/maps/dkIAP" target="_blank" >大阪市北区末広町3-7</a>)</td></tr>
<tr><th>主催</th><td><a href="http://www.direkyo.com/" target="_blank">日本ディレクション協会</a></td></tr>
</table>
<p><a href="http://peatix.com/event/33436" target="_blank" class="link">イベントを詳しく見る</a></p>
</div>