[CSS]マウスオーバーで立方体が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用し ... 2016/06/10続きを読む
[CSS]マウスオーバーで平面が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSS のtransfo ... 2016/06/10続きを読む
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」Webデザイン・アプリ開発タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能 ... 2016/06/05続きを読む
背景画像に変色するグラデーション背景を重ね合わせるサンプルWebデザイン・アプリ開発今回のTipsでは、Webページの背景(background)にアニメーションしながら色が変化していく「グラデーション背景」とフルサイズの「背景画像」を重ね合わせて表示するサンプルを作ってみたいと思います。CSSのみでで ... 2016/05/29続きを読む
CSS3で作る汎用的なモーダルウィンドウWebデザイン・アプリ開発JavascriptやjQueryモジュールを使って別のコンテンツがレイヤーのように全面に表示されるモーダルウィンドウの実装方法はいくつかありますが、今回はCSSだけを使ってポップアップで開くモーダルウィンドウと、汎用性 ... 2014/12/11続きを読む
PC用とモバイル用で表示ウィジェットを分ける方法応用カスタマイズDigiPressテーマはご存知の通り、レスポンシブWebデザインに対応しており、スマートフォンサイズでもサイトのレイアウト表示を最適化します。 「el plano」など一部のモバイル専用テーマを持つテーマの場合はスマー ... 続きを読む
WordPressのカテゴリーページでパーマリンクから”category”を取り除く4つの方法カスタマイズ・技術情報WordPressを使っている人なら、大抵はパーマリンクの設定を変更していると思います。 日付ベースや数字ベースなどのプリセットもありますが、カスタム構造で/%category%/%postname%/として「カテゴリー ... 2013/06/19続きを読む
好きな箇所に好きなWebフォントでテキストを表示する方法応用カスタマイズDigiPressは、テーマファイルを直接編集することなくHTMLのヘッダ(head)に独自のmetaタグやlinkタグなどheadタグ内に記述したい定義をいつでも追加することができます。 この HTMLヘッダー設定 と ... 続きを読む