企画サイトの改装をしました。
当社比可愛さマシマシでいい感じだと自負しています。
最初の背景は暗い印象だと思うんですけど、私の中で企画のイメージが夜っぽかったというのが理由です。
夜というところから暗い背景画像
羊というところから黄色味を帯びた本文背景
嘘というところから赤い差し色
上記のイメージでサイトを作っていました。
そんななか、ふと素材サイトさんを回遊していたときにとても可愛い羊ちゃん画像を見つけてしまい、思わず使いたくなって改装に至りました。
ユメカワっぽい感じ（？）ですが、「夢見る羊」という面から見ると結構雰囲気は合っているんじゃないかなぁと思っています。
背景をいじるついでに、info周辺もすこしいじりました。
私のイチオシdetailsタグを使っているところなんですが、2つ並べたときの妙なもっさり感というかぐだっと感というかそのあたりを解消したいなあと思ったので。
もともと設定していたdetailsのborderを削除し、代わりにinfo〜rankまでを囲いました（divのclassを設定してそこにborderを設定）。
これまではdetailsをホバーしたときに背景の透過度をゼロにする設定だったので、囲った範囲の透過度を変更。背景が明るくなったので、全体的に透過度はいじりました。
detailsのborderをなくしたぶん、「ここをクリックすると開きますよ〜」的なアピールで、detailsのホバー時にsummaryの文字色が赤くなり微妙に影をつけました。
detailsタグには元々outlineというのが設定されているのですが、それがあまり好みではなかったので消しています。
ただ、いろいろ調べているとユーザビリティの観点からoutlineは消さないほうがいい（クリックすると開く（選択できる）、というのがわからなくなるから）みたいなことをよく見かけたので、ホバー時の挙動を設定しています。
ただ、携帯からだとホバーという概念がないためそれがうまく機能しないので残念ですが……
最後に、info周辺で強調したいところを太字にして、Twitterのツイートボタン・フォローボタンを設定しました。
フォローボタンについては、別件で近頃調べる機会があり、これは結構いいなあと思っていたので使うことにしました。文字リンクだと少しわかりにくいところもあったし。
ツイートボタンについては、この企画をより多くの人に知ってもらう方法のひとつとして、ああいうのがあったらいいのかなと思って採用。
ツイートボタンやフォローボタンについては以下のリンクから生成したコードをコピペするだけです。
元々リンクをより開かれやすくするためにTwitterカードも設定していたので、URLをツイートするだけで告知画像がババーンと出るようにはしていました。
そのため、ツイートボタンからツイートするだけでちょっと商業サイトっぽく感じて楽しい。
投稿したよ〜とか、この企画面白いね〜、みたいなツイートがしやすいのかなあと。
そこからまた広まれば嬉しい。
ぜひともよろしくお願いします。
