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

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

↓こんな感じのやつ。

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

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

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

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

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

先に手順です。

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

という感じです。

素材を探す

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

【Webや印刷にオススメ】ランキング・王冠アイコン素材（無料・商用可）

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

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

画像の加工やサイズ変更

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

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

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

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

装飾用のCSSを追加する

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

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

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

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

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

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

.rank1, .rank2, .rank3 {
    font-size:18px;
    margin: 0;
    padding: 51px 0px 51px 195px;
    border-left: none;
    border-bottom: 0px;
}

.rank1 {
    background-image: url(1位の画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
}

.rank2 {
    background-image: url(2位の画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
}

.rank3 {
    background-image: url(3位の画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
}

コードの説明

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

.rank1, .rank2, .rank3 {
    font-size:18px;
    margin: 0;
    padding: 51px 0px 51px 195px;
    border-left: none;
    border-bottom: 0px;
}

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

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

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

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

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

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

.rank1 {
    background-image: url(1位の画像のURL);
    background-repeat: no-repeat;
    background-position: left center;
}

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

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

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

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

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

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

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

<div class="rank1">表示させたいテキスト</div>

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

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

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

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

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

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

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

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

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

【図解】WordPressブログの始め方まとめ

独自ドメインの取得方法、WordPressを始めるためのおすすめのレンタルサーバ...