Bootstrapを使ってWEBサイトを作ってみようぜ 第7回 「コンテンツ部分とサイドバーを作る」
Bootstarapを使ってWEBサイトを初心者が作ってみるコーナー、今回は第7回目でメインエリアのコンテンツ部分とサイドバーの部分を作る作業です。
Tableのヘッダーが見えなくならないようにスクロールに合わせて常に表示されるように付いてくるようにするコード
テーブルのヘッダーの項目を常に表示できるようにするコード。これを使うことで、テーブルの途中で何の項目だったのか分からなくなってしまうのを防ぐことが出来る
WordPressで無限読み込み、無限スクロールが簡単に出来る様になるプラグイン 『Infinite Scroll』 の使い方
TwitterとかFacebookとかPinterestでスクロールをしていくことで次々とコンテンツを読み込んでいくことができます、あれをWordpressで簡単に実現することが出来るプラグインがあります HTMLとCS […]
WordPressで記事に付けられたカテゴリと、そのカテゴリにある記事数を自由にレイアウトする方法
記事に指定されているカテゴリを表示することは、当たり前なのですが。そのカテゴリに含まれている記事数を表示したい場合は通常 the_category を使うことが多いのですが、こちらは形式が決まっています。get_the_ […]
画面全体が切り替わるダイナミックな演出のナビゲーションのアイディア 『Full Page Intro & Navigation』
画面全体に表示されるナビゲーションへの切り替えがダイナミックな演出のナビゲーションの導入の例。CSS3での変形とアニメーションをうまく組み合わせて作られたナビゲーションです
WordPressでショートコードの中にショートコードを書けるようにする方法
WordPressのショートコード使っていますでしょうか？ ショートコードはビジュアルエディタのままで、コードを呼び出せるので 決まったコードを何度も使ったりする場合にはとても便利です でもそんなショートコ […]
WEBサイトの背景いっぱいに、YOUTUBEの動画を流すjQueryプラグイン 『jQuery tubular』
ホームページ等のWEBサイトの背景をYOUTUBEを使って動画にする方法。jQueryとプラグインを使うことで、簡単に導入することが可能。またYOUTUBEからの配信なので転送量を気にする必要がない
文字の部分をbackground-clip: text;を使って背景をGIF動画にして見せるテクニック
background-clip: text;をつかってテクニック。背景にGIF動画を設置することで、テキストに目を引きつけるのに効果的。
要素を綺麗にブロック・レンガ状に並べてくれるjQueryプラグイン 『Masonry』
jQueryのプラグインで、自動的に要素を綺麗に整列してくれるプラグインです。 記事一覧や画像一覧等によく使われます。すべてが同じサイズの場合はCSSだけでなんとかなるんですが、そうは行かないケースも多々有ります。そんな […]
マウスポインターの位置に合わせて動くギャラリースライドがとても印象的 『Hover-Carousel』
Hover-Carousel Yair Even Or GIFアニメにしたもの マウスポインターの位置によって画像を、スマホとかでスライドさせるような感覚で操作できる印象的なスライド とてもめずらしい動作で […]
タグ要素一つだけで作れる、リボン見出しが作れる CSSコード 『Single Element Pure CSS3 Double Fold Ribbon』
Single Element Pure CSS3 Double Fold Ribbon http://thecodeplayer.com/walkthrough/single-element-pure-css3-doub […]
ヘッダー部分がスクロールすると、ついてくるナビゲーションに変化するアイディア
A Pen by Paul Howarth 通常の画像とロゴのヘッダーに見えたのが、スクロールをトリガーにヘッダーの画像をそのまま利用したナビゲーションに変化するアイディアです。 コードはHTML、CSS […]
Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
記事の表示をモバイル向けには、省略形で表示するアイディア 『Mobile Friendly Reading v2.0』
Mobile Friendly Reading v2.0 By Justin レスポンシブデザインでモバイル向けには、テキスト部分を、徐々に文字が薄くなっていくエフェクトを使って省略表示したアイディアです。 […]
すごすぎるVelocityJSを使った、HTML+CSS+jsで作ったアニメーションのデモ 『VelocityJS demo』
カッコイイのひとこですね。 簡単にはこのレベルのアニメーションはVelocityJSというプラグインを使っても作れないでしょうが。チャレンジはしたくなりますね。
rotateを使った三角形のマウスオーバーエフェクト 『List with arrows <』
要素をマウスオーバーした時に、背景色の変化と三角形が現れるエフェクトを与えたものです。
WordPressでFacebookのページへ自動投稿するのを 「NextScripts: Social Networks Auto-Poster」を使って行う方法
WordPress の記事を投稿したら自動的にFacebookに書き込むプラグインというのはいくつか存在します、今までは、wordbookerを使って行っていましたが、今回 SNAP(NextScripts: Socia […]
Bootstrapを使ってWEBサイトを作ってみようぜ 第5回 「全体的な構図の作成とナビゲーションバーの設置」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
WordPressに標準で備わっている wp_is_mobile()で条件分岐を作ってPCとモバイル向けの出力を変える
昨今はPC以外のデバイスの普及が爆速で進んでいるのですが、特にスマートフォン向けの最適なWEBサイトの表示が求められています。対応する方法としてはレスポンシブなデザイン、ユーザーエージェントを元に専用ページへのリダイレク […]
要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック 『CSS3 Accordion』
開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的 heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させています
