WordPress

AFFINGER5(WING)の「ステップ」のアンダーラインを消しh2やh3できれいに表示したい!

投稿日:2018年7月2日 更新日:

AFFINGER5(WING)ver20180613では「ステップ」というタグが新たに追加されました。順を追って説明したいとき見出しとして使用するととてもわかりやすくなる便利な機能です。

しかしこの「ステップ」は単なるタグの設定ではSUGOI MOKUJI(すごいもくじ)に反映されません。もしかしたらh5以降も目次に表示するように設定すればよいのかもしれませんが、そらよりブログの場合h2,h3,h4のみ設定しているのでそうなってしまいます。

 

「ステップ」をh3に設定すると

affinger5_step01

こうなってしまい、まことにお見苦しい。

h3の破線アンダーラインを表示しないよう設定すればよいかもしれませんが、それはそれでh3を単独で使用する際に塩梅がよろしくありません。

そこで「ステップ」にデフォルトで設定されているアンダーラインを削除することにしました。

タグはこちらになります。

このままコピーし子テーマのstyle.cssに挿入してください。

上記「line-height」は「ステップ」の文言とh3の破線アンダーラインの行間を極力狭めるために設定しました。たぶん14pxが最小値かと思われます。

なお14pxでは「ステップ」の文言が2行になると重なって表示されてしまいます。その点、ご留意ください。

 

ステップの設定

実際に「ステップ」を設定してみましょう。「ビジュアル」モードで説明します。

affinger5_step02

「ステップ」にしたい文言を選択します。

 

affinger5_step03

つぎに[1]「タグ」から[2]「デザイン」を選択し[3]「ステップ」を選びます。

affinger5_step04

すると指定した文言前後にタグが設定されました。タグ中「step_no="1"」の数字を変えることで、説明するステップの順番の表示を指定することができます。

 

さらにこれをh3に指定してみましょう。

affinger5_step05

文言を選択し、上部の「段落」からh3を指定します。

 

affinger5_step06

するとタグを含めた全体が「ビジュアル」モードでのh3の表示になりました。

 

実際の表示はどうなっているでしょう。style.cssを変更しているので以下のようになるはずです。

affinger5_step07

「ステップ」のアンダーラインが消え、すっきりしました。

 

またSUGOI MOKUJI(すごいもくじ)では以下のように表記されます。

affinger5_step08

 

大見出し(h2)のつぎの位置でステップを記述し、目次に組み込みたいとき、この方法が便利です。

もちろんこの「ステップ」をh2に使用し、目次のさらに上位に表示することもできます。たとえばこちらの記事でh2に設定した実際をご確認いただけます。

もしかしたらほかの方法があるのかもしれませんが、僕はとりあえずこれで問題を解決しました。よろしかったらぜひご活用ください。

 

こちらの記事もぜひご参考に

affinger5wing180613_07
AFFINGER5(WING)ver20180613以降の見出しフォントを細く!記事一覧抜粋文を小さく!

続きを見る

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.