読みやすくする

　ブログ記事を書く際に、文字だけではなく、「見出し」や「タブ」などを使用することができます。

　特にスマログDXでは気にしなくても良いのですが、もし筆者自身がより見やすい文章にしたい場合は、この記事を見ながら、それらを使ってみてください。

　基本的には、「見出し」だけで十分だと思います。

見出しの使い方

大見出し（h2）

• ↑これです（<h2>大見出し（h2）</h2>」と書いています）
• <h2>と、</h2>で囲まれている範囲が、大見出しとなります
• 後述する「タブ（タイプ2）」の中では使えません

中見出し（h3）

• ↑これです（<h3>中見出し（h3）</h3>」と書いています）
• <h3>と、</h3>で囲まれている範囲が、中見出しとなります
• 後述する「タブ（タイプ2）」の中では使えません

小見出し（h4）

• ↑これです（<h4>小見出し（h4）</h4>」と書いています）
• <h4>と、</h4>で囲まれている範囲が、小見出しとなります
• 「タブ（タイプ2）」の中でも使えます

　
　

文字の装飾

• 「見出し」のようなものは「タグ」と言われます。
  <>からで囲まれている範囲の文字に適応され、<>の中にある文字で機能が変わります。
  見出し以外にもいくつかあります。
• 普通の文字修飾タグは、文章記入欄の上のところで簡単に使用できます。
  （b・i・link・b-quote・del・imgなどが並んでいます）
• そのままクリックすると、閉じ（）のない、タグの開始のみ自動的に書いてくれます。
  もう一度押すと、閉じが挿入されます。
• もしくは、文字修飾したい範囲をドラッグした状態で、使いたい文字修飾のボタンをクリックすると、ドラッグした前後に閉じも含めてタグを挿入してくれます。

主に使用する例

• b（strong）タグでは、<b>太字にすることができます</b>。
• i（em）タグでは、<i>斜体にすることができます</i>。
• b-quoteタグでは、
  

  選択した範囲をどこかからの引用した部分であることを示すことができます。
  別に引用だけでなくてもいいんですけれど。

• a タグでは、その文字にリンクを貼ることが出来ます。（ex.トップページへのリンク）
• del タグでは、<del>その文字に打ち消し線が引かれます</>。
• u（ins）タグでは、 <u>その文字に下線が引かれます</u>。
• img タグでは、画像を貼り付けることができます。
• ul・li タグでは、ちょうどこの説明で使っているように、箇条書きを作成できます。
  ul タグ自体には何かをする具体的な機能はないのですが、li タグを使う部分は、<ul>と</ul>で囲まれいている必要があります。

  <ul>
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
  </ul>

  みたいに使います。

• などなど。強調したい部分やリンクをはったりしたいときにタグは自由に使ってください。
  ただし、閉じ忘れの内容にご注意ください。
  レイアウトがおかしくなったら大抵それが原因です。

トグルの使い方

記述例

[toggle title="トグルタイトル"]
トグルの内容
[/toggle]

実行例

こちらはタイトルの被りを気にする必要はありません。
　

タブ（タイプ1・推奨）の使い方

複数の項目をまとめて、タブで表示を切り替えることができます。

タイプ2との違い

• それぞれのタブを一纏めにしてグループ化・名前をつける「[tabs id="タブグループ名"]～[/tabs]」で囲む必要があります（タブグループ名は不可視なものなので、被らないようなIDを適当でいいので設定してください）。しかしそのお陰で、このタイプのタブの中に更にこのタイプのタブを作成することができます（タイプ1のタブでは二重のタブを作成できません）。
• 1つ目のタブは、[tab title="タブ名"]から始めます。
  それ以降に、1つ目のタブを選択したときの内容を記述します。最後に「[/tab]」で閉じます。
• 2つ目以降のタブも、1つ目のタブと同様、[tab title="タブ名"]～内容～[/tab]を使います。
• タイプ1では使えなかった、h1～h3タグが使えます

記述例

[tabs id="タブグループ名"]
[tab title="タブ1"]
タブ1の内容。
2行目
3行目
[/tab]

[tab title="タブ2"]
<h2>h2タグ</h2>
[toggle title="トグル・タイトル"]
トグルの内容が展開されました
[/toggle]
[/tab]

[tab title="タブ3"]
<h3>h3タグ</h3>
タブ3の内容（最後）
[/tab]
[/tabs]

実行例

タブ（タイプ2）の使い方

• 1つ目のタブは、{tab=1つ目のタブの名前}から始めます。
  それ以降に、1つ目のタブを開いているときに表示する内容を記述します。
• 2つ目以降のタブも、続けて、{tab=2つ目のタブの名前}と書き、それ以降に、1つ目のタブを開いているときに表示する内容を記述します。
• 全てのタブの一番最後に、{/tabs}と記述してください。これでタブが終了します。閉じるときはtabではなく、tabsです。

記述例

{tab=タブ1}
タブ1の内容。
2行目
3行目

{tab=タブ2}
タブ2の内容。
<h4>中で小見出し（h4）が使えます</h4>
スライドも使えますよ。

{slide=テスト}
スライド「テスト」
の内容が展開
されました。
{/slide}

{tab=タブ3}
タブ3の内容（最後）

{/tabs}

実行例

画像のアップロード・貼り付け方

　記事タイトルと、記事の内容の入力欄の間に「メディアを追加」というボタンがあります。
　これをクリックして表示される窓の「ファイルをアップロード」タブからアップロードしたい画像を選択すると、「メディアライブラリ」タブの中の左上に追加されます。
　貼り付ける場合は、それをクリックし、「添付ファイルの表示設定」を必要に応じて変更し、「固定/投稿ページに挿入」をクリックすると、自動的にIMGタグを生成し、貼り付けてくれます。

　複数の画像を一気に貼り付ける場合は、Ctrlキーをクリックしながら画像を選択します。
　貼り付けられるIMGタグの順番はクリックした順番通りですが、ポップアップしている窓の一番下の「＊点を選択済」のところの小さい画像をドラッグアンドドロップすれば順番を入れ替えられます。

ツイート