「SEO」タグアーカイブ

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関連

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

2016/01/14 あすたまコメントする

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

SSLを導入することは、一昔前までは、ページのデータのやりとりを暗号化してセキュリティ向上をはかる手段だったのだが、Google、Yahooが、相次いでSSL対応しているかどうかをサイトの検索順位に考慮すると発表した。

これで一気にSSL化の加速が進み、またSSLの導入価格も大幅に安くなった。年額1000円程度でも導入できるので、アクセスアップのためにも是非導入したい。

お名前.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にログインしよう。

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

オプションを追加する

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

独自SSLを追加する

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

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

確認メールが届く

[お名前.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 でアクセスしてみよう。

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

WordPress, スマホ・パソコン・Web関連

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

2015/01/11 あすたまコメントする

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

Stinger3はWordpressの中でも人気のテンプレートの一つ。

色々と思うところあってこのブログではStingerは使っていないが、友人にごく簡単なカスタマイズをお願いされる事は結構多い。

英語環境でStinger3を運用したいという人や、単純に言葉を変えたい人も多いので、今回は「関連記事」を変更する方法をメモしておく。

編集方法

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

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

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

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

これを

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

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

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

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

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

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

あすたまいず