【初心者向け】プラグイン(AddQuicktag)で使える簡単タグ設定

ブログ

こんにちは、(@k_r001)です。

怠け者ブロガー「ブログを書くのにタグ設定ってどうやってやってるのかな?いい設定とかないかな〜」

今回こういったタグの使い方がいまいち分かってない方に向けて書いています。

ぼくが実際に使っているタグのファイルは、こちらからダウンロードしてください
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

実際の使い方は、下記で確認できます。

この記事の目次

AddQuicktagの利点

good
「AddQuicktag」は、ブログの記事を書く時に使うタグ

このタグの設定をできます。

タグは初期設定のままだと、かなり使いづらいと思います。

それを日本語表記にすることで、使いやすくすることができます。
AddQuicktag設定
赤枠で囲んだところを変更記入しましょう!

AddQuicktag設定
ぼくの設定は、こんな感じです。

実際のタグ設定について説明します。

link

AddQuicktag設定2
「link」は、内部リンク、外部リンクを貼り付けるのに使います。

外部リンクの場合は、「リンクを新しいタブで開く」にチェックを入れましょう。

そうすることで、サイトの離脱率を下げることができます。

リスト

リストには、順番を有、無しの二種類あります。

<ul>リスト</ul>

  • <ul>リスト</ul>
  • <li>リスト項目</li>
  • <ol>リスト順番有</ol>

<ol>リスト順番有</ol>

  1. <ul>リスト</ul>
  2. <li>リスト項目</li>
  3. <ol>リスト順番有</ol>

リストの使い方は、リストで囲みたい文字列を<li>リスト項目</li>で囲みます。

そのリスト項目を、

<ul>リスト</ul>
<ol>リスト順番有</ol>

のどちらかで囲みます。

見え方は、上記リストで確認してください。

チェック

チェックの見え方

チェック

↑こんな感じです。

↓執筆画面で確認するとこうなっています。

<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i> チェック</p>

マーカー

マーカーは、下記コードを「style.css」に追加します。

.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}

マーカー
見え方は、こんな感じです。

↓記事内ではこういう風に見えています。

<span class=”marker”>マーカー</span>

太字

太字の違いはこんな感じです。

  • 太字←デフォルト
  • 太字←太字

↓中からはこう見えています。

<span class=”bold”>太字</span>

見出し

見出しは、「h2」,「h3」があります。

他にも4,5,6とあるんですが、主に使うのはこの二つです。

見出し区分はこんな感じです。

  • h1→記事タイトル
  • h2→大見出し
  • h3→小見出し

↓見え方はこうなってます。
AddQuicktag見出し

見出しの下に画像がある場合は、画像有を使いましょう。

見出しと画像の感覚を調整するためにあります。

各見出しの内側からはこう見えてます。

  • h2→<h2>見出し</h2>
  • h3→<h3>見出し</h3>
  • h2(画像有)→<h2 class=”nmb”>見出し</h2>
  • h3(画像有)→<h3 class=”nmb”>見出し</h3>

縦長の画像だたりする場合画像と見出しが被る場合があるので、「class=”nmb”」を消しましょう。

吹出

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」

↓コードはこんな感じです。
AddQuicktag吹出
赤枠で囲われた部分を変更すると、各部分の変更ができます。

因みにこの吹出ですが、学さんのをそのまま使わせていただいてます。

引用

引用は、画像の文やTwitterのツイートを引用するときに使います。

引用

枠は、強調したい時に使うといいです。

↓こんな感じ

サンプル1サンプル2
サンプル3サンプル4

内側からは、こんな感じで見えています。
AddQuicktag表
赤枠で囲ったところが表の1枠です。

二重山括弧

←こんな記号です。

別ページへのリンクに使います。

二重山括弧ありとなしの違い

全然違いますよね。

proguramming

プログラミングコードを記事にしたい場合に使いましょう。

↓こんな感じ

.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}

↓内側からは、こう見えてます。

<pre><code class=”language-php”>.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}</code></pre>

Youtube

「Youtube」の動画をブログに貼り付ける場合は、このタグを使います。

動画を貼り付けるコードをこの「Youtube」タグで囲うことで、モバイルで見たときの動画が画面から切れなくなります。

まとめ

以上がぼくが設定して使っているタグ設定です。

プラグインの取得はこちらから
↓↓↓↓↓
AddQuicktag

自分で設定するのがだるいと思ってる方に、ぼくが実際に使っているタグの設定ファイルをプレゼントしてます。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ダウンロードして使ってみてください!

最後まで見ていただき、ありがとうございました。

ryublogに戻る

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

仕事依頼個人向け!Webサイト作成代行・今後のブログ運営方針相談、運用できるようになるまでサポートします!

公式LINE@


P.S.

スキル0・人脈0・知識0の会社員だったぼくが
自由な時間とお金、理想の人生を手に入れた
ネットビジネスの知識を凝縮した
りゅうのすけ公式のLINE@を始めました。

▼公式LINE@▼

ID:874bnbtx

毎日のようにラインで相談に乗っています。

気軽にメッセージください!

公式LINE@登録者限定!無料プレゼント

  1. 限定公開記事のパスワード配布
    • ブログ内での限定公開になっている記事のパスワードを配布してます。登録すれば即時受け取れます。
  2. 完全個別無料相談
    • これからネットで稼ぎたいという方に向けて、無料で相談を受け付けています。いつでもご相談ください!!!

※ワンクリックで登録可能

※個人情報はこちらからわからないようになっているのでご安心を