アフィンガー5(WING)

アフィンガー5【ランキング】目次に出ないようカスタマイズ

投稿日:2018年12月3日 更新日:

アフィンガー5ランキング

アフィンガー5にはランキング見出しが簡単に設置できるボタンがあります!

ポチっと押して文字を入力&★必要ならつけるだけ♪(ショートコードタイプ)

affinger5ランキングボタン

ランキング

とっても便利なのですが・・・

toc+で目次を自動表示しているとランキングが目次に表示されてしまうのです

affinger5ランキング目次に表示されてしまう

目次を表示している記事でランキングを使いたいなぁ
アルパカ
フクロウ
同じ気持ちの方がいたら

参考にしてほー

Sponsored Link

ランキング画像と文字を組み合わせる

どうしてもやりたかったので、画像と文字を横並びにすることにしました

 

商用可フリーアイコンを用意する

アフィンガー5のランキング画像をスクリーンショットしても良いのですが、背景が透明なPNG画像のほうが使い勝手良いと判断

ICOOON MONOさん

icoon mono

 

検索窓に「ランキング」と入力し、検索結果から好きなものをクリックします

icooonmono ランキング

 

  1. サイズを選びます【今回は48px】
  2. 色を選びます【クリックするとカラーを選べます】
  3. ダウンロードします【背景が透明なPNG画像でダウンロードします】

サイズ、色、DL

 

画像をアップロードし文字と並べる

メディアでアップロードします

記事で画像と文字を並べるとこんな感じ

ゴージャスな王冠の無料アイコン

ランキング

 

文字を大きくしても均等にならないです

 

テキストエディタにコピペし、画像URLや文字大きさを指定してみます

<p><img class="alignleft size-full wp-image-992" style="vertical-align: top;" src="■画像URL■" alt="crown" width="48" height="48" /></p>
<p><span style="display: inline-block; line-height: 48px; font-size: 200%;">■文字■</span></p>

crown

ランキング

class="alignleft size-full wp-image-992"

の部分はメディアを追加すると勝手に入ります

文字を<span style="display: inline-block; line-height: 48px; font-size: 200%;">■文字■</span>のように囲みます

 

まとめ

アフィンガー5はやりたいことがほとんどボタンひとつで叶います

記事をたくさん書くには最高のテーマです

 

どうしてもやりたいことが出てくる時があるので、少々面倒ですが、画像と文字を並べたい時にぜひ参考になさってください♪

ワードプレステンプレート「AFFINGER5

AFFINGER5

crown

イチオシ「ムームードメイン」

もっと詳しく公式サイトへ

crown

イチオシ「エックスサーバー」

                               ↑ ↑ ↑

「記事へ」「公式サイトへ」ボタンはそれぞれクリックできます♪

エックスサーバーの記事はこちらをクリック エックスサーバー公式サイトはこちらをクリック

Sponsored Link
Sponsored Link

-アフィンガー5(WING)
-, , ,

Copyright© あふぃたす , 2020 All Rights Reserved.