サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
kishiken.com
レスポンシブ対応のステップのナビゲーションを紹介します。 bootstrapで作ったサイトであれば、HTMLとCSSをコピーペーストするだけで利用できます。 通販のカートフローや、申し込みフォームなどのページで使うと、現在地が分かりやすくなり、申し込みのコンバージョンもアップするかと思います。 今回は例として４種類ご紹介します。 ①右向き矢印で現在のステップを表すパターン 右矢印付の、ボックスの中に文字を入れるパターンです。 ライトプラン 詳細はこちら ⇒サンプル確認はこちら ②ドットと線でステップを表すパターン ドットで現在地を表したシンプルなパターンです。 ⇒サンプル確認はこちら ③円の中の数字と線でステップを表すパターン サークルの中に数字を入れ現在地を表すシンプルなパターンです。 ライトプラン 詳細はこちら ⇒サンプル確認はこちら ④Flexboxで作るstep wizard fl
Instagramの写真を動的にWEBサイトを表示させるには、 Instagram API （SandBox モード）を使う必要があります。 APIを使い、instafeed.jsというプラグインを利用すれば、 最新の写真（上限20枚まで）を動的に表示させる事ができます。 動作サンプル ライトプラン 詳細はこちら 動作サンプルはこちら 表示に必要なこと 今回は、 APIを使うためのInstagram Developerページでの登録方法。 APIを使ってページに表示させるためのプラグインinstafeed.jsの使い方。 をを説明します。 USER ID、CLIENT ID、ACCESS TOKENを取得する USER ID CLIENT ID ACCESS TOKEN 上記の情報を取得する方法を説明します。 STEP1 PCのブラウザから、Instagramにログインして下さい。 htt
今回はCSSのみで作るスマホ表示の場合に横にスクロールするナビゲーションメニューの作り方を解説します。 メニュー項目が長くなっても横にスクロールし、フリックで全ての項目を見ることができます。 コピペで簡単に設置できますので、ぜひ試して下さい。 表示サンプル PCでは全ての項目がみれます。 スマホの場合、メニューが横スクロールになります。 ライトプラン 詳細はこちら 動作サンプルページはこちら ※スマホで見るとメニューが横スクロールします。 ※PCで見る場合はウィンドウサイズを狭くしてみてください。 HTML <div class="wrapper"> <div class="content"> <header class="header"> <h1 class="h1">スクロールナビ</h1> </header> <nav class="navigation"> <a class="na
パスワード入力を求める画面においてパスワードの表示/非表示切り替えが一般的になってきています。スマホでパスワードを正確にタイプすることは非常に困難であり、キーを間違えてしまいがちです。 パスワードのスペルを間違えたかどうかをすばやく示すためのボタンがあると便利ということで、その実装サンプルをご紹介します。 表示サンプル 動作サンプルページはこちら ライトプラン 詳細はこちら 例1（チェックボックス） パスワード入力ボックスの下にあるチェックボックスをオンにすると、パスワードが表示されるサンプルです。 チェックボックスを切り替えると、JavaScriptでパスワードフィールドのtype属性をpasswordからtextに変わります。 パスワード非表示 パスワード表示 HTML <input type="password" class="field" id="password" value="
はじめに Bootstrapには、navbarという名前の便利なコンポーネントがあります。 例えばこのようなナビゲーション。 これは、アコーディオンのようにメニューをトグルで開いたり閉じたり出来ますが、レスポンシブでコーディングする際に、PCとSPを考慮する場合、デザインが崩れたりコーディングが大変な場合が多いかと思います。 さらに、右側にトグルのボタンがある場合、左手でスマホを持った場合、届かなくて押しにくい、など、すごく使いやすいとは言えないUIだと個人的に思います。 そこで、スマホアプリでよく見る、横から画面の上にかぶさるように出てくるドロワーメニューがbootstrapでも出来ないかと思い、探しました。 それを簡単に実装する方法は、Drawerいうjqueryプラグインを併用すれば、理想的なドロワーメニューが出来ます。 プラグインの配布元はこちら。 http://git.blive
WebサイトにInstagramの特定のハッシュタグ投稿一覧を埋め込む方法を教えます。 2016年以降、特定の#ハッシュタグの付いた写真を一覧表示する事が、難易度高くなってしまい、有料のサービスを使うなどしなければならなくなってしまいました。 Instagran apiの規約変更に関して、詳しくはこちらhttps://arrown-blog.com/instagram-api-policy-changed/ 特定のハッシュタグの付いた写真を一覧表示する方法は、いろいろ探しましたが、無料では出来ないです(2018年5月現在)。 ※ブログを見ていただいた方から、複眼feedというWEBサービスを教えていただきました。こちらのサービスでもインスタのハッシュタグ一覧埋め込みが出来るようです。 有料のサービスはどれも高額で、月額が3万円ほどかかるサービスばかりで、導入の敷居が非常に高いのが現状です。
v3の設定は、contact form 7公式サイトをご覧ください。 contact form 7を使っていると、ロボットによるスパムの投稿に悩まされることが多いかと思います。それを防ぐことが出来るのが、Googleの「reCAPTCHA」です。実装は凄く簡単です。これで迷惑メールを撃退できます。 そこで、Google「reCAPTCHA」でのWEBサイト登録＆APIキー取得の手順をまとめました。 STEP1 アクセスする。 Google「reCAPTCHA」へアクセスする https://www.google.com/recaptcha/intro/android.html STEP2 ログイン 右上の「Get reCAPTCHA」をクリック STEP3 選択する 「reCAPTCHA v2」を選択肢、 以下赤枠の項目を入力＆選択する STEP4 必要情報をコピー 「Site key」と
Google Maps JavaScript Apiを利用し、 Google Map上に現在位置を示すサンプルを紹介します。 HTML5のGeolocation API機能により、ユーザーの位置情報を所得し、 Google Maps JavaScript Apiを利用し、現在地がマーカーで示されます。 このような形で表示できます。
全画面表示のサンプル 縦横全画面に要素を引き延ばし、その背景に画像を表示させます。 背景を表示させたい要素にwidth: 100vw;height: 100vh;を指定してやると、表示領域に対して縦横100％で表示できます。 さらに、bootstrapと組み合わせるだけで、今風のサイトに見せることが出来ます。 ライトプラン 詳細はこちら ⇒サンプル確認はこちら JavaScript <script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="jquery.bgswitcher.js"></script> <script> jQuery(function($) { $('.bg-switcher').bgSwitcher({ images: ['sample1.
Bootstrap DatepickerはBootstrapのフレームワークを利用した、日付入力補助プラグインです。 ユーザーがカレンダーから直感的に日付を選ぶことができる、 日付を入力する際のUIとして便利なプラグインです。 今回はよく使われるサンプルとその説明を用意しました。 サンプルデモページ サンプルページを作成しました。 ブログ記事内だと、表示が崩れるので、サンプルページで動作の確認をしてください。 ⇒デモページはこちら ライトプラン 詳細はこちら セッティング方法 導入方法は、 プラグインをこのサイトからダウンロードしてください。https://github.com/uxsolutions/bootstrap-datepicker プラグインのオプション設定方法は、このページで確認できます。オンラインデモ セッティング方法は、簡単。jquery、bootstrap、font-a
単純に1つのボタンを押すと指定したIDを開閉する場合 デモはこちら ライトプラン 詳細はこちら HTML data-target=の個所で開閉する対象のIDを指定します。 開閉する対象のIDにinのclass指定をするとデフォルトで開いた状態になります。 <section> <h2>コンテンツを最初は非表示</h2> <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#sample">コンテンツを開く </button> <div id="sample" class="collapse"> <div class="panel panel-default"> <div class="panel-body"> <h3>アコーディオンの中身</h3> <p>コメントコメ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Validator validator.js サンプル</title> <link rel="stylesheet" href="../common/css/bootstrap.css"> <script src="../common/js/jquery-1.11.3.min.js"></script> <script src="validator.js"></script> <script
解説 メニューをコンテンツの上に重ねて出すタイプです。 左側のをメニューボタンをクリックすると、メニューが開閉します。メニューボタンはactive時とoffのときで背景色が変わります。 →デモはこちら ライトプラン 詳細はこちら HTML <div class="warpper"> <header> <h1 class="ttl"> <a href="kishiken.com">スマホメニュー</a> </h1> <div class="button-toggle">☰ </div> <nav class="menu"> <ul> <li> <a href="">menu1</a> </li> <li> <a href="">menu2</a> </li> <li> <a href="">menu3</a> </li> <li> <a href="">menu4</a> </l
オリジナルのflvプレイヤーを作成する手順を紹介します。 今回は、必要最低限の機能のみに絞り、解説します。 ウィンドウ＞コンポーネント から 下記のアイテムをステージにドラッグ＆ドロップして、 所定の場所に配置します。 FLVPlayback MuteButton PlayPauseButton SeekBar VolumeBar FLVPlaybackのインスタンス名はmy_FLVPlybk MuteButtonのインスタンス名はmy_mutebtn PlayPauseButtonのインスタンス名はmy_plypausbttn SeekBarのインスタンス名はmy_seekBar VolumeBarのインスタンス名はmy_vBar とインスタンス名を付けます。 さらに、今回は全体の時間と再生中の時間を表示されるので、 txt1、txt2という変数名の付けたダイナミックテキストを配置しま
■解説 青い丸のシンボルのフレームに下記のスクリプトを記述します。 convの値を増やすと動作が速くなります。 accの値を増やすと揺れる幅が大きくなります。 このサンプルは座標プロパティを変化させていますが、透明度や大きさを変化させる用途にも応用が出来ます。 ■ソース //初期設定 yy = _y; rad = 0; //速度 conv = 0.1; //揺れ幅 acc = 10; onEnterFrame = function () { rad += conv; _y = Math.sin(rad)*acc+yy; }; ■flaファイルのダウンロードflaファイル ダウンロード flaファイルをダウンロードされた方はこちらもお願いします。
こんにちは。今までは技術ブログとして自分のアウトプットを記載してきましたが、新しい記事を書く暇がなく […]
このページを最初にブックマークしてみませんか？
『kishiken.com - 「簡単に出来る方法」をモットーにお役に立てる情報を発信するブロ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
