投稿日:

投稿フォーマット:動画(YouTube)　URL指定

YouTubeの動画URLリンク設定

下記、記述例のようなソースを書くことで、記述例の下にある画像をクリックしてYouTubeの動画再生ページへリンクすることができます。

記述例：<a href=”https://youtu.be/7N2M8_-9wMs”;><img src=”http://takasago-information.com/wp-content/uploads/2017/06/hqdefault.jpg” alt=”” width=”196″ height=”110″ class=”alignnone size-full wp-image-150″></a>

投稿日:

投稿フォーマット:動画(YouTube)　ソースコード埋込

YouTubeの埋込ソースコードを入力して、動画プレーヤーを設置(表示)してみよう

１．Youtubeにログインします。

２．動画の管理などから挿入したい動画を選択します。

３．選択した動画の下へスクロールしていくと、「概要」「共有」「追加」とタブがあるので、
　　「共有」をクリックします。

４．「埋め込みコード」を選択、クリックします。
　　以下のようなソースが表示されますので、ソースをコピーし、YouTube動画の動画を表示したい位置に
　　貼り付けます。
　　

　　埋め込みコードの例：
<iframe width=”480″ height=”270″ src=”https://www.youtube.com/embed/7N2M8_-9wMs” frameborder=”0″ allowfullscreen></iframe>


投稿日:

画像の配置

画像をいろいろな位置に配置してみよう。

ここでは、いろいろな位置に画像を配置する方法を解説します。

画像を中央寄せで表示してみよう。

記述例：<p style=”text-align: center;> <img class=”size-full wp-image-906 aligncenter” title=”画像配置 580×300″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580×300.jpg” alt=”画像配置 580×300″ width=”580″ height=”300″></p>

画像配置 580x300

画像を左寄せし、その周りに文章を書いてみよう。

記述例：<img class=”size-full wp-image-904 alignleft” title=”画像配置 150×150″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150×150.jpg” alt=”画像配置 150×150″ width=”150″ height=”150″>
このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

画像配置 150x150このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

とても大きな画像を表示してみよう。（この画像には配置の指定がありません）

下記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。

記述例：<img class=”alignnone wp-image-907″ title=”画像配置 1200×400″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200×4002.jpg” alt=”画像配置 1200×400″ width=”1200″ height=”400″>

画像配置 1200x400

画像を右寄せで表示してみよう。

記述例：<img class=”size-full wp-image-905 alignright” title=”画像配置 300×200″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300×200.jpg” alt=”画像配置 300×200″ width=”300″ height=”200″>

画像配置 300x200
今度は画像の右寄せに移りたいと思います。
左寄せの時と同様、画像の上、下、左に十分な余白があると思います。
そして、テキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。
ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているはずです。

画像にキャプションをいれてみよう。

記述例：［caption id=”attachment_906″ align=”aligncenter” width=”580″］<img class=”size-full wp-image-906 ” title=”画像配置 580×300″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580×300.jpg” alt=”画像配置 580×300″ width=”580″ height=”300″>キャプション［/caption］

画像配置 580x300
キャプション

上記の画像は中央寄せになるはずです。おかしな表示になっていないか確認しましょう。

画像にキャプションをいれてみようその２（左寄せ画像）

記述例：［caption id=”attachment_904″ align=”alignleft” width=”150″］<img class=”size-full wp-image-904 ” title=”画像配置 150×150″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150×150.jpg” alt=”画像配置 150×150″ width=”150″ height=”150″>ちょっとしたキャプション［/caption］

画像配置 150x150
ちょっとしたキャプション

このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。
ご覧の通り、画像の上・下・右にスペースが必要です。テキストが画像に近すぎないようにする必要があります。画像だって十分にスペースが必要なのです。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

画像にキャプションをいれてみようその３（大きな画像）

記述例：［caption id=”attachment_907″ align=”alignnone” width=”1200″］<img class=” wp-image-907″ title=”画像配置 1200×400″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200×4002.jpg” alt=”画像配置 1200×400″ width=”1200″ height=”400″>とても大きな画像のキャプション［/caption］

画像配置 1200x400
とても大きな画像のキャプション

画像にキャプションをいれてみようその４（右寄せ画像）

記述例：［caption d=”attachment_905″ align=”alignright” width=”300″］<img class=”size-full wp-image-905 ” title=”画像配置 300×200″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300×200.jpg” alt=”画像配置 300×200″ width=”300″ height=”200″>右寄せ画像のキャプション［/caption］

画像配置 300x200
右寄せ画像のキャプション

最後に右寄せ画像にキャプションをつけたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。
このへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

画像の配置のテストはこれで終わりです。

投稿日:

投稿HTML書式集

記事投稿をする際のHTML書式集

記事投稿をする際に、見出しはどうすればできるのか？表組はどうする？　こんな悩みはこのページを読めば解決します。

読みやすさと美しさにこだわったタイトル

記述例：<h1>読みやすさと美しさにこだわったタイトル</h1>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

読みやすさと美しさにこだわったタイトル

記述例：<h2>読みやすさと美しさにこだわったタイトル</h2>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

読みやすさと美しさにこだわったタイトル

記述例：<h3>読みやすさと美しさにこだわったタイトル</h3>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

読みやすさと美しさにこだわったタイトル

記述例：<h4>読みやすさと美しさにこだわったタイトル</h4>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

読みやすさと美しさにこだわったタイトル
記述例：<h5>読みやすさと美しさにこだわったタイトル</h5>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

読みやすさと美しさにこだわったタイトル
記述例：<h6>読みやすさと美しさにこだわったタイトル</h6>

記事の最初に書くのがタイトル、大きさや演出なども記事投稿のテクニックです。

引用 (Blockquote) テスト

一行の引用。

ハングリーであれ、愚かであれ。

記述例：<blockquote>ハングリーであれ、愚かであれ。</blockquote>

cite 参照を含む複数行の引用。

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。

スタン・ゲッツ

記述例：
<blockquote>これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。
<cite>スタン・ゲッツ</cite></blockquote>

テーブル

社員 給料
山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
田中花子 1,000万円 ブログを書くために必要になる資金。
山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子 10億円 特に理由は要りません。
記述例：
<table>
<thead>
<tr>
<th>社員</th>
<th>給料</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th><a href=”http://example.org/”>山田太郎</a></th>
<td>1ドル</td>
<td>スティーブ・ジョブズが必要なサラリーと同じ額。</td>
</tr>
<tr>
<th><a href=”http://example.org/”>田中花子</a></th>
<td>1,000万円</td>
<td>ブログを書くために必要になる資金。</td>
</tr>
<tr>
<th><a href=”http://example.org/”>山本次郎</a></th>
<td>1億円</td>
<td>百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。</td>
</tr>
<tr>
<th><a href=”http://example.org/”>中山愛子</a></th>
<td>10億円</td>
<td>特に理由は要りません。</td>
</tr>
</tbody>
</table>

定義リスト

定義リストタイトル
これは定義リストです。
定義
物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
ギャラリー
こんかい導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
Gravatar (グラバター)
グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
記述例：
<dl>
  <dt>定義リストタイトル</dt>
  <dd>これは定義リストです。</dd>
  <dt>定義</dt>
  <dd>物事、領域、何かについての意味の正確な文章や説明: <em>詩を構成するものの定義。</em></dd>
  <dt>ギャラリー</dt>
  <dd>こんかい導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。</dd>
  <dt>Gravatar (グラバター)</dt>
  <dd>グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。</dd>
</dl>

非順序リスト (ネスト化)

  • リスト項目 1
    • リスト項目 1
      • リスト項目 1
      • リスト項目 2
      • リスト項目 3
      • リスト項目 4
    • リスト項目 2
    • リスト項目 3
    • リスト項目 4
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4

順序リスト (ネスト化)

  1. リスト項目 1
    1. リスト項目 1
      1. リスト項目 1
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4
  2. リスト項目 2
  3. リスト項目 3
  4. リスト項目 4
記述例：
<ul>
  <li>リスト項目 1
<ul>
  <li>リスト項目 1
<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ul>
</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ul>
</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ul>
<h2>順序リスト (ネスト化)</h2>
<ol>
  <li>リスト項目 1
<ol>
  <li>リスト項目 1
<ol>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ol>
</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ol>
</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  <li>リスト項目 4</li>
</ol>

HTML 要素タグテスト

他の HTML タグの参考例です。

住所タグ
以下は住所の例です。<address> タグを使用しています:

〒100-0000東京都千代田区1-1-1日本

anchor タグ (リンク)

記述例：<address>〒100-0000東京都千代田区1-1-1日本</address><strong>anchor タグ (リンク)</strong>

これは <anchor> (もしくはリンクとも呼ばれます) の例です。

abbr タグ
この abbr は文章の中にある <abbr> タグの例です。

記述例：この <abbr title=”abbreviation”>abbr</abbr> は文章の中にある <abbr> タグの例です。


Strong タグ
このタグは太字テキストを表しています。

記述例：このタグは<strong>太字</strong>テキストを表しています。