【一目瞭然】LION MEDIAのタグのデザインを一覧形式でチェックする!

【一目瞭然】LION MEDIAのタグのデザインを一覧形式でチェックする!

LION MEDIAのデフォルトのタグボタンを確認

タグボタン

Lion Mediaのデフォルトタグボタンのデザインを一覧で実際に使用してみた形で確認できるようにしました。
公式のほうでもガイドがありますが、僕のデザイン一覧ページはさらに初心者寄りに構成しました。
実際はほとんど自分用です。
※この記事を書いたからにはデフォルトで表示しております(見出し以外)

以下の目次からリファレンス代わりに使ってくださるとうれしいです。

LION MEDIAのタグ一覧

[b]ボタン

ボールド←太字になりました。

[i]ボタン

イタリック←斜めです

[link]ボタン

やるきだしたい

既存のコンテンツへリンク(ブログ内の記事へのリンク)

コード

<a href="https://yaruki-dasitai.com/">やるきだしたい</a>

<a href="https://yaruki-dasitai.com/2018/06/19/excel_komono01/">既存のコンテンツへリンク(ブログ内の記事へのリンク)</a>
リンクの色はカスタマイズの内容によって変わります

[b-quote]ボタン

引用符ボックス

引用符(いんようふ)は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす記号で、多くの場合一対で引用部分を囲む。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号ともいう。

[del]ボタン

取り消し線

[ins]ボタン

追記コメント

[img]ボタン

ライオン

コード

<img src="https://yaruki-dasitai.com/wp-content/uploads/2018/06/lion-3040797_960_720.jpg" alt="ライオン" />

[ul]と[li]ボタン

    ulリスト

  • 一番目
  • 二番目
  • 三番目
ulタグはliタグを項目として使います

コード

<ul>ulリスト
 	<li>一番目</li>
 	<li>二番目</li>
 	<li>三番目</li>
</ul>

[ol]と[li]ボタン

    olリスト

  1. 一番目
  2. 二番目
  3. 三番目
olタグも同様にliタグは項目です

コード

<ol>olリスト
 	<li>一番目</li>
 	<li>二番目</li>
 	<li>三番目</li>
</ol>

[code]と[pre]ボタン

インデントまでしっかり再現されますので便利です。
僕自身はprism系のプラグインでコードは表示しています。

 コード
for (var i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}
codeタグはpreタグで囲んで使います

コード

<pre><code> コード
for (var i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}
</code></pre>

[more]ボタン

続きを読む
トップページの一覧ページ上で画像の記事内容で、この下は表示されません。

moreタグの挙動を変えたい場合はソースをいじるか、プラグインを使いましょう。

[タグを閉じる]ボタン

ふさわしいタグでタグを閉じてくれます

[P]ボタン

段落を指定して、綺麗な文章に仕上げることができます。Pタグを有効に使うことが綺麗な記事をかくコツかもしれません。Pタグを使いこなすことは結果として、それはまさに綺麗な記事を書けるということなのかもしれません。

Pタグが実際にどんな挙動するかについてはHTMLリファレンスを参照しましょう

Pタグを使用せずにこのような無駄に長い、むしろ何が言いたいのかよくわからない文章を書いてしまっても実際にはPタグを使用しなくてもWordPressは賢いので、自動的にPタグで囲んでくれます。だから囲み忘れても安心です。というか僕は面倒なので囲んでないですが、明示的に囲んだほうがいいとかと思います。

Pタグを使用しなくても、自動的にPタグで囲んでくれるが、明示的にPタグを使ったほうがいいと思われます。

コード

<p>段落を指定して、綺麗な文章に仕上げることができます。Pタグを有効に使うことが綺麗な記事をかくコツかもしれません。Pタグを使いこなすことは結果として、それはまさに綺麗な記事を書けるということなのかもしれません。</p>
<p>Pタグが実際にどんな挙動するかについてはHTMLリファレンスを参照しましょう</p>

Pタグを使用せずにこのような無駄に長い、むしろ何が言いたいのかよくわからない文章を書いてしまっても実際には<span class="markerPink"><strong>Pタグを使用しなくてもWordPressは賢いので、自動的にPタグで囲んでくれます。</strong></span>だから囲み忘れても安心です。というか僕は面倒なので囲んでないですが、明示的に囲んだほうがいいとかと思います。

<div class="pointBox">Pタグを使用しなくても、自動的にPタグで囲んでくれるが、<span class="markerYellow">明示的にPタグを使ったほうがいいと思われます。</span></div>

[hr]ボタン

区切り線を表示します


区切り線は投稿欄いっぱいまで伸びています


[br]ボタン

改行一つ
改行二つ

改行三つ

改行終わり

brタグは連続で置いても想像するような効き方はしません。
Pタグを主に使ってPタグ内でどうしても改行したいときに
明示的に改行する時に使うといいと思いましたが、実際使わないと思います。

コード

改行一つ<br>
改行二つ<br><br>
改行三つ<br><br><br>
改行終わり

[BOX:枠線]ボタン

灰色の枠の塗りつぶしなしのボックスです。
ボックスで囲んで文章を独立させる時に便利です。

[BOX:二重線]ボタン

灰色の枠で二重線の塗りつぶしなしのボックスです。
ボックスで囲んで文章を独立させる時に便利です。

[BOX:背景]ボタン

灰色のボックスです。
ボックスで囲んで文章を独立させる時に便利です。

[BOX:ペーパー]ボタン

灰色のボックスです。紙がめくれたようなデザインです。
付箋のようにも見えます。

[BOX:太文字]ボタン

黒い太枠のボックスで塗りつぶしなしです。
まとめや強調したい内容を表示するときに便利です。

[BOX:括弧]ボタン

黒いカギ括弧で囲んでいます。一行の方が綺麗でしょうか。

[BOX:はてな]ボタン

疑問符のついた青いボックスです。とても使いやすそうですよね?

[BOX:ポイント]ボタン

注意を促すときに使える!びっくりマークがついた赤い見出しです。

[BOX:ポイント]ボタン

これがまさにポイントですよ!というときに使える!

[マーカー:イエロー]ボタン


黄色いマーカーがつくので僕のページのテーマにはよく合います。

[マーカー:ピンク]ボタン


ピンクのマーカーは明るい気分になるとともに注目も集めます。

[マーカー:ブルー]ボタン


青いマーカーは落ち着いた雰囲気で文章を強調したい時は使えそうです。

[注釈]ボタン


注釈は小さく目立たない文字で記述されます
便利なタグだと思います。

[目次]ボタン

おっとこんなところに目次が!!

デフォルトでは記事先頭の見出し直上に配置されます。目次ボタンで生成されるoutlineタグは複数使うと複数の目次を作れます。(ふつうはいらないですが…

[記事内広告]ボタン

Advertisement

広告を載せたい場所に配置するタグ

[h2,3,4,5]ボタン

大見出し(h2)

タイトルの次に偉い見出しです。
カスタマイズ内容によってそれぞれ違うと思いますが
一番よく使う見出しだと思います。

中見出し(h3)

縁の下の力持ち的存在ですかね。

小見出し(h4)

見出しを使うときはネストしすぎに注意ですね。
目次プラグインを使っている時は特定の見出しは除外してみたり、工夫すると目次も綺麗になります。

極小見出し(h5)

この見出しは好みだし使うぜYO~YO~
すみません・・・

まとめ

以上、LionMediaのデフォルトで用意してくれているタグについて説明しました。
リファレンス代わりに見ていただけると幸いです。

WordPressカテゴリの最新記事