「SEO」タグアーカイブ

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。

お名前.comのアルファSSLを導入したらアクセスが伸びた!

SSL導入したら何がいいの?

 
 
SSLを導入することは、一昔前までは、ページのデータのやりとりを暗号化してセキュリティ向上をはかる手段だったのだが、Google、Yahooが、相次いでSSL対応しているかどうかをサイトの検索順位に考慮すると発表した。
 
 
これで一気にSSL化の加速が進み、またSSLの導入価格も大幅に安くなった。年額1000円程度でも導入できるので、アクセスアップのためにも是非導入したい。
 
ssl-onamae
 

お名前.comの月額100円のSSLでhttpsにしよう

 
 
大手IT企業のGMOが提供するレンタルサーバーのお名前.comでもSSLの導入が月額100円でできる。サーバーそのものの価格や安定性も業界トップクラスなので、是非検討したい。
 
共用サーバーSD-01、共用サーバーSD-02、共用サーバーSD-11、共用サーバーSD-12
レンタルサーバーはこの4つがあるが、このうち、01と02は現在は提供されていない旧プランなので、アルファSSL(月額100円のもの)は導入できない。
 
この場合は共用サーバーSD-12にアップグレードするしかない

サーバーの月額がSD-11の倍(月額1800円)かかるものの、アルファSSLが10個まで無料なので、SD-12もかなりお得だ。
 
 
手順も超簡単SD-11(別途月額100円必要)でも、SD-12(10個まで無料)でも手順は同じ。
 
 

1. お名前.comにログイン

まずはログイン、お名前.comのレンタルサーバーのサーバーNaviにログインしよう。
onamae-ssl1

画面左のメニューからご利用サービス確認をクリック。
onamae-ssl2
 
 

オプションを追加する

オプション [追加する] をクリックする。
onamae-ssl3
 
 

独自SSLを追加する

 

独自SSL(アルファSSL)の左にチェックを入れ、「次へ」をクリック。
onamae-ssl4

ドメインを選んで「次へ」をクリック。
onamae-ssl5

 
 

確認メールが届く

 

[お名前.com] アルファSSLオプションお申込み確認 xxx.com というタイトルでメールが届く。
内容はこんな感じ
───────────────────────────────────
■サービス内容■
───────────────────────────────────
ドメイン名…………..: xxx.com
[合計]――――――――――――――――――――――――――――――――
アルファSSLオプション..: 108円
======================================================================
合計……………………………….: 108円
※上記の金額は、すべて税込金額です。

 
 

クレジットカードの決済や、口座引き落としがある

 
決済完了のメールが届く。とりあえず1年分のお金は引き落とされる。

───────────────────────────────────
■ご請求/領収明細内容■
───────────────────────────────────
会員ID…………………………….: xxxxxx
[ご請求/領収明細]―――――――――――――――――――――――――――――
xxx.com
独自SSL(アルファSSL) 2016年2月-2017年2月ご利用分 1 1,404円
======================================================================
お支払い金額……………………: 1,404円

 
 

httpsでアクセスできるようになる

 

決済完了のメールが届いてから、自分のサイトにhttpsでアクセスしてみよう。

http://oreno-url.com/ だった場合、自分で
https://oreno-url.com/ と入力してみよう。

アクセスアラート(エラー画面のようなもの)が表示される場合は、まだサーバー設定が完了していない。
決済完了から、15分~数時間かかるので、しばらくしてからもう一度、https でアクセスしてみよう。

問題なくアクセスできたら設定完了!

Stinger3で「関連記事」の表示を変える方法

Stinger3をちょっとだけカスタマイズしたい人へ

Stinger3はWordpressの中でも人気のテンプレートの一つ。
 
色々と思うところあってこのブログではStingerは使っていないが、友人にごく簡単なカスタマイズをお願いされる事は結構多い。
 
英語環境でStinger3を運用したいという人や、単純に言葉を変えたい人も多いので、今回は「関連記事」を変更する方法をメモしておく。
 
kanrenkiji

 

編集方法

 

WordPressの管理画面へ入り、左のメニューバーから

「外観」→「テーマの編集(画面上はエディター)」→「単一記事の投稿(single.php)」と選択し

<!–関連記事–>
<h4 class=”kanren”>関連記事</h4>

と書いてある場所を見つけよう。

これを

<!–関連記事–>
<h4 class=”kanren”>”好きな言葉”</h4>

stinger3-kanren

編集して  「ファイルを更新」  してカスタマイズ完了。

phpをいじるので、子テーマにしてもいいのだが、正直これぐらいの小さなカスタマイズなら気にしなくていい。

これでこんな感じに好きな言葉に買える事ができる。

suggest-stinger

 

これでStinger3を英語サイトとして運用することもできる。

関連記事:stinger3で関連記事の「記事を読む」の表示を変える方