文字広告リンクを過剰に装飾してみる。
以前、色白おばけさんがこちらの記事の最後で…
引き続きもっとカッコよくして公開してくれる人募集中。
と、おっしゃっていて、ブログもプログラミングもド素人であるにも関わらず、分不相応にも「応募したい」という思いに駆られ、「こんなのどう？」という案はすぐに思いついたのですが、それをある程度の形に起こすのに手間取り、諦めてみたり、また再開してみたりとずーっと思案と悪戦苦闘しておりました。
そしてこのほどやっとこさっとこそれらしいものができましたので、「カッコいい文字広告リンクの装飾」というお題に対するアンサーソングとして、音痴ながらも歌い上げさせていただきます。
なお、2016年7月現在、わたしは「Innocent」語で唄っておりますが、色白おばけさんは「Brooklyn」語なので、ネイティブBrooklynの方を想定して歌っております。
サイドバータイトルの流用
まずはお手軽なところで、サイドバータイトルのデザインを利用したものです。
<div class="hatena-module-title"><a href="ここにリンク先URLを書いてね">ここにテキストを書いてね</a></div>
このコードを「HTML編集」で書きますと、こんな感じで表示されます。
わたしのようにテーマが「Brooklyn」ではなくても、「<style type="text/css">ここにcssを書いてね</style>」を使うことで、このようにBrooklynのサイドバータイトルのデザインで表示させることができます。
以下ご紹介いたしますものも同様の方法によってBrooklynでなくても表示させることができます。
各種ボタンの流用
読者になるボタンの流用
次にレッドの読者登録ボタンを利用したものです。
<div class="reader-button color"><a href="ここにリンク先URLを書いてね">ここにテキストを書いてね</a></div>
このコードを「HTML編集」で書きますと、こんな感じで…
…表示されないことがあります。なぜなら、そのままではcssが
.reader-button a {（略）width:200px;height:36px;（略）}
と、Brooklynのcssではwidthが200px、heightが36pxに指定されておりますので、文字数が多いと収まりません。ですから「HTML編集」に
<style type="text/css">.reader-button a {padding:0 1em; width:auto; height:auto;}</style>
というコードを加えるなどして調節してください。
ブラックの読者登録ボタンをご使用の方は↑こちらのリンク先をご参照いただき、適宜かえてみてください。
ちなみにスマホ表示の場合、そのままではhoverのゥニョ～ンという動きは再現されません。
クリックした後ゥニョ～ンとさせてからリンク先へ飛ぶようにするには「スマホ hover」などの語で検索かけてみてください。多くの先人との邂逅が待っています。
フォローボタンの流用
はてなのフォローボタンデザインは白黒で見づらいとおもいますので、ここではTwitterのフォローボタンを例にあげます。
<div class="follow-btn"><a class="twitter" href="ここにリンク先URLを書いてね">ここにテキストを書いてね</a></div>
このコードを「HTML編集」で書きますと、こんな感じで表示されます。
フォローボタンも読者になるボタン同様widthとheightが指定されておりますので、文字数が多いと収まりません。ですから「HTML編集」に
<style type="text/css">.follow-btn a {padding:0 2em; width:auto; height:auto;}</style>
というコードを加えるなどして調節してください。
「シェアボタン」や「続きを読むボタン」などを設置しており、それらのボタン類のデザインを流用したい場合も同様の手順で再現できます。
これらのデザインを施す際、「デザインcss」にコードを加えたり編集したりするのではなく、記事の「HTML編集」にコードを加えましょうね。
でないと…cssを変えてしまったり、class名を別の名前にせずに使った場合、今このページを開いている間はサイドバーや記事したに設置してあるフォローボタンの形が変わってしまっているでしょ？と、このようにあちこちデザイン崩れてめんどうなことになってしまいますから。
限定的にプログラムを当てることってできるとおもうのですが、今のわたしにはまだその知識はありません。
Topに戻るボタンを流用してみたのですが…
「Topに戻るボタン」もボタン類ですので上にあげた方法でそのデザインを利用できるのですが、他のボタンとは異なり、画面スクロールによって消えたり現れたりと条件分岐する動作も利用できますので、それでボタン類ではありますが、ここに別枠を設けて唄います。
加えて、「relative」「absolute」「fixed」の違いをすぐ忘れてしまうので、備忘録を兼ねて1画面に表示させてみました。
※Topに戻るボタンを設置されている方はfixedにすると重なって表示されてしまうとおもいますから、marginかけて位置をずらすか、無難にrelativeかabsoluteにされた方がよいかとおもいます。
「1画面に表示させてみました」と申しましても、ここでそれを表示させるとあちこちでその画像が文字と重なって読みづらくなってしまいますので、他の特設ステージにて歌わせていただきます。
ちなみに、これらの位置関係についてのちゃんとした説明はこちらのサイトをご参考になさってみてはいかがでしょうか。
ひっぱっておいてすみません。
それでは、お聞きください。「Topボタン・ラプソディ」……
と、「Topに戻るボタン」を利用したものを公開設定していないサイトでつくっておいたのですが、どうやらその記事を消してしまったようです。
そちらのサイトではテーマを「Airmail」にしていて、cssなど保存せずに「Brooklyn」に変えたところ、挙動が変わってしまい、「あれ～、あの記事どこいった？」と、記事タイトルをつけていなかったこともあり、見当たらなくなってしまいました。
なんとかもう一度組み上げようとあれこれやってみたのですが、再現できなくなってしまいました。
次の節も特設ステージの中止連絡を受ける前に、すでに設営してあったもので、「それなら消せば？」と言われてしまいそうですが、有益な情報なので、そのまま残しました。
jQueryを使うなら
Topに戻るボタンを実装する場合、jQueryを使うことになりますが、こうすると読み込みが多少速くなるようですから、ご参考にどうぞ。
「画像を回転させる」を流用
色白おばけさんによる文字広告リンクの装飾に、これまた色白おばけさんが以前つくられました画像を回転させるコードを組み合わせますと、すでに先程から延々ぐるぐる回っていてお気づきのこととはおもいますが、このようになります。
コードはこちら↑のリンクをご参照ください。
紹介されている回転スピードは「slider 1.5s」ですが、ここでは「10s」に回転速度を落としています。
また、img_spinの「width:50px; height:50px;」と「zoom: 3.0;」を削って、画像が大きくなりすぎないようにしつつ、文字数が多くなってもテキストがおさまるようにしています。
この↑ように、テキストは動かさず螺旋画像を回すことで、吸い込まれるようにクリックしたくな〜る〜。といったものなぞいかがでしょうか？
classを複数適用するには
画像を回転させる「img_spin」classと文字広告リンクを装飾する「ad-link」classの複数のclassをあてるには…
<div class="img_spin ad-link"><a href="ここに画像のURLを書いてね">ここにテキストを書いてね</a></div>
のはじめの<div class="img_spin ad-link">とあるように、class名とclass名の間に半角スペースを打つだけです。
以下でも合わせ技を使っておりますが、同様にclass間に半角スペースが使われております。
「画像をスライドさせる」を流用
こちらも色白おばけさんのコードの組み合わせです。
コードはこちら↑のリンクをご参照ください。
スマホ表示ではスライド幅が大きく画面におさまらず、スライダーが表示されてしまいますので、気になる方は「translateX(360px)」の「360px」のところを変えてスライド幅を調節してください。
ただ、画面の内外を行き来して消えたり現れたりする感じはおばけ感が出てよいのではないかとおもいます。
また、スライダーが勝手に左右に動きつづけますのでダイナミックな絵や躍動感、違和感や落ち着かなさなどを演出して目立たせたいというようなときにも効果的ではないかなぁ～とおもいます。
スライドあれこれ
この左右への動きが、テレビでよく目にする「ご応募はこちらまで」の手の動きのように見えましたので、それを形にしてみました。
またはこんな感じで、文字を書いているようにしてみたりね。
これ↑は
<p style="position: absolute;"><a href="ここにリンク先URLを書いてね"><br />ここにテキストを書いてね</a></p>
<p><img class="slider" style="position: relative;" src="ここに画像のURLを書いてね" alt="ここに画像に適した名前を書いてね"/></p>
こんな感じで、positionを指定して重なるようにしています。
「画像を反復横跳びさせる」を流用
もう説明はいらないですよね。
コードはこちら↑のリンクをご参照ください。
この反復横跳びする画像にテキストを重ねて表示するこんなんどうでしょう？
<div class="yokotobi" style="position: relative; bottom: 140px; left: 40px;">画像はPixabayの<br />「ゴースト」で検索した<br />ものを使っています。</div>
<p><a href="ここにリンク先URLを書いてね"><img class="yokotobi" style="width: 208px; height: 180px;" src="ここに画像のURLを書いてね" alt="ここに画像に適した名前を書いてね" /></a></p>
文字が複数行にわたる場合には、<br>で改行されるとよいでしょう。
このゴーストの画像を「width:208px; height:180px;」と指定して文字が3行にわたる場合には、文字位置を「bottom:140px; left:40px;」とし、1行6～8文字ぐらいとすると、なんとか立て札内に文字がおさまりそうです。
「ゴースト」で検索した
ものを使っています。
立て札に文字を書き入れた画像を利用する方が、より望ましいとはおもいますけれども、お題がテキスト広告リンクの装飾ですので。
貧相な知性と残念な品性
画像やアニメーションに多分に頼っておりますので、果たしてこれが「文字広告リンクを装飾」という条件におさまっているかは甚だ疑問であり、応募要件に適っていないかもしれませんが、わたしの歌声いかがだったでしょうか？
わたしは生涯貧乏しか知らない生来貧乏性の真性貧乏症罹患者なものですから、「もったいないもったいない」という選好意識が常に先行する特性をもつゆえに、今回のお題に関しましてもフォローボタンなど、せっかくcssカスタマイズして装飾を施したのに、「そこでだけしか使わないなんてなんてもったいない」と、常々おもっていたものですから、このように今回はふんだんに流用してみました。
ただの流用ですからクリエイティブなところは微塵もありません。そこのところ自覚しております。自覚してはおりますが、「使い所が目新しい」だとか「組み合わせの妙」だとか、「好意的に見て錯覚してっ！お願い！」との淡い期待を抱きつつ、おそるおそる歌ってみました。
「0から」とは言いません、せめて「1から」新しいことをおもいついて、それを生み出せる知性がほしかったぁ…。
人生いろいろ。装飾もいろいろ。
スマホ表示にはあまり適しませんが、PC表示がメインであれば、ホバーエフェクトなんかを活用したテキスト広告リンクの装飾方法がまだまだたくさんありますが、きりがないので、参考になりそうなサイトをご紹介するにとどめますね。
こんなアニメーションもいかがでしょうか？
知らないよ～。
広告リンクをこれほどやや過剰に装飾してよいものかどうか？利用されているアフィリエイトの規約上よろしくないものもあるのではないかとおもいます。もしお試しに成られる場合はご自身で規約をご確認のうえお試しください。
お知らせ
今回ご紹介したもので、もし「わから～ん」というところがございましたら、その旨お申し付けくださいませ。ご要望があり、なおかつ気が向きましたら、別記事にてご説明いたします予定があったりなかったりします。
こちらもいかが？
