「ボタン」タグアーカイブ

画像バナーや画像リンクをCSSでキラキラ光らせてアニメーション化し目立たせるフラッシーバナー方法

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

画像のアニメーションバナーのデモはこちら
 

必要なもの

flashystyle.css

 ↓まとめてダウンロード↓
デモセットのダウンロード

 

記述例

HTML

<head>と</head>の間で、cssとjQueryを呼び出す。

<head>
<link rel="stylesheet" type="text/css" href="css/styleflashy.css" />
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var shinyObj = '.button a span.shiny';
var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
	$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);
	setTimeout('shinybutton()',interval);
}
</script>
</head>

バナーを表示したい場所に、下記の記述を。

<div class="button">
<a href="#">
	<span class="shiny"></span>
	<span class="btn"><img src="img/banner.png" /></span>
</a>
</div>

これだけ。
「#」は、リンク先を指定すること。banner.pngは任意の画像ファイルに変更可能。

 

フラッシーバナーの解説

var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
	$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);

・shinySpeed は光のエフェクトが動くスピード
・interval は光のエフェクトが出てこない時間帯の長さ
・{left:’+=630px’},shinySpeed).animate({left:’-120px’} ここは、画像バナーの横幅に合わせて変更すること。

 

flashystyle.css の
.button a
.button a span.shiny
の2か所の width:height:left:top:、のサイズも画像バナーに合わせて変更すること。

画像のアニメーションバナーのデモはこちら

この記事も読まれています

CSSだけでバナーやボタンを,アニメーションでキラキラさせる方法

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

アニメーションバナーのデモはこちら
 

必要なもの

button.css
・fontセット font-awesome.zip
DL元:fontawesome.io

 ↓まとめてダウンロード↓
デモセットのダウンロード

 

記述例

HTML

<head>と</head>の間で、cssとフォントを呼び出す。

<head>
<link rel="stylesheet" type="text/css" href="css/button.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

バナーを表示したい場所に、下記の記述を。

<div class="btn-yuya">
  <a href="#">アニメーションバナーのデモ</a>
</div>

これだけ。
「#」は、リンク先を指定すること。

 
青いバナー、キラキラ、矢印が動くバナーはこんな感じで↓

<div class="btn-yuya is-blue is-reflection is-trembling">
  <a href="#">アニメーションバナーのデモ</a>
</div>

青いバナー、キラキラ、矢印が動くバナーのデモはこちら。
 

バナー修飾のクラス(class)解説

クラス名(記述) 説明
btn-yuya 基本クラス(色指定しなければ緑)
is-red 赤色バナー
is-blue 青色バナー
is-black 黒色バナー
is-reflection キラキラ
is-trembling バナー右の矢印を動かす
is-bounce バウンド
is-purun ぽよぽよ動く

赤色で、全てのクラスを指定して動かすアニメーションバナーのデモはこちら

 

カスタマイズ

バナーのサイズ、フォントの大きさ、バナーの色やグラデーションをカスタマイズするには、 button.css の各クラスの部分をカスタマイズすればOK。

この記事も読まれています

【画像ダウンロードボタン作成方法】を画像リンクをクリックすると、すぐにダウンロード開始させる方法。

画像リンクをクリックすると、すぐにダウンロード開始

複雑なプログラミングを使わずに、画像をクリックすると、画像が開くだけじゃなく、自動的に画像ダウンロードがスタートするようにしたい。

できます。
しかも簡単に。

 

サンプルサイト「Web素材.net」

.htaccessとURLクエリストリング(パラメータ)を使う

クエリストリング(クエリパラメータ)などと、小難しい名前がついているが、簡単に言うとURLの後ろについている「?xxx」というやつだ。
querystring
こういうヤツだ。

1. .htaccessに記述を追加する

.htaccess ファイルに以下の記述をコピペする。既に.htaccess がある場合は追記。
ない場合は、下のファイルを右クリックダウンロードして、FTPソフトでアップロードすればOK。

WordPress用も用意している。
site用の.htaccess
wordpress用の.htaccess
なお、ダウンロードした「site.htaccess.txt」などは、アップロード後に、「.htaccess」に名前を変えてくれ。

.htaccess 追記分:
RewriteEngine on
RewriteCond %{QUERY_STRING} ^download
RewriteRule ^(.+)$ – [T=application/octet-stream]

全く同じでなくてもいい。例えば、

RewriteEngine on
RewriteCond %{QUERY_STRING} ^dl
RewriteRule ^(.+)$ – [T=application/octet-stream]

などでも大丈夫。上の例は downloadがクエリストリング。下の例ではdlがクエリストリング。

2. 画像リンクのパスの後に、クエリストリングを追加する

これで、普通の画像リンクだといつも通り画像が表示される。
そしてリンクの後に「?download」とつけておくと、リンクをクリックすると即座にダウンロードが開始される。

通常のリンク<a href=”/xxx/写真名.jpg”>画像表示はこちら</a>

ダウンロードリンク<a href=”/xxx/写真名.jpg?download”>ダウンロードはこちら</a>

クエリストリングにdownloadがついている時に、即座にダウンロードが開始されるわけだ。

解説

.htaccess の開設

RewriteCond %{QUERY_STRING} ^download
クエリストリングが「download」かどうかをチェックする。

RewriteRule ([^/]*)$
この記述は、全てのファイルパスやファイルの種類にマッチすることになる。つまり、全ての場所のいかなるファイルであっても、?download がついている場合に適用される。


このダッシュで、以下はURLやパス、ファイル名じゃないよという事を表している。

[T=application/octet-stream]
TはTypeの略。フラッグと呼ばれる。これでファイルタイプを変更しますよ。という事になる。
application/octet-stream これは、「任意のデータ」という意味になる。つまり、画像でもなく、文章でもなく、動画でもない、「何かしらのデータ」なので、ブラウザで開かれたり、Windowsメディアプレーヤーが立ち上がる事もなく、ダウンロードが開始される。

全体で、
クエリストリングに「?download」がついている場合は、いかなるファイルタイプであっても、それを任意のデータとして受け取るように、ルールを書き換えますよ。

という意味になる。

なのでダウンロードが開始されるわけだ。
ちなみにこれを使えば、画像でなくても「.html」ファイルや、動画ファイルであってもダウンロードさせることができる。
 
URLの後ろに「?download」のクエリストリングをつけるだけでOK。
 
 

番外 WordPressで使いたい!

 
なお、Wordpress(のテンプレートphpなどで)にこれを使いたい場合
<a href="<?php thumbnails_url(); ?>?download" target="_blank"><img src="ダウンロードボタンの画像.jpg"></a>
と記述してやることで、任意のサムネイルをダウンロードさせることができる。

この記事も読まれています

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

Facebookのタイムラインを埋め込むと横幅が660px固定になる

 
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
 
 
これはCSSでうまく対応できるので、紹介しておこう。

 
 

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

 

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
 
 

実はFacebookは自動でスマホ向けに最適化される

 
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
fb-responsive1
↓↓↓↓スマホ表示↓↓↓↓
fb-responsive2
 
 
 
 
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
 
 

「data-width: auto;」は無効化されるので、その対策

 
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
 
これは、下記をスタイルシートにコピペでうまく対応できる。
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

 
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
 
もちろん90%でも80%でもいい。
 
 
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){

}

 
 
メディアアンカーを使わないなら、
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事:
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。

この記事も読まれています