STYLE GUIDE

見出し弐

見出し参

見出し四

<h2>見出し弐</h2>
    
<h3>見出し参</h3>
    
<h4>見出し四</h4>  

画像挿入

STYLE GUIDE

記事に横幅いっぱいで画像を入れる時の横幅は1000pxまたはそれ以上。挿入する時は「大」サイズを選ぶ事

<img src="https://uptools.jp/wp-content/uploads/2017/05/img_83991-820x546.jpg" alt="" width="820" height="546" class="alignnone size-large wp-image-3102" />

画像挿入(少し小さめ)

STYLE GUIDE

少し小さめで入れる時は800pxまたはそれ以上。挿入する時は「中」サイズを選ぶ事

<img src="https://uptools.jp/wp-content/uploads/2017/05/img_83991-670x446.jpg" alt="" width="670" height="446" class="alignnone size-medium wp-image-3102" />

画像挿入(キャプション付き)

STYLE GUIDE
キャプション付きだよ 大
STYLE GUIDE
キャプション付きだよ 中

キャプション付のサイズを選ぶ時は(キャプション)がついたものを選ぶ。画像選択画面にある「キャプション」の項目に文字を入れると自動で下記のようなコードが挿入される。

[caption id="attachment_8354" align="alignnone" width="813"]<img src="http://lavenir-beaute.kokoromi/wp-content/uploads/2018/12/2A50E028-2A82-467A-8C64-C87F4569595C-646x485.jpeg" alt="" width="646" height="485" class="alignnone size-medium wp-image-2577" /> キャプション付きだよ[/caption]

リスト

  • リスト項目 1
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4
<ul>
    <li>リスト項目 1</li>
    <li>リスト項目 2</li>
    <li>リスト項目 3</li>
    <li>リスト項目 4</li>
</ul>

リスト(番号)

  1. リスト項目 1
  2. リスト項目 2
  3. リスト項目 3
  4. リスト項目 4
<ol>
    <li>リスト項目 1</li>
    <li>リスト項目 2</li>
    <li>リスト項目 3</li>
    <li>リスト項目 4</li>
</ol>

Youtubeの埋め込み

https://www.youtube.com/watch?v=k1CS3lurFE4

Twitterの埋め込み

https://twitter.com/hikakin/status/1134027495546580992

2カラム表示

STYLE GUIDE
STYLE GUIDE

挿入する画像の横幅は他の画像と同じ(スマホやタブレットだと縦に並んで結局1カラムになるので)。また、上記は画像ですがテキストでもリストでもカラムには入れられる。

[colwrap]
[col2]<img src="/646x359.jpg" width="813" height="359" />[/col2]
[col2]<img src="/646x359.jpg" width="813" height="359" />[/col2]
[/colwrap]

3カラムの場合は

STYLE GUIDE
STYLE GUIDE
STYLE GUIDE
[colwrap]
[col3]<img src="/646x359.jpg" width="813" height="359" />[/col3]
[col3]<img src="/646x359.jpg" width="813" height="359" />[/col3]
[col3]<img src="/646x359.jpg" width="813" height="359" />[/col3]
[/colwrap]

補足説明

補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。
[aside type="normal"] 補足説明をいれる
 少し小さなフォントで少し目立つような補足説明を追加することができます。 [/aside]

注意書き

注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。
[aside type="warning"] 注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 [/aside]

引用 (Blockquote)

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

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

テーブル

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

定義リスト

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

pre (整形済みテキスト)

コードなどを載せる時に使う

<img src="example.jpg" alt="example" width="813" height="350" />

htmlタグを載せる時は、エンティティ化する。簡単な変換方法は記事にしてここにリンクする予定。

<pre> &lt;img src=&quot;example.jpg&quot; alt=&quot;example&quot; width=&quot;813&quot; height=&quot;350&quot; /&gt; </pre>

読んで頂きありがとうございます

もしこのブログを気に入って頂けましたら、購読していただけるとうれしいです!

★ いちばん新しい記事!

販売代理店制度 資料