見出しの先頭にランキング用などのアイコンを表示させる方法

タイトルや見出しにアイコンを設置する方法

ランキングサイトなどでよく使っている「1位」とか「2位」とかのアイコンをタイトルや見出しの先頭に設置する方法を書いてみます。

↓こんな感じのやつ。
タイトルや見出しにアイコンを設置する方法-13

ちゃんと自分で変更や調整などもできるようにできるだけ詳しく書きたいのでちょっと長くなるかも。

もちろんランキング用だけでなくて好きな素材使ってもらってOKですし、見出しとかでなくても好きな場所の装飾に使えます。

タイトルや見出しにアイコンを設置する手順

先に手順です。

  • 素材を探してダウンロード
  • 素材の加工、サイズ変更など
  • 装飾用のCSSを追加
  • 設置したい場所にコード設置

という感じです。

素材を探す

まずは先に素材を探します。今回はランキング用のフリー素材をこちらのサイトから使わせて頂きました。

http://ranking-osusume.com/

使いたい画像素材をダウンロードしてみました。

タイトルや見出しにアイコンを設置する方法-1

ダウンロードしたフォルダを開いて、使いたいものをピックアップしておきます。

タイトルや見出しにアイコンを設置する方法-2

画像の加工やサイズ変更

使いたい画像の加工やサイズ変更などをしてからアップロードしたいのですが、どんなサイズを使ったらいいか?って一度やってみないと分からないと思いますので、今回はサイズ変更などはせずにサイズだけ調べておきます。

ピックアップした画像を1つペイントで開いて、「サイズ変更」⇒「ピクセル」でサイズが分かります。後からアイコンのサイズを変更したい時はここで変更できます。

タイトルや見出しにアイコンを設置する方法-9

画像のサイズは「横165px 縦102px」でした。今回はサイズ変更せずにこれでアップロードします。

使いたいアイコンや画像をアップロード。

タイトルや見出しにアイコンを設置する方法-3

装飾用のCSSを追加する

画像のアップロードが済んだら装飾用のCSSを追加していきます。

その前にアップロードしたアイコンのそれぞれのURLをメモっておく必要があるので、メディアライブラリ(WordPressの場合)へ行き、アップロードした画像を1つ1つクリック(もしくは編集)。

タイトルや見出しにアイコンを設置する方法-4

1つ1つクリックすると画像のURLが出てきますので、それをメモ帳などにコピペしておきます。

こんな感じでメモ帳にコピペ。

タイトルや見出しにアイコンを設置する方法-6

それではCSSを追加していきます。後で解説入れます。

子テーマのスタイルシート(CSS)の一番下でOKなので以下を追加。途中で画像のURL入れる所があります。

コードの説明

ちょっと補足の説明していきます。

まずこの部分ですが、アイコンと一緒に表示する文字の大きさや位置の調整です。

アイコンが入る分、横に並ぶテキストをずらす必用がありますよね。ずらさないとアイコンと文字が重なってしまいます

タイトルや見出しにアイコンを設置する方法-14

という事で重要なのがpaddingの部分です。4つの数字がありますが、時計回りに「上、右、下、左」の順番で余白をあける事ができます

今回アイコンのサイズが「横165px 縦102px」だったので、このアイコンが入るスペースを確保する必要があります。

  • 縦が102pxなので上下51pxずつ余白(合わせて102px)
  • 横が165pxなので余裕をもって195px余白をつくりました

ということで「padding: 51px 0px 51px 195px」となってます。ボタンのサイズを変更したらここも変更が変更になります

「1位の画像のURL」となっている部分には先程メモ帳にコピペしたそれぞれの画像のURLを入れます(1位~3位それぞれ)。

「background-position」はアイコンの位置調整です。「background-position: left center;」でアイコンを左の中央に配置してます。

CSS追加できたら保存を忘れずに。

設置したい場所にコードを設置

記事投稿画面。テキストエディタで、ランキングの見出しを表示させてみます。

今回1位、2位、3位というアイコンをそれぞれ「.rank1」「.rank2」「.rank3」という名前でCSSを書きましたのでこの名前を入れていきます。

記事投稿ページ。以下を入れてみます(テキストエディタ)。

見出しタグとかで使う場合はdivの部分を「h2」「/h2」とか「h3」「/h3」に変更してもOK。

一旦保存して表示させたらこんな感じ。今回画像がちょっと大きかったのでテキスト部分とのバランスがちょっと微妙ですね(笑)

タイトルや見出しにアイコンを設置する方法-10

画像が大きすぎたので再度ダウンロードした素材をペイントでサイズ変更してみました。

タイトルや見出しにアイコンを設置する方法-11

サイズ変更したら再度アップロード。CSSに追加した画像のURLと余白を作ったpaddingを調整。テキスト部分の文字も少し大きめに設定しました。

最終的にこんなバランスになりました。

タイトルや見出しにアイコンを設置する方法-12

こんな感じで画像などを替えても色々できます。

ちなみに別サイトで使っているランキングはこんな感じ。

タイトルや見出しにアイコンを設置する方法-13

まとめ

最初はアイコン画像のサイズ合わすのが結構大変ですが、一度使えるサイズが分かればどんどん追加して行けますし、一度作ってしまえばいつでも呼び出して使えます。

特にWordPressであればよく使うタグを登録しておくプラグイン「AddQuicktag」などを使えるのですごく楽です。

最終更新日:2017/12/13

WordPressの始め方
 にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA