以前から参加したいと思っていたWordCampに、1日目だけですが初めて参加しました。
気になったセッションを数点紹介しますね。

続きを読む

縦長のページではアニメーションが伴っているものがよくありますが、スクロールによって要素がウィンドウ内に入ったかを検知して処理を実行する、といったものをjQueryでプラグインを使用せず作成します。

レスポンシブデザインで組んでいて要素の座標がウィンドウ幅によって変わるって場合でも大丈夫です。

続きを読む

以前の記事でも同じ趣旨の内容を書いたのですが、今回は別のやり方でモーダルウィンドウを表示したときの背景を固定します。

正確に言えば前回はモーダルウィンドウを含めたページ全体を固定するイメージでした。
この場合、スクロールバーが表示されるブラウザの場合スクロールバーが消えてしまうんですよね。

今回は固定というよりをスクロールさせない方法で、スクロールバーは消えません。ただし、より固定というイメージから遠いかもしれません。

続きを読む

webページをスマホで閲覧する際、モーダルウィンドウを開いた時に背景がスクロールできてしまうと煩わしかったりするのでそれを固定します。

続きを読む

WordPressには前後の記事へのリンクを出力するテンプレートタグprevious_post_linkとnext_post_linkがあります。 これで出力されるリンクを画像アイコンを含めた形で出力させます。

続きを読む

メニューリンク等を画面外に隠しておいて、 ユーザーの操作によってメインの画面をずらしつつ画面外からメニューを表示させるドロワーメニュー。

当ブログでも実装しています。スマホ等、表示領域が狭いケースでは有用ですね。

続きを読む

Fancybox for WordPressを導入する機会があったんですが、retinaディスプレイで確認するとウィンドウを閉じるボタンや影の部分に気になる線が。。。

対策すると同時にこのblogにも入れておきました。単純に別ページが開くだけだったので。

以下、私のとった対応策

続きを読む

通常、要素がブラウザの横幅からはみ出すと右からきれるんですが、縮めたときにも左右均等にはみ出させたいスタイル

よく忘れる自身のためにも書きました。

続きを読む

ちょっと悩んで使ったのですが…

リストを縦に並べて、中のテキストが改行したりしなかったりする場合。
一括で縦位置を中央に揃えたかった。
個々のリストの中に要素を要素をつくってそこにテキストを入れる。
親要素のリストにタイトルの display: table-cell;と vertical-align: middle; を指定。

ちょっと抵抗あったのは、あまり見ないからか使った事なかったからか。

モーダルウィンドウを開くとウィンドウの外側が暗くなるってよくある演出。 その外側の暗くなった箇所をクリックしたときだけウィンドウを閉じる。

続きを読む