WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
画像リンクの動き
「画像リンクの動き」はクリックした先に関連するページがあることを明示する機能の役割も担っています。
サイトの印象にあわせた動きを取り入れてみましょう！
２３種類の「画像リンクの動き」を作ってみた
今回はシリーズ最多の２３種類になります。
後半から疲れて余白調整とか手抜きしちゃってます(^◇^;)
あなたも途中から見るのが飽きてくるだろうと思ったので、ちょっと「ドキッ♡」とする画像を使ってます(о´∀`о)
最後までご覧になると、きっとうれしくなると思います！
お楽しみに！☆*:.｡. o(≧▽≦)o .｡.:*☆
よくある動作
See the Pen
よくある動作 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（下から）
See the Pen
背景が出現＋テキスト（下から） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（上から）
See the Pen
背景が出現＋テキスト（上から） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（左から）
See the Pen
背景が出現＋テキスト（左から） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（右から）
See the Pen
背景が出現＋テキスト（右から） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（中央から左右に）
See the Pen
背景が出現＋テキスト（中央から左右に） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
背景が出現＋テキスト（中央から上下に）
See the Pen
背景が出現＋テキスト（中央から上下に） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
回転＋テキスト（X軸）
See the Pen
回転＋テキスト（X軸） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
回転＋テキスト（Y軸）
See the Pen
回転＋テキスト（Y軸） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
回転＋テキスト（Z軸1）
See the Pen
回転＋テキスト（Z軸1） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
回転＋テキスト（Z軸2）
See the Pen
回転＋テキスト（Z軸2） by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
画像拡大（ぼかし）＋テキスト
See the Pen
画像拡大（ぼかし）＋テキスト by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
画像縮小（ぼかし）＋テキスト
See the Pen
画像縮小（ぼかし）＋テキスト by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
画像透過+ グラデーション＋テキスト
See the Pen
画像透過+ グラデーション＋テキスト by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
枠線＋テキスト
See the Pen
枠線＋テキスト by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね！↑
次回の予定
見出しやキャッチフレーズといった「伝えたい言葉」を印象付ける「テキストの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／
これはコピーライティング、セールスライティングと組み合わせると効果大です！
WordPressでのお困りの不具合等を復旧致します！
ココナラでも提供しております。ココナラだけでも、多数のご依頼を頂いています。またココナラではうれしい五つ星評価（最高評価）も頂いております。
WordPressの作業代行
お見積もりも、もちろん無料です。
日祝・時間を問わず対応しております。お気軽にご相談ください。
こんな不具合を解消しています。
下記のようなエラー復旧のご依頼を頂いています。
- 『WordPressにログインできない』
- 『ユーザー名、パスワードがわからなくなった』
- 『ワードプレスを更新したらおかしくなった』
- 『XXXX年間ビジターアンケートが表示された』
- 『ログインしようとしたら画面が真っ白（表示されなくなった）』
- 『サイトによくわからない文字が表示されている』
- 『400、500などのエラー表示が出ている』
- 『ウィジェットやバーが表示されない』
- 『ページが真っ白、エラーページが表示される』
- 『プラグインが動かない』
- 『403エラーが出て、サイトが見れなくなった』
- 『ホームページが改ざんされてしまった』
- 『不正なアクセスの検知をした旨のメールが届いた…』
- 『Fatal error: Uncaught Error:
Call to undefined function wp_unregister_GLOBALS() 』に関するエラー - 『作業はやるので代わりに調べて欲しい』
- 『調べた内容は本当にできる？』
- 『詳しい人のアドバイスが欲しいだけ』
- 『WordPressを始めてみたけどこの後どうすればいいの？』
- 『インストールしたテーマの使い方がわからない…』
- 『外観＞カスタマイズ』で設定できる内容
- 『ERR_TOO_MANY_REDIRECTS』に関するエラー
- 『WordPressのバージョンを上げたらおかしくなった』
- 『テーマを更新したらデザインが崩れてしまった』
- 『サーバーを移行したら表示がおかしくなった』
- 『phpのバージョンを上げたらおかしくなった』
- 『画像をメディアにアップロードできない』
- 『サイト内の画像がすべて表示されなくなった』
- 『ドメインを変更したら表示がおかしくなった』
- 『サーバー移管SSL化（https）』
- 『他のブログからの引っ越し（アメーバブログ・他のWordPress等）』
- 『用途に応じたサーバー選び』
その他『とにかく助けて欲しい！』など、お気軽にお問い合わせ下さい
どのようなエラーでも復旧可能？
下記３点のケースを除けば基本的に復旧は可能です。 復旧出来ない可能性のあるケース
- 元データ自体が無くなってしまっている
- サイトを改ざんされてり内部ファイルを書き換えられたり削除されている
- データを誤って削除してしまい、バックアップが無い場合
バックアップをお持ちではなくともサーバー側で自動的にバックアップを取っている場合があり、復旧出来ることもあります。諦めずまずはお問い合わせ下さい。
お問い合わせ
「お見積もり無料です！」
費用は作業完了後にご納得の上でのお支払です。
作業の流れ（お見積もり）
- ご連絡頂く
- 詳細をお聞きする
- ログイン情報を頂く
- サーバー・サイトにログインして状況を確認
- お見積もり金額の提示
- 依頼頂くかキャンセルされるかご判断下さい。（ここでキャンセルも可）
- ご依頼確定となれば作業開始
- 作業完了
- サイトの確認をして頂く（問題ないようでしたらお支払いに進む）
- お支払いのご案内（メールにてご請求の案内）
- ご依頼・作業終了となります。
WordPress保守管理します！
WordPress保守管理(月額)サービスも行っております。
