snipetsNakazawa's Collection

CONTENTS

ボタン等パーツ

• ・ LINE登録リンク
• ・ ボタンのリンク範囲を親要素に合わせる
• ・ フラットデザインボタンCSS
• ・ CSSのみでリンクボタン
• ・ liのテキストリンクで背景全体をリンク指定

WordPress【管理画面関係】

• ・ CPT UI を使ってカスタムタクソノミー（カテゴリー）を作成
• ・ WordPressビジュアルエディタの明朝体フォントを変更する

jQuery

• ・ スクロールするとヘッダーの背景色が変わる
• ・ 右端に固定ボックス（スクロールフェードイン）
• ・ 日時指定で要素を切り替える
• ・ ページ内リンクにスクロール移動
• ・ タブレットでPCサイトを縮小表示をする方法
• ・ 指定量スクロールしたらヘッダーを表示する
• ・ スクロールするとナビゲーションが途中から固定

フォーム

• ・ 画像送信ボタン
• ・ サイト内検索窓
• ・ セレクトボックスをデザインする
• ・ デザインcheckbox
• ・ 基本フォーム（レスポンシブ）
• ・ MW WP form

レイアウト

• ・ positionで中心地点から位置を設定する
• ・ 親要素からはみ出して幅いっぱいに表示
• ・ 親要素からはみ出して配置
• ・ スクロールするとヘッダーの背景色が変わる
• ・ テキストの前後に画像
• ・ ボックスをフェードイン
• ・ liで横並びにした際にレイアウト崩れを防ぐ
• ・ 分割線付きフッターメニュー
• ・ 右端に固定ボックス（スクロールフェードイン）
• ・ スマホとPCでCSSを分ける
• ・ ページ内横スクロールボックス
• ・ コンテンツ量が少ない時、フッターを画像下部に表示させる

header

• ・ 電話番号リンク関連
• ・ タブレットでPCサイトを縮小表示をする方法
• ・ fontawesome

画像関係

• ・ 上下に画像を揺らすCSS
• ・ 画像をセンターでトリミング
• ・ 画像を円でトリミング
• ・ 背景画像をフェードイン
• ・ テキスト頭に画像アイコンの指定
• ・ WordPressの画像配置class名
• ・ 背景画像を全面表示
• ・ 背景画像をフルスクリーン表示して要素を天地左右中心に
• ・ 背景画像にオーバーレイ
• ・ マウスオーバーで画像の彩度を変える
• ・ マウスオーバーで彩度を変える

ボックス

• ・ 画像をセンターでトリミング
• ・ 親要素からはみ出して配置
• ・ ボックスをフェードイン
• ・ 右端に固定ボックス（スクロールフェードイン）
• ・ 背景のみ透過
• ・ ボックスシャドウ
• ・ 背景画像をフルスクリーン表示して要素を天地左右中心に
• ・ Box Shadow
• ・ 角ごとの角丸

フォント指定

• ・ テキストの両側にライン
• ・ Animate.css のオプション
• ・ テキストの前後に画像
• ・ 分割線付きフッターメニュー
• ・ font-family設定-Noto Sans JP+Lato
• ・ リストのマークを画像で
• ・ タグのリンクを無効にする
• ・ 游ゴシック／游明朝体指定
• ・ Font Awesome よく使うフォント
• ・ liのテキストリンクで背景全体をリンク指定
• ・ テキストで評価の★
• ・ 画像にテキストを乗せる（ボタン）

WordPress【Basic】

• ・ ウィジェット設置
• ・ 固定ページに複数タイプの記事一覧でページャー表示
• ・ 最大アップロードサイズの変更
• ・ 固定ページをパーツとして読み込み
• ・ カテゴリ一覧の取得
• ・ WordPress　検索結果から固定ページを除外
• ・ WordPress基本パス
• ・ シングルページ、固定ページ、サイドバー等の複数まとめ
• ・ 一覧での本文抜粋表示
• ・ 記事中の画像パスを相対パスに
• ・ ナビの現在ページをハイライト
• ・ サイト内検索窓

WordPress【カテゴリー関係】

• ・ CPT UI を使ってカスタムタクソノミー（カテゴリー）を作成
• ・ 投稿数の多いカテゴリを件数を指定して出力
• ・ カテゴリ一覧の取得
• ・ カテゴリ名を取得（表示）
• ・ カテゴリーによって別の内容を表示
• ・ wp_list_categories で特定カテゴリーを指定・除外
• ・ カテゴリー名表示　リンク付き　除外可
• ・ カテゴリー一覧でタイトルの文字数制限

WordPress【カスタムフィールド&投稿タイプ】

• ・ 固定ページに複数タイプの記事一覧でページャー表示
• ・ カスタム投稿タイプ投稿画面にアイキャッチ画像を表示させる
• ・ カスタム投稿タイプの記事一覧を表示
• ・ カスタムフィールドの値で表示を変更したい場合
• ・ カスタムフィールドに値が入っているか判別
• ・ カスタムフィールド

WordPress【プラグイン】

• ・ WP-Pagenavi 読み込み設定
• ・ LityでYouTubeサムネイルをモーダルウィンドウで再生する
• ・ MW WP Formの電話番号入力欄の幅CSS
• ・ MW WP form

スマホ関係

• ・ 電話番号リンク関連

レスポンシブ関係

• ・ LityでYouTubeサムネイルをモーダルウィンドウで再生する
• ・ スマホとPCでCSSを分ける
• ・ PCのみ、SPのみ改行
• ・ 電話番号リンク関連
• ・ タブレットでPCサイトを縮小表示をする方法
• ・ スマホ用ドロワーメニュー
• ・ Youtube動画のレスポンシブ対応埋め込み
• ・ レスポンシブGoogleMap

メディア関係

• ・ LityでYouTubeサムネイルをモーダルウィンドウで再生する
• ・ 動画の特定のフレームをサムネイルに指定する方法
• ・ LINE登録リンク
• ・ Youtube動画のレスポンシブ対応埋め込み
• ・ レスポンシブGoogleMap
• ・ SNSボタン

jQuery【アニメーション】

• ・ 上下に画像を揺らすCSS
• ・ Animate.css のオプション
• ・ FadeThis（スクロールしたタイミングでフェードイン・アウト）
• ・ Animate.css + wow.js

その他

• ・ 上下に画像を揺らすCSS
• ・ 背景画像をフェードイン
• ・ テキスト頭に画像アイコンの指定
• ・ 電話番号リンク関連
• ・ Google・Yahoo!両方のon clickタグ設置
• ・ ページ内リンクのジャンプ先の位置を調整する
• ・ ヘッダーを固定（スクロールしない）
• ・ タグのリンクを無効にする
• ・ サイト内検索窓
• ・ テストサイト（画像のみ複数画面）
• ・ 「IE11」でスクロール時に固定背景画像のカクつきを解消
• ・ スマホだけ電話リンク適用