- 2020.08.06
cssだけで表現する動きのあるボタン
サイトの問い合わせボタンでよく動くやつ見かけるけど、JSのことは良くわからないから実装は難しいかな・・・・ JSの知識はなくともCSSだけで動きのあるボタンを作れるよ。いろんな動きが再現できるから今回はそれを徹底紹介！！ cssのみで実装する動きのあるボタン8選 振動する ぷにぷにする 上下に揺れる 回転して揺れる 左右に揺れる もっちり動く へこむ 鼓動する まずボタンの基本のサンプルデザイン […]
2/2ページ
2/2ページ
- 2020.07.27
All-in-One Migrationインポート容量制限を解除
ワードプレスのバックアップに簡単で便利なAll-in-One Migration使ってたけど、ある時からインポートの際のファイル容量が制限されてしまったみたい。 容量を増やそうとおもったら、有料版買わないとダメだって・・・泣 確かにバージョン 6.78から容量制限が入ったけど、少し古いバージョンの使用とちょっとした仕掛けで制限を解除できるよ！ 古いバージョンのAll-in-One Migratio […]
- 2020.07.27
LPでも使える！JavaScriptで作成するカウントダウンタイマー
よくランディングページで使用されている時限装置のようなカウントダウンの仕掛けって難しいプログラムとかなのかな・・・？ JSとcssで設置できるよ。敷居が高いように見えるけど手順を踏めばそんなに難しくないかな。 JavaScriptで作るカウントダウンタイマー。 ランディングページなどにカウントダウンタイマーを設置したい方は参考にしてください。 （Wordpressでも設置可能・・・多分） Java […]
- 2020.06.05
画像をキラリと光らせる CSS
問い合わせのボタンとかデザイン装飾以外で何かしら目立たせたいよね cssで画像やイラストを光らせるエフェクトがかけられるよ。jsといったスクリプトも使わないのでとっても簡単！ CSSのみで表現する画像やイラストをキラリと光らせるスクリプト CSSのみで画像をきらっと光らせるスクリプトになります。 JSを使わずCSSのみで実装可能なので非常に手軽です。 CSS [crayon-67d50577d17 […]
- 2020.06.02
Swiper.js アニメーションFlip編
Swiper.js によるスライドショーのFadeアニメーション編になります。 effect: の箇所をflipと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d50577d19d5867040402/] ▼ JS [crayon-67d50577d19db804504954/] 実装デモ
- 2020.06.02
Swiper.js アニメーションFade編
Swiper.js によるスライドショーのFadeアニメーション編になります。 effect: の箇所をfadeと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d50577d1bf2586218255/] ▼ JS [crayon-67d50577d1bf8183273803/] 実装デモ
- 2020.06.01
Swiper.js アニメーションCoverflow編
Swiper.js によるスライドショーのcoverflowアニメーション編になります。 effect: の箇所をcoverflowと書き換える他に新たにJSに以下の記述も加えてください。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 slidesPerView: 3, 上記のslidesPerViewはスライダー上で最初から表示させたいスライド数の設定 […]
- 2020.06.01
Swiper.js アニメーションCube編
Swiper.js によるスライドショーのCubeアニメーション編になります。 effect: の箇所をcubeと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d50577d2150287723988/] ▼ JS [crayon-67d50577d2156211162587/] 実装デモ
- 2020.06.01
Swiper.jsによるスライダー作成
ブログや普通のサイトでもスライドショーのような動きがあるといいよね。ワードプレスのプラグインでも似たようなのあるけど、プラグインの多様はサイトがおもくなるし、ショートコードの設置方法が主なので設置場所に自由が利かないのも困ってて・・・ プラグインを使わなくとも複雑でないJSで実装できるよ。この方法ならプラグインに頼らずカスタマイズや設置場所も自由が利くので便利だよ。 Swiper.jsによるスライ […]