インスタキーのみでインスタグラムをサイトに表示

インスタグラムをサイトに埋め込む方法は、ウィジェットを使用したり、埋め込み用のコードを入力することで表示させたりといろいろな方法がありますが、
インスタキーのみで簡単に表示させる方法があります。

上記のコードのvar instaKeyにインスタキーを入力し、var imgCntで表示させたい写真の枚数を指定できます。

指定したID(今回はinsuta_area)の要素内にリスト形式で表示されます。

WordPressで固定ページのパーマリンクを変更

WordPressの固定ページにはパーマリンクと呼ばれる、そのページを示すURLが存在します。

パーマリンクの変更では一部を自由に変更することが可能です。

パーマリンクは半角英数字などで、自由に変更することが出来ます。

デフォルトだと、URLが長くなってしまったり、どのページなのかがわかりづらくなるため普通は変更をします。

wordPressでのサイトが作られたばかりでは問題ありませんが。

投稿記事など過去に書いた記事などがある状態で固定ページなどのパーマリンクを変更すると、リンク切れや、ページが見つかりませんといった問題につながる可能性もあります。

なので、大きな理由がない限りは、パーマリンクを容易に変更するのは推奨しません。

IEでのmain 要素

mainは、HTML5 から追加された要素です、使用する場合に、気を付ける必要があります。
IE9 ~ IE11では、main 要素の display プロパティの規定値は inlineとなっています。

ChromeとFireFoxなどは、main 要素の displayプロパティの規定値はdisplay:block;なので

ウェブサイトの構成をmain要素で指定するには、main要素にdisplay:blockを指定する必要があります。

IEでmain要素に対してpaddinngの上下やマージン、高さなどがうまく働かないば場合、CSSをチェックしてみるとよいでしょう。

ブラウザ間でのレイアウトの違いは、ブラウザごとの仕様によって違うので、気を付けていきたいですね。

Firefoxのデフォルトプルダウンデザインの初期化

htmlでのそのままのセレクトボックスのデザインは味気ないものです。

そこでcssを使って背景を変えたりなどのデザイン調整をする場合

クロームやIEなどでは上記のような記述で大丈夫ですが、これだけではFireFoxではリセットできません

ですので、

上記の記述で対応します。

[jQuery]ロールオーバー

画像を使ったロールオーバーはグローバルナビやお問い合わせのボタンなどWEBサイトの様々なところで使用されることが多いものです。

できれば、cssで背景の変更などではなく、jQueryで一括で定義できるようにすれば、楽ですし、後々の管理が楽になります。

以下が、jQueryを使ったロールオーバーの記述です。

用意する画像は末尾に_offと_onを記述したロールオーバー前と後の画像を用意します。
1,gNavi_01_off.jpg
2,gNavi_01_on.jpg

jQueryで画像をホバーしたときに、画像のソースを変更してonとoffの切り替えを行っています。

ソース上のでは、jsの記述とaタグにクラス「rollover_btn」を付与するだけで、実装できるのでcssよりも便利なのではないでしょうか。

[jQuery]地域別にコンテンツをカテゴリー分けするメニュー

1ページに北海道から沖縄までの地域やショップ名などで、

クラス名「shopSelectBtn」を押したとき、該当する地域のコンテンツが表示される、メニューです。

と上記のように北海道のボタンを押したときクラス「.area」の内容が北海道のカテゴリー一覧が表示されるようになります。

wpで会員制サイトをプラグインで作成

プラグイン「Simple Membership」を使用すれば、wpで会員制サイトを簡単に作成することが可能です。

プラグインで使える会員制サイトの機能

・ユーザー登録
・ログインフォーム
・記事やページを会員に公開できる
・ユーザーで会員情報の変更
・管理ページから手動でユーザー追加ができる

Simple Membership
上記のからファイルをダウンロードし、管理画面からプラグイン>プラグインのアップロードからインストールすることで有効化できます。

最初に会員レベルを設定しておきます。会員レベルによって閲覧可能なコンテンツを設定したり、利用できる機能を制限できます。

次に「ページ設定」では
ログインページ
会員登録ページ
会員についての紹介ページ
プロフィールの編集ページ
パスワードリセットページ
が生成されています。

そして会員のみ閲覧可能なコンテンツの設定は、
記事を新規追加し、編集画面の下に表示される「Simple WP Membership 限定公開」の「Yes, Protect this content.」を選択することで会員レベル別に閲覧可否を設定できます。

jQueryでスクロール位置を取得

jQueryでスクロールイベントでページの指定した場所に移動したり、一定までスクロールした時に、
ナビゲーションを表示させるといったことも可能です。

スクロール位置を取得するためには scrollTop() メソッドを使います。

ウィンドウ全体でスクロール量を習得したい場合$(window)を使います。

上記では、スクロール量が200を超えると固定されるメニューを作成することができます。
他にもページトップボタンやスクロールした時にグローバルナビを上部に固定したりいろいろなことができます。

jQueryで関数を使用

関数はjQueryなど、複数の処理をまとめて一つにしたものです。

functionその後に関数名の後に()を記述し{}の中に処理内容を書きます。

便利なのは、複数回同じ処理を書かなくて済むので、必要な時にまとめて使いまわすことができます。

liやクラス名「btn」をクリックやマウスオーバーした時のaタグの動作を実際に関数で記述すると下記のようになります。

a要素に対するcssの変更を関数にすることで、いちいち処理を書かずに、簡潔に書くことができます。

チェックボタンがすべてチェックされているかの判定

チェックボックスがチェックされているのをすべて一から判定するのは時間がかかってしますので、

チェックされていないチェックボックスの個数が0の考え方で、

上記のように記述すると、すべてのチェックボックスがチェックされていない場合のアラート文を表示させることができます。