Iine!

1いいねボタンを設置したい場所に独自タグ#iine#を書く

2【いいねボタンレイアウト】を編集する

CSSで画像・Webフォントを使うときは

1画像とデザインの著作権表示不要

この『いいねボタン配布処』で使用している管理人制作の画像およびデザインをご利用の際には、制作者の名前とHPアドレスの記載は必要ありません。
また、画像の加工・デザインの改変・再配布・テンプレと同梱しての再配布も自由に行えます。
要するに、煮るな焼くなと好きにしてください。
ただし改変・再配布によって生じたあらゆるものに対し管理人しちは責任を負いません。
使用画像の変更・テンプレとの併用に関しては以下に詳細をば。

※使用画像について

ここで公開しているCSSには、【素材を探す】にて公開している管理人制作の画像を使っています。
【素材を探す】の素材URLで貼り込んでおりますのでそのままでも画像は表示できますが、素材をダウンロードしてご自分のサイトIDで画像アップローダーに入れておいた方が確実です。
CSSに『heart image1』と書いてある行が画像です。『１』が通常時の画像、『２』がオンマウス・タップ時の画像です。
画像アップローダーに入れたらCSSの当該行のURLを/data/サイトID/img/サイトID_upld_数字.pngに書き換えてご利用ください。

!使用画像を変更する場合

（１）管理人制作の他の画像に変更する
「著作権表示不要」「再配布可」と書いてある素材のみ、上述の通り自由にご利用いただけます。
ただしサイト内の素材すべてが再配布可素材ではありませんので、ご確認の上ご使用ください。

（２）異なる配布元の画像に変更する
当サイトの配布素材と異なる画像に変更した場合は、必ずその配布元さんの規約に則って画像を使用してください。著作権表示や再配布の規約に関しては特によくご確認いただきますよう、よろしくお願いいたします。
当デザインとしては画像の併用可としておりますが、これも必ず併用する配布元さんの規約に則って使用してください。

!テンプレと併用したい

（１）制作したテンプレに使いたい・配布したい
当デザインのいいねボタンを使ってテンプレを作り、それを配布するのはOKです。
その際、ボタンのデザイン者に関する記述もなくて結構です。
ご利用報告も義務づけておりません。ですがもし「使うよ！」と一言頂けたら管理人は大変に喜びます。よろしければエサをください。

（２）他配布元のテンプレと併用したい
当サイトとは別の配布元さんのテンプレと併用する際は、必ず配布元さんの規約に則って使用してください。
当デザインとしては、他配布元さんのテンプレとの併用を可としております。
ただしテンプレとの併用の際は、テンプレのCSSがボタンのCSSに影響してデザインが崩れるということもあり得ますので、ご了承ください。
一応他のCSSの影響を受けないようリセットCSSを仕込んだりしておりますので、恐らくデザイン崩れはあまり起こらないと思います……。（そのせいでやたらCSSが長いです）

2基本的にスマホ向けのデザイン

サイトのINFO（→『対象とするユーザー層』）にも記載していますが、CSS3を使う関係上、スマートフォン向けのデザインになっています。
パソコンに関しては、IE9などの古いブラウザでは機能しないプロパティ（text-shadowなど）を使っております。
IE9以下ともなると、社内PCでもなければもうそろそろ使っている人はかなり少数なので……。

フィーチャーフォンに関しては、２０１５年以降発売のモデルの場合は見た目ガラケーでも内部的にスマホという機種もあります。（※注１）
内部的にもフィーチャーフォン、すなわち“真のガラケー”に関しては今回ほぼデザイン性の追求を放棄しています。
ガラケーですとボタンのデザインがほぼ弄れないため、諦める他ないという事情もあります。
かつ、そもそもこのいいねボタン機能自体が「ガラケーではご利用いただけません」とあるので、かなり比重が少なくなりました。管理人の中で……。
デザイン性を追求していない（できない）だけでガラケーでも不具合はないはずですが、全く保証はできませんのでその旨ご了承の上でご利用ください。

※このデザインについて

1使用画像

heart image1
heart image2
共に80px×80pxの画像です。これをCSSで20px×20pxに縮小して使っています。
←上のを20pxに縮小するとこう。
最近のスマホの解像度を考えると３倍の大きさで作っていても画像がぼやける機種もありそうですが……。

2文字の縁取り

text-shadowで縁取りをしています。ゆえに数字によっては縁取りが甘いです。
文字が小さいせいで縁取り方法が他になかったんですが、よく見ると粗があります。
使用の際はその点ご了承ください。

※このデザインについて

!文字の縁取り無くしました

text-shadowでの縁取りを無くしました。なのでどのブラウザから見ても数字部分の表示は同じようになります。
桁が増えると背景のハートから数字がはみ出しますので、color（文字色）を変更する際は、ハートの色（黒：#2a2a2a／ピンク：#ff5555）と背景の色（この場合は“白”）どちらの上に来ても可読性を確保できる色にしてください。

※このデザインについて

!使用画像

heart image1
heart image2
ハートの色が強すぎて文字色の制限が多かったので、灰色作りました。
これくらいの色なら数字の文字色を変えるだけでも印象が変わる気がします。

※このデザインについて

!使用画像

heart image1
画像は変化無しで文字色のみhoverで変わります。
各font color行を変更するだけで印象が大きく変わるタイプです。

※このデザインについて

!使用画像

　heart image1
画像は変化無しで文字色のみhoverで変わります。
濃い背景用の白ハートです。
※いいねボタン自体には背景色を設定していません。ボタンを設置する場所の背景色に合わせてお使いください。
なお白ハートのバリエーションは↓
全て正方形画像で、小さい方から２０px、４０px、８０pxです。
【素材を探す】にも公開していますが、白いせいで見えないのでここに置いておきます……。

※このデザインについて

!細い背景つけました

一つ目のいいねボタンとほぼ同一デザインですが、後ろに灰色背景をつけたので白い数字が見やすくなりました。
作っといてなんですが、一つ目のボタンの白抜き文字がやっぱりちょっと甘いかなと悩んだので……。
背景のグレー帯（#aaaaaa）は、疑似要素:afterを使って入れています。