【jQuery】スクロールに合わせてヘッダーサイズを変化させる
今回はスクロールに合わせてヘッダーサイズを変化させる実装を紹介します。 前回はヘッダーを単純に固定させる方法を紹介しました。 ヘッダーを固定で表示させたい時、高さが大きいと見える範囲が狭まりユーザーに不便な思いをさせてし…
今回はスクロールに合わせてヘッダーサイズを変化させる実装を紹介します。 前回はヘッダーを単純に固定させる方法を紹介しました。 ヘッダーを固定で表示させたい時、高さが大きいと見える範囲が狭まりユーザーに不便な思いをさせてし…
今回はCSSを使ってスクロールしても常に上部にヘッダー(ナビゲーション)を表示させる方法をご紹介します。 まずはデモページを確認します。 デモサイト 重要な動線を常に画面上部に固定で表示させておくことで、サイト内回遊率を…
今回はページを遷移せず、jQueryでタブの切り替えを行う実装を紹介します! まずはデモページでこれから作るものを確認します。 デモサイト 【切り替えタブの作り方】HTML編 解説です。(わかる人は読み飛ばしOK) まず…
ワードプレスでは投稿すると自動で投稿日と指定したカテゴリーを表示してくれます。 日時別やカテゴリー別で表示させたい時に便利です。 投稿の日付を表示する方法 ワードプレスで投稿日を表示するには、get_the_date()…
前回は独自のテーマを作成するための準備を行いました。 今回は投稿した記事をループ処理で表示させていきます。 投稿記事一覧を表示させる 投稿記事を作成 まずはワードプレスの管理画面から投稿>新規追加で表示させたい記事を作成…
今回は既存のワードプレスのテーマは使用せず、独自のデザインでサイトを構築していきます。 まずはテーマをを作るための準備をしていきます。 WordPressでオリジナルテーマを作成する ワードプレスは通常サーバーにあげなけ…
WordPressは通常サーバーにあげないと動きませんが、MAMPを使うことで、自分のパソコン上でWordPressを動かすことができます。 サイトの改修やWordPressのテーマ作成の際に大変便利です。 レンタルサー…
パララックス(parallax)は直訳すると視差という意味です。 スクロールすると同時に次のコンテンツが覆いかぶさるような、不思議な動きをし、奥行きやストーリー性を出してくれる効果があります。 今回はそんなパララックスサ…
サイトを開いた時に、いきなりトップページが表示されるのではなく、まずはロゴがふわっとフェードインしてからトップページが表示されるサイトがありますよね。 美容サロンや旅館のサイトでよく使われていて、優しく柔らかい印象を与え…
ワードプレスでcssファイルとjsファイルを読み込みたいのに上手く読み込めない。。なんで?? こんな疑問に答えます。 推奨されているやり方 まずはじめに、ワードプレスからcssファイル、jsファイルを読み込むには<…