AFFINGERの使い方 WordPressの設定

AFFINGER自動カウント機能の使い方。番号付与がガチで捗る

前ページまででAFFINGER(WING)の自動カウント機能の使い方についてご紹介しました。

 

が、「番号付きリスト」との違いがイマイチ分からなかったと思います。

 

本ページでは「自動カウント機能」と「番号付きリスト」の機能性の違いについて説明していきます。

自動カウント機能と番号付きリストの違い

自動カウント機能と番号付きリストの違いは大きく分けて3つあります。

  1. ナンバリングサイズがデカイ
  2. 行を飛ばしたナンバリングが可能
  3. ナンバリング後に見出しが付与出来る

個人的に特に恩恵に授かったのは2番目です。

 

具体的に紹介いたします。

ナンバリングサイズが大きくなる

自動カウントを使うと、ナンバリング値のサイズがデカイんです。

 

CSSを見れば分かるのですがそれぞれのフォントサイズは

  • 番号付きリスト:デフォ(18px)
  • 自動カウント:150%

なんですね。

.st-count::before {
content: counter(stcnt)". ";
font-size:150%;
}

横に並べてみると大きさの違いは一目瞭然。

番号月付きリスト

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

自動カウント

1. あいうえお

2. かきくけこ

3. さしすせそ

アヒルン
アヒルン

自動カウントの方がデカくて見やすいね!

作業順などを掲載する記事では特に見出しの番号は大きい方が分かりやすいですよね。

 

自動で大きく表示されるので調整する手間が省けてとても便利です。

行を飛ばしてナンバリング出来る

番号付きリストでは行毎に必ず番号が振られてしまいます。

affinger,自動カウント,使い方

 

一応「Shiftキー押しながら改行」で連番解除が出来るのですが、正直とってもとっても面倒なんですよね。

 

しかし自動カウントなら、直感的に行を飛ばして番号を振ることが可能です。

affinger,自動カウント,使い方

affinger,自動カウント,使い方

単純に「行を飛ばして自動カウントされた番号を振るだけ」という機能なのですが、何度も同じ操作をしなくて済むので地味に効いてきます。

 

特にナンバリング後に説明を記入する際は必須の機能とも言えます。はい捗ります。

oyakun
個人的にこれが一番嬉しかったポイントです。

ナンバリング後に見出しが付与出来る

番号付きリストでも後から見出し付与は出来るのですが、番号だけ左側に飛び出してしまいます。

affinger,自動カウント,使い方

 

しかし自動カウント後であれば見出しの中に番号が収まります

affinger,自動カウント,使い方

 

ちょっと細かい部分ですが僕は本機能を見出しに使うことが多いので、この辺もかなり嬉しい仕様です。

番外編:自動カウント機能なら番号に色付け出来る

ちょっとご紹介しようか迷ったのですが、テキストカラーを変更することで数字の色も変更されます。

番号付きリスト

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

自動カウント機能

あいうえお

かきくけこ

さしすせそ

 

ナンバリングの目立たせたい項目に使えそうですね。

アヒルン
アヒルン

自動カウント付与の機能・・す、すげえ

ただ幾つか使いづらかった部分もあります。

 

自動カウント機能の使いづらかったところ

そんな自動カウント機能の使いづらかった箇所は主に2つ。

 

  1. 行ごとに選択して設定する必要がある点。
  2. ナンバリングが続いてしまう点。

 

この2点は機能特有の問題だと思います。

 

自動カウント機能・使いづらい点の解決策

行ごとに選択・設定する必要がある問題

これは一度に複数行を選択>「CT」をクリックすると、1つの行としてナンバリングされてしまう問題です。

affinger,自動カウント,使い方

例えば10行にカウント数を付与する場合、「一行選択 > CTをクリック」を10回行わなければなりません。

アヒルン
アヒルン

う”え〜そりゃ手間がかかるで・・

この問題の解決策

そこで裏ワザ。(という程でもないですが・・)

 

まず番号付与したい行全体を選択します。

affinger,自動カウント,使い方

次に「CT」をクリックして1行にまとめます。

affinger,自動カウント,使い方

改行したい箇所にポインタを置いて「Enter」を押すと・・

affinger,自動カウント,使い方

テキストの先頭に番号が付与されました。

affinger,自動カウント,使い方

 

一連の流れ↓

affinger,自動カウント,使い方

アヒルン
アヒルン

おお!この方法なら1行ごとに選択+CTクリックしなくて済むね!

選択した箇所全体にEnter改行だけで番号が振れるようになるので、とっても楽ちんです。

 

ぜひお試し下さい。

ナンバリングが続いてしまう問題

自動カウントの特性上、段落が変わっても"前の数字+1"で番号付与されてしまいます

affinger,自動カウント,使い方

アヒルン
アヒルン

こ、これは致命的・・

同じ記事の中で「新しく1〜自動カウントさせる」場合は、自動カウント設定前に「リセット」をする必要があります

この問題の解決策

解決策として既にステ子様からご案内があるのですが、

テキストエディタにタグ打ちするのはちょっと面倒なので(オイ)、プラグインAddQuicktagに紹介されているコードを登録して使います。

カウントリセットするコード

<div class="st-count-reset"> //<=開始タグ
</div> //<=終了タグ

AddQuicktagへカウントリセットを登録する


プラグインAddQuicktagが導入されている前提です。

「ダッシュボード > 設定 > AddQuicktag」をクリック。

affinger,自動カウント,使い方

開始タグと終了タグに各CSSをコピペ(ボタン名も入力)して、

affinger,自動カウント,使い方

<div class="st-count-reset"> //<=開始タグ
</div> //<=終了タグ

変更を保存をクリックすれば・・

affinger,自動カウント,使い方

Quicktags(ビジュアルエディタ)のプルダウンに「カウントリセット」が追加されます。

affinger,自動カウント,使い方

カウントリセットの使い方

「テキストエディタ」画面にして、

affinger,自動カウント,使い方

リセットしたい範囲を選択。

affinger,自動カウント,使い方

AddQuicktagに登録した「カウントリセット」をクリック。

affinger,自動カウント,使い方

選択した範囲の開始・終了箇所にリセットタグが挿入されます。

affinger,自動カウント,使い方

ビジュアルエディタに移ると、選択した範囲の番号がリセットされていることが確認できました。

affinger,自動カウント,使い方🔽

ちょっと分かりづらいのですが一連の流れ↓

affinger,自動カウント,使い方

プレビューで確認。きちんとリセットが反映されてますね。

affinger,自動カウント,使い方

注意!
” ビジュアルエディタからリセット ”も出来ますが、改行がおかしくなるので” テキストエディタからリセット ”することをススメします。
アヒルン
アヒルン

これなら同じ記事の中でも上手くリセット出来そうだね!

先にリセット設定しておくと本当に本当に便利です。こちらもぜひお試しください。

 

アヒルン
アヒルン

あれだね。設定必須なやつだね。

うちゅうじん
うちゅうじん

そう、全ては決まっている。必然なのだよ。

アヒルン
アヒルン

(なに言ってんだこいつ・・)

 

改造CSSボタンをアニメーション!CSShakeなら簡単にカスタマイズ出来るよ!

まとめ

AFFINGER(WING)の自動カウント機能、上手く使えそうでしょうか?

 

手前味噌ではありますが「○○の使い方」や「○○の設定方法」「○○の書き方」などの手順番号必須な記事で、大活躍しそうな機能です。

 

自動カウント機能、使ったことがない方はぜひぜひ一度お試しください\(^o^)/

OYAKUN
OYAKUN
テーマの既存機能を使いこなせば、より執筆に集中出来ますよ♪

参照必須 AFFINGERでバナーを作成する方法が簡単過ぎて泣ける

オススメ記事WordPressが重い!プラグインを見直すだけで表示速度が4倍に?

  • この記事を書いた人
  • 最新記事
OYAKUN

OYAKUN

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

© 2020 OYAKUDACHI.XYZ