javascript・jQuery コンテンツを縦横自在に無限スクロールさせる「infiniteslide.js v2」 画像やテキストといったコンテンツをスライドではなく無限スクロールで表示したい時は、jQueryプラグインの「」が便利です。 ここでは、「infiniteslide」をダウンロードするところから、実際にサイトに適用するまでの一連の流れを紹介していきます。 「infiniteslide」について 「infinitesl...
WordPress WordPressで要素を特定のページ限定で表示する際の記述 WordPressでは、特定のページでのみ処理を振り分ける関数が用意されています。 ここでは、それらの関数を用いて、について見ていきましょう。 特定のページ限定で処理を行う記述方法 トップページ限定で処理を行う記述 トップページ限定で処理を行う時は、 「」「」を使います。 「is_home」「is_front_p...
WordPress WordPressでアイキャッチ画像を追加できるようにする方法 WordPressでは、アイキャッチ画像を追加する機能がサポートとしてついています。 投稿スラッグを指定して「」を付与することで、指定した記事タイプでのアイキャッチ画像の登録ができるようになります。 function.php アイキャッチを追加するプログラム ...
WordPress メニューカスタマイザー機能の有効化とメニュー位置を追加する方法 WordPressでは、WEB初心者でも簡単にナビゲーションメニューをカスタマイズできるように、標準でが付与されています。 ただし、これは機能が最初から付いているだけなので、有効化を行わない限りはメニューカスタマイザーを利用することができません。 ここでは、メニューカスタマイザーを有効化して使えるようにする方法を紹...
css ハイクオリティなキャプションエフェクトをCSSで実装する方法 WEB制作の際によく実装する、使い勝手の良いキャプションエフェクトを紹介します。 これらのエフェクトはすべてCSSで実現可能です。 キャプションエフェクトサンプル マスクをかけるエフェクト キャプションをここに表示キャプションをここに表示キャプションをここに表示 HTML CSS マスクをかけた後にテキストを左か...
css PHPで動的に取得した値をCSSに反映させる方法 PHPで動的に取得した値をCSSに反映させたい時、そんな時は、PHPファイルにCSSを記述することで、CSSにPHP変数の値を埋め込んで動的に組み込ませることができます。 【STEP1】CSSをPHPファイルに記述する まずは適当にPHPファイルを作りましょう。 PHPで変数を定義し、echoでスタイルシートを出力し...
WordPress WordPressでカラーピッカー「wp-color-picker」を有効にする手順 WordPressでは、標準で「」というカラーピッカーが用意されています。 これを使うことにより、従来よりも簡単にカラーピッカーを使った値の設定ができるようになります。 実際にカラーピッカー「wp-color-picker」を使う手順は以下のとおりです。 【手順1】カラーピッカー定義用jsファイルを用意する カラー...
WordPress WordPressのカスタマイズでよく使う、パス取得メソッドについて WordPressでWEBサイトを作る上で、パスの取得メソッドを参照する機会がたくさんあります。 ここでは、よく使うサイトのURLやファイルパスを取得するパス取得メソッドについて見ていきましょう。 ページのアドレスを取得するパス取得メソッド トップページのURLを取得する 現在のページのURLを取得する 投稿者...
javascript・jQuery ページ内リンクをスムーススクロールで移動させる2ステップ ページ内リンクを使う時に一瞬でリンク先に飛んでしまうと、サイトのデザインコンセプトに合わない場合があります。 そんな時は、スクロール移動させると良いでしょう。 これができると、ふんわり優しいサイトデザインなら、ゆっくり優しくスクロール移動したり、ポップなデザインなら少しアップテンポにスクロール移動させたりと、デザイ...
WordPress プラグインを使わずにカスタムメニューを作成する方法 例えば、WEB運営者がHTMLやPHPに明るくなく、管理画面から値の設定を行いたい時があります。 そんな時に便利なのがカスタムメニューです。 カスタムメニューページを用意することで、よりWEB初心者でも更新しやすいCMSサイトが実現できます。 カスタムメニューを作る方法 カスタムメニューページのテンプレートを作る ...