2017.12.13ランキングサイトなどでよく使っている「1位」とか「2位」とかのアイコンをタイトルや見出しの先頭に設置する方法を書いてみます。自分で変更や調整などもできるようにできるだけ詳しく書きたいのでちょっと長くなるかも。ランキング用だけでなくて好きな素材使ってもらってOKですし、見出しとかでなくても好きな場所の装飾に使えます。設置したい場所にコード設置という感じです。素材を探すまずは先に素材を探します。今回はランキング用のフリー素材をこちらのサイトから使わせて頂きました。【Webや印刷にオススメ】ランキング・王冠アイコン素材(無料・商用可)ranking-osusume.com使いたい画像素材をダウンロードしてみました。ダウンロードしたフォルダを開いて、使いたいものをピックアップしておきます。使いたい画像の加工やサイズ変更などをしてからアップロードしたいのですが、どんなサイズを使ったらいいか?って一度やってみないと分からないと思いますので、今回はサイズ変更などはせずにサイズだけ調べておきます。ピックアップした画像を1つペイントで開いて、「サイズ変更」⇒「ピクセル」でサイズが分かります。後からアイコンのサイズを変更したい時はここで変更できます。縦102px」でした。今回はサイズ変更せずにこれでアップロードします。使いたいアイコンや画像をアップロード。装飾用のCSSを追加する画像のアップロードが済んだら装飾用のCSSを追加していきます。その前にアップロードしたアイコンのそれぞれのURLをメモっておく必要があるので、メディアライブラリ(WordPressの場合)へ行き、アップロードした画像を1つ1つクリック(もしくは編集)。1つ1つクリックすると画像のURLが出てきますので、それをメモ帳などにコピペしておきます。こんな感じでメモ帳にコピペ。それではCSSを追加していきます。子テーマのスタイルシート(CSS)の一番下でOKなので以下を追加。途中で画像のURL入れる所があります。center;}コードの説明ちょっと補足の説明していきます。0px;}まずこの部分ですが、アイコンと一緒に表示する文字の大きさや位置の調整です。アイコンが入る分、横に並ぶテキストをずらす必用がありますよね。ずらさないとアイコンと文字が重なってしまいます。いう事で重要なのがpaddingの部分です。順番で余白をあける事ができます。縦102px」だったので、このアイコンが入るスペースを確保する必要があります。195px」となってます。ボタンのサイズを変更したらここも変更が変更になります。center;}「1位の画像のURL」となっている部分には先程メモ帳にコピペしたそれぞれの画像のURLを入れます(1位~3位それぞれ)。「background-position」はアイコンの位置調整です。center;」でアイコンを左の中央に配置してます。CSS追加できたら保存を忘れずに。テキストエディタで、ランキングの見出しを表示させてみます。今回1位、2位、3位というアイコンをそれぞれ「.rank1」「.rank2」「.rank3」という名前でCSSを書きましたのでこの名前を入れていきます。以下を入れてみます(テキストエディタ)。class="rank1">表示させたいテキスト</div>見出しタグとかで使う場合はdivの部分を「h2」「/h2」とか「h3」「/h3」に変更してもOK。保存して表示させたらこんな感じ。今回画像がちょっと大きかったのでテキスト部分とのバランスがちょっと微妙ですね(笑)画像が大きすぎたので再度ダウンロードした素材をペイントでサイズ変更してみました。サイズ変更したら再度アップロード。CSSに追加した画像のURLと余白を作ったpaddingを調整。テキスト部分の文字も少し大きめに設定しました。最終的にこんなバランスになりました。こんな感じで画像などを替えても色々できます。ちなみに別サイトで使っているランキングはこんな感じ。まとめ最初はアイコン画像のサイズ合わすのが結構大変ですが、一度使えるサイズが分かればどんどん追加して行けますし、一度作ってしまえばいつでも呼び出して使えます。WordPressであればよく使うタグを登録しておくプラグイン「AddQuicktag」などを使えるのですごく楽です。アフィリエイトの始め方と稼ぐ方法のまとめアフィリエイトの始め方や基礎的な知識、具体的な手法などアフィリエイトで稼ぐ方法まとめページです。2013年よりアフィリエイトをスタートして頂いたコメント...affiliate150.com2020.02.03スポンサーリンクスポンサーリンクサイト作成に役立つツール・素材・HTML・CSSシェアするTwitter1Facebook5はてブ1Pocket4LINEコピーサイトのアクセスアップや稼ぐためにおすすめの無料レポート個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。ブロガーの電子書籍「自由な人生を手に入れる教科書」しげぞうアフィリエイトで稼ぐ方法を全部話そうと思うWordPressでふい字を使う方法と手順【図解】サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめコメントありがとうございます。