WordpPress、css、PHP、javascript等のコーディング・プログラミング・WEB制作お役立ちブログ
新着記事
-
clip-pathで背景を好きな形に切り抜く方法：CSS
CSSのclip-pathで背景を好きな形に切り抜く方法をご紹介します。 DEMO clip-pathの書き方 例えばboxというclassの要素を上下斜めに切り抜きたい場合、 clip-pathは以下のように記述します […]
-
CSSアニメーション（animationプロパティ）徹底解説
CSSアニメーション「animation」タグの基本についてご紹介します。 例として今回はフェードインアニメーションを例に進めます。 フェードインのHTML＆CSS フェードインするコンテンツ 基本的にはkeyframe […]
-
makeshopのクリエイターモードでパンくずを実装する方法
makeshopのクリエイターモードでのパンくずリストの表示に少し手間取ってのでメモ。 カテゴリページのパンくずリストの表示 カテゴリページでは以下のようなコードでパンくずを表示します。 makeshopではTOPを取得 […]
-
ドラッグで左右の画像比較する方法：javascript
ドラッグで左右の画像比較ができるjavascriptをご紹介します。 WordPressのプラグインでいうと「Twenty20 Image Before-After」のような動きをjsのみで実装する方法です。 ビフォーア […]
-
WordPressのRSSフィードからアイキャッチ付きの記事一覧を取得する方法：PHP
PHPでWordPressのRSSフィードからアイキャッチ付きの記事一覧を取得する方法をご紹介します。 アイキャッチを取得するためのWordPress側での処理 WordPressの通常のフィードにはアイキャッチ情報が入 […]
-
記事の最初の見出しの前にコンテンツを追加する方法：WordPress
WordPressの記事の最初の見出しの前にコンテンツを追加する方法をご紹介します。 CTAコンテンツや、アドセンスを挿入したい場合に便利です。 functions.phpに追加する 以下のソースをfunctions.p […]
-
複数条件で要素をリアルタイムに絞り込み：jQuery
jQueryで、HTMLのdata属性に指定した値で要素を絞り込む方法をご紹介します。 DEMO jQueryの記述 HTML・CSSの準備 ポイントは、 まず、inputのname属性でdata-○○の部分と同じ名前を […]
-
複数モーダルウィンドウの中身をjsで出力する：jQuery
モーダルウィンドウをページ内に複数設置する際に、モーダルの中身をHTMLで1つずつ用意するとサイトが重くなったり管理が手間になりますので、共通部分の枠を用意し、個別のテキストや画像はjsから出力する方法をご紹介します。 […]
-
カスタムフィールドの値をプラグイン無しで検索対象に含める方法：WordPress
WordPressの検索でカスタムフィールドを検索対象にする方法をご紹介します。 プラグインの「Search Everything」でも同じことができますが、 今回はプラグイン無しの方法です。 WordPressのデフォ […]
-
よく使う正規表現の書き方まとめ：jQuery・javascript
フォームのエラーチェック等でよく使うjsの正規表現の書き方をまとめます。 正規表現のサンプル一覧 正規表現パターン 解説 /^[0-9]*$/ 半角数値のみ /^[a-zA-Z]*$/ 半角英字のみ /^[0-9a-zA […]
