Loading...

トカチニッチ

北海道十勝の超ローカルウェブメディア「トカチニッチ」ニッチな情報毎日更新中!

Google翻訳

HTMLソースで記事を書く!作業用テンプレート

トカチニッチ公式

トカチニッチ公式

3703 VIEW
投稿記事
注目タグ

ヘッドライン見出し・h2要素が使われてます

ソースをいじる人の為の記事テンプレートです。HTMLタグを利用することで、比較的自由なレイアウト表現が可能になります。
使用できるタグは h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre, fieldset, legend くらいにしておきます(デザイン調整が大変なので大目に見てください)。

テキストにアンカーリンクを張った場合はこんな感じ。こっちは別窓で開く外部リンクです。

※<span style="color:#C66;">注記の色を付けたテスト。アンカーリンクとは、リンクしたい場所にアンカー(目印)を置いて、<a href="#アンカー名">でリンクするとページ内ジャンプが出来る仕組みのことです。

小見出し・h3要素が使われてます

  1. 順序が付いているリスト、つまり <ol>要素です。
  2. こんな
  3. 感じで
  4. 数字付き!

「<ol>要素」と「アンカーリンク」を組み合わせて、ページ内の目次を作ることができます。長めのページになる場合は目次を作ってあげると、親切で読みやすくなります。
さらに枠を付けてあげる場合は、
<fieldset><legend>タイトル</legend>枠の中の目次要素や文章</fieldset>
としましょう。

目次
  1. 例えば
  2. こんな
  3. 感じで
  4. 表現が可能!

小見出し・h4要素

強調表示 <strong> のテストです。強調表示 <em> のテストです。画像を右配置した場合のレイアウトです。神山おじさんが帯広競馬場で熱くなっていますね。素敵です。強調表示に色を付けてあげた例です。

この部分は段落、<p>(本文)です。<p>~</p>で囲まれた部分がひとつの段落であることを表します。一般的なブラウザでは<p>~</p>の前後に1行分改行されますが、 単に改行することが目的の場合には、<p>タグではなく<br>タグを使用してください。
→<br>を使うとこんな感じで改行されます。

<table>テーブル(表)のテスト

<th>テーブルヘッダー <td>テーブルデータ。<td>テーブルデータ。<td>テーブルデータ。
<th>は太字になります <td>テーブルデータ。<td>テーブルデータ。<td>テーブルデータ。

<table>はテーブル(表)を作成するタグです。テーブル(表)の基本的な構造は、<table>~</table>内に<tr>~</tr>で表の横一行を定義して、さらにその中に<th>~</th>や <td>~</td>でセルを定義します。

Aのタイトル Bのタイトル Cのタイトル
Aの内容 Aの内容 Aの内容 Aの内容 Bの内容 Bの内容 Bの内容 Bの内容 Cの内容 Cの内容 Cの内容 Cの内容
1,111円 2,222円 3,333円

※テーブルはあくまで表としての表現に留めておきましょう。複雑なレイアウトは表示が崩れる原因となります。

<dl>定義リストのテスト

定義リストのタイトル
<dl>要素(定義リスト)は、説明付きリストとも呼ばれています。この定義リストはなかなか便利でして、日付を付けて日記風にしてみたり、色々な使い方ができます。
20XX年XX月XX日
デザインは一種類のみですが、ご了承ください。
20XX年XX月XX日
内容がナイヨウ。内容がナイヨウ。

<img>画像配置のテスト

大きな神山おじさんの配置例(センター寄せ)

このテキストはダミーテキストです。テキストの右側に画像を配置したい場合は、<p>タグ内のトップに<img>を配置しましょう。こんな感じで右側に表示されます。

ここに写真の説明

このテキストはダミーテキストです。このテキストは画像の左側に回り込みます。写真の下に小さく説明を入れる場合は、このような表示になります。

次に、テキストの左側に画像を配置したい場合は、<p>タグ内のトップに<img>を配置しましょう。こんな感じで今度は左側に表示されました。

↑ここに<div style="clear:both"></div>を配置。画像をテキストの左右に配置している場合、文字数が足りないと、次の要素が回り込んでしまいレイアウトが崩れる場合があるので、一度左右のフロートをクリア(clear fix)してあげます。自分でも何を言っているのかわからなくなってきました。

<ol>と似て非なるもの<ul>

  • ここは並列列挙リストです。つまり <ul>要素です。
  • 先程説明した<ol>と似ていますが
  • 順序が付いていません。
  • 数字の代わりにリストの先頭にかわいい丸ポッチが付きます。
  • リンクを付けた例です。

次はブログ等によく出てくる<blockquote>引用のテストです

<blockquote>とは、引用・転載文であることを示すタグです。比較的長いテキストを段落ごと引用する際に使用されます。短いテキストの場合は<blockquote>タグではなく<q>タグを使用して引用・抜粋を行います。

ここは引用です。<blockquote>はこのように表示されます。

ゴルフは英国発祥というのが定説であったが 最近では宗家二代 呉 竜府(ご・りゅうふ)がその起源であるという説が支配的である。

(民明書房から抜粋)

<q>タグはこのように使います。<q>タグで囲うと勝手に""が付きます。

短いテキストの引用・抜粋(太公望書林から抜粋)

高度な編集

本文中でHTMLソース等の説明する場合は、<pre>要素が便利です。
↓このようにグレーの枠内で表示され、ソースのコピーも可能になります。

#main ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

トカチニッチ独自のタグ

より自由度を高めるために、トカチニッチ専用のタグをご用意。例えば、Youtube動画を埋め込む場合は、Youtubeで取得した埋め込みソースを<div class="youtube_if">ここにソース</div>で囲ってください。
↓下記のように横幅にフィットします。

文字の大きさは、<p>または<p>タグ内の<span>で<class="fs_10">~<class="fs_26">を使います。

fs_10の例です。

fs_14の例です。

fs_18の例です。

fs_22の例です。

fs_26の例です。強調表示!

以上、ソースをいじる人のための中級者講座でした。
ソースをいじらなくても「この記事のように」画像とテキストのみで簡単な記事が書けます。面倒な方はお試しください。


この記事が気に入ったら

※現在、こちらのコメント欄でのご質問・お問い合わせは受付けておりません。 恐れ入りますが、ご利用に関する不明点などは「お問い合わせフォーム」よりご連絡ください。

※投稿内容に関係のないコメントや、不適切な表現に該当すると判断したコメントは、投稿者に断りなく削除する場合があります。

  • コメント
  • ランキング
  • オススメ
思い出の「RED WING(ブーツ)」をメンテナンスしてみた!十勝・帯広ブーツ界の雄「NEWSCLIP」訪問記

素敵な記事ですね。同じく十勝出身の若手職人2人が立ち上げたレッドウィングなどワークブーツやニューバランスなどもカスタム修理してくれるASHIDOHOKKAIDOさんが札幌にオープンされましたよ!いつかは十勝帯広でもやって欲しいですね。レッドウィングのカスタムも色々とやってました!

思い出の「RED WING(ブーツ)」をメンテナンスしてみた!十勝・帯広ブーツ界の雄「NEWSCLIP」訪問記

コメント一覧
ランキング一覧
オススメ一覧