東京・小金井市のWEB制作会社の豆知識

画像を多用することで遅くなっているWEBサイトの表示速度を「webP（ウェッピー）」を使って改善する方法をメモ。safari（サファリ）には対応していないので、今回はブラウザ判定を用いて対応。 「WebP(ウェッピー)」を使った画像圧縮の方法 画像データを WebP に変換 まずは使用画像（JPEG・PNG・GIF）をWebpに変換。「サルワカ道具箱」というサイトで一括変換できるのでこちらを利用 PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱 ブラウザに合わせて画像を表示 WebPはすべてのブラウザで対応しているわけではありません。全ブラウザで表示対応してしまうと、画像が見れなくなるものもあるため、ブラウザにあわせて表示画像を対応することが必要。今回は「.htaccess」による対応方法と「picture」タグによる対応方法の2種類を記載。htmlを変更する必要のない「.htaccess」を使用した方法の方が比較的早く実装が可能。 .htaccessによる切り替え対応 .htaccess <ifModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$ RewriteCond %{DOCUMENT_ROOT}%1.webp -f RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule> pictureタグによる切り替え対応 htmlの該当する項目を「<picture>」を使って実装。「<source>」を上から順に読み込み、条件に該当しなければ下のソースを読みこむため、非対応の場合は最下部の「<img>」を表示する。 HTML <picture> <source srcset="sample.webp" type="image/webp"/> <img src="sample.png" /> <picture> 実装の確認 <picture>方式であればHTMLのソースで、WebPフォーマットで配信されているかを確認ができるのですが、「.htaccess」を使用した場合は、ソースでの確認ができないため、Chromeの拡張機能「WebP Highlighter」を使用するのが分かりやすい。 WebP Highlighter 見ているページでWebPとして配信されている画像が蛍光色の枠で表示されます。 WebPと従来の画像を正しく振り分ける.htaccessファイルWebP 対応・導入WebP画像を目立たせるChrome拡張機能 WebP Highlighter

SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、jpgやpngのような画像(ビットマップデータ)ではなく、ベクター画像のフォーマットの一種。画像データと異なり、拡大縮小しても表示がぼやけることがなく、きれいに表示できる他、画質によってデータサイズが大きくなることもないので、ロゴや簡易的なアイコンなどの部分にも使われることが多いので使用方法をメモ。 SVG形式のファイルをHTMLで表示する方法 「img」タグを使用する。 一般的な画像と同様にHTMLのimgタグにSVG形式のファイルを読み込んで表示する方法。SVG形式で作成したデータをサーバーにアップロードして直接読み込み、CSSを使って大きさを調整します。 HTML <div class="svg__image"><img src="sample.svg" alt=""></div> CSS .svg__image img { width: auto; height: 60px; } IEにsvgを対応させる方法 IE11でsvgをimgタグで読み込んだ場合に、CSSのサイズが画像に適用されない現象が発生するため、下記を追記して対応。全ブラウザで読み込むと、今度は他の方に影響が出てしまうのでCSSハックを使って限定的に対応。 /* IE11にのみ適用される */ _:-ms-lang(x)::-ms-backdrop, .svg__image img[src$=".svg"] { width: auto; height: 100%; } 「svg」 タグを使う HTML内に（インラインで）直接svgタグでベクターパスを指定して描画する方法。イラストレータを使用して該当する素材をコードに変換し、HTMLに情報を記載します。 イラストレータで使用する画像を開き、ファイルメニューの「書き出し」から「svg」形式を選択して書き出す。この時に文字を使用する場合は「アウトライン」をかけておく。 書き出しボタンを押した直後に表示される「SVGオプション」で「インラインスタイル」を選択し、「コード」ボタンから該当コードをコピーしてHTMLに直接貼り付ける。 この時にアンドロイド携帯でも不具合なく表示されるように「viewBox」の値を参考に「svg」タグに「width」と「height」を追記で設定する。またclassやid、styleは不要であれば削除しても大丈夫。 HTML <div class="svg__image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.34 125.03" width="57.34" height="125.03"><path d="M302.34,355.91a9.74,9.74,0,1,1-9.74-9.74A9.74,9.74,0,0,1,302.34,355.91Z" transform="translate(-268.97 -333.95)"/><path d="M325.11,371.41a3.79,3.79,0,0,0-5.36.18l-10.54,10.33-7.59-8c-2.47-3.26-6.51-4.21-9.4-5.3-5.07-1.93-8.33-3.9-9.52-5.39l-4.37-6.8,1.33-18.07a3.79,3.79,0,1,0-7.46-1.31L269,356.92v0c0,.06,0,.13,0,.19a3.66,3.66,0,0,0,0,.66v0c0,.11,0,.23,0,.34a.41.41,0,0,0,0,.11,1.91,1.91,0,0,0,.06.33.5.5,0,0,0,0,.12,2,2,0,0,0,.1.35.29.29,0,0,0,0,.09,5,5,0,0,0,.38.85h0L276,371.71c2,3.4,6.09,8.84,6.34,11.89s-.64,10.51-1.22,14c-.52,3.14-1.1,9.19-1.64,10.94l-3.81,18.74-5.09,25a4.94,4.94,0,1,0,9.59,2.4l7.26-24.44,5.53-19.44c.59-1.85,2-1.7,2.36-.23l3,18.89,4,25.18a4.94,4.94,0,1,0,9.82-1.11L310.33,428,309,409c-.22-2.16-1.87-10-3.55-17.64l.35.36a4.36,4.36,0,0,0,6.33.21,14.09,14.09,0,0,0,1.25-1.21l11.9-13.91A3.79,3.79,0,0,0,325.11,371.41Z" transform="translate(-268.97 -333.95)"/></svg> </div> CSS .svg__image svg{ fill: #118b42; } 滝乃川学園採用ページ SVGは思ってたより怖くなかった。インラインSVGのススメ インラインSVGを使えば画像の色変更をCSSから楽にできる！ IE11でsvgをimageタグで読み込んだ場合にサイズが適用されない AndroidでSVGが正しく表示されていなかった問題を解決

「All in One SEO Pack」では専用の入力項目から各記事のタイトルタグを自由に設定できるのですが、いくつも記事を投稿した後で個別に変更していくのは大変ということで、一括でタイトルタグを変更した際に使用した方法をメモ。 function.php（PHP） add_filter( 'aioseop_title', 'changetitle'); function changetitle($title) { if ( is_single() ) { $categories = get_the_category($post->ID); $cat = $categories[0]; if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); } $title = get_the_title($ID).' | '.$cat-> cat_name.' | '.get_bloginfo('name'); } return trim( $title ); } 上記のコードを、使用しているテーマの「function.php」に追記。「add_filter」を使用して「All in One SEO Pack」内で使われている「aioseop_title」という関数にフックすることで、関数呼び出し時に追加で作成した関数が機能するように設定。今回は投稿記事のみということで「is_single()」の場合にのみ適応しています。

テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを設置するもの。ワードプレス等の便利なCMS仕様でリンクタグの設置も簡単に行えるようになってきて、使う機会は減ってきていましたが、意外と使う機会もあったのでメモ。 PHP $str; //対象のテキスト $pat = '/((http|https):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]+)/'; $replace = '<a href="$1" target="_blank">$1</a>'; $str = preg_replace($pat, $replace, $str);

jQueryを使用したページスクロールアクション（パララックス）の一つ。対象コンテンツの直前で、コンテンツ（ボタン）を左右交互にスライドインで表示させる方法のメモ。 HTML <section class="sample"> <ul class="sample__slide__list"> <li class="sample__slide__list__item"><a href="">リンクボタン01</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン02</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン03</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン04</a></li> </ul> </section> CSS .sample { overflow: hidden; } .sample__slide__list__item { width: 100%; background: rgba(0, 0, 0, 1); position: relative; z-index: 0; overflow: hidden; opacity: 0; } .sample__slide__list__item:nth-of-type(2n+1) { margin-left: 100vw; } .sample__slide__list__item:nth-of-type(2n) { margin-left: -100vw; } .sample__slide__list__item:nth-of-type(n+2) { margin-top: 1px; } .sample__slide__list__item::before { content: ""; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: -1; opacity: 0.77; } .sample__slide__list__item:nth-of-type(1)::before { background: #f00; } .sample__slide__list__item:nth-of-type(2)::before { background: #f00; } .sample__slide__list__item:nth-of-type(3)::before { background: #f00; } .sample__slide__list__item:nth-of-type(4)::before { background: #f00; } .sample__slide__list__item a { display: block; width: auto; padding: 40px 0; font-weight: bold; text-align: center; color: #fff; } 表示範囲の大枠を「overflow: hidden;」に設定することで、スマホでもレイアウトを崩すことなく表示できる。 Javascript $(window).scroll(function(){ var sH = window.innerHeight * 2 / 3; var offsetTop = $(window).scrollTop(); if(offsetTop > $('.sample').offset().top - sH){ $('.sample__slide__list__item').each(function(i){ //250ミリ秒×並び順（i番目）の待機後アニメーションを実行 $(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing'); }); } }) sHの値でファンクションのトリガー（発動位置）を設定。参考例は対象コンテンツの上位置から使用ブラウザの画面高さの2/3を引いた位置で設定。each関数で「sample__slide__list__item」の個数分、括弧内の処理を実行。delay関数はアニメーション実行までの待機時間。 サンプル .sample { overflow: hidden; } .sample__slide__list { } .sample__slide__list__item { width: 100%; background: rgba(0, 0, 0, 1); position: relative; z-index: 0; overflow: hidden; opacity: 0; } .sample__slide__list__item:nth-of-type(2n+1) { margin-left: 100vw; } .sample__slide__list__item:nth-of-type(2n) { margin-left: -100vw; } .sample__slide__list__item:nth-of-type(n+2) { margin-top: 1px; } .sample__slide__list__item::before { content: ""; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: -1; opacity: 0.77; } .sample__slide__list__item:nth-of-type(1)::before { background: #f00; } .sample__slide__list__item:nth-of-type(2)::before { background: #f00; } .sample__slide__list__item:nth-of-type(3)::before { background: #f00; } .sample__slide__list__item:nth-of-type(4)::before { background: #f00; } .sample__slide__list__item a { display: block; width: auto; padding: 40px 0; font-weight: bold; text-align: center; color: #fff; } リンクボタン01 リンクボタン02 リンクボタン03 リンクボタン04 $(window).scroll(function(){ var sH = window.innerHeight * 2 / 3; var offsetTop = $(window).scrollTop(); if(offsetTop > $('.sample').offset().top - sH){ $('.sample__slide__list__item').each(function(i){ $(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing'); }); } })

レンタルサービスのサイト制作に携わった際に使用した、jQuery用プラグイン「datepicker」を使ったカレンダーの実装方法をメモ。 datepicker導入の3つの手順 jQueryを利用するのに必要なcssとjsのURLを読み込む <!-- JQuery-uiのcss ※Datepickerにデザインを適用するために必要--> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- Datepicker日本語化のためのJavascriptをCDNで呼び出す--> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> cssのURL中のbaseが jQuery UI のテーマの名前で、ここを変えると見た目の色が変わる。テーマは ThemeRoller から選択可能。ページ左側の「 Gallaery 」タブから好みのテーマを選んで、テーマ名を小文字にして CSS のリンクに書く。テーマ名が「UI darkness」だったらui-darknessと記述。 inputタグを設置し、Datepickerを適応。 HTML <input type="text" name="○○○○" id="datepicker"> jQuery $(function(){ $('#datepicker').datepicker(); }); 選択範囲（不可日含む）をオプションで設定 jQuery $( function() { //選択不可日を記入 var holidays = ['20200921', '20200922']; $('#datepicker').datepicker({ //申込期日はツアー当日の3日前 minDate: '+3d', //本日から1ヶ月後以降の申込は受け付けない maxDate: '2m', dateFormat: 'yy/mm/dd', beforeShowDay: function (date) { var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2); if (holidays.indexOf(ymd) != -1) { //選択不可日の処理（前述[holidays]の設定日） return [false, 'ui-state-disabled']; } else if (date.getDay() == 0 || date.getDay() == 6) { //選択不可曜日の処理（日曜日・土曜日） return [false, 'ui-state-disabled']; } else { //選択可能日 return [true, '']; } } }); }); 用途に合わせて選択範囲をオプションで設定。上記は選択不可日と選択不可曜日、選択できる範囲の指定を行っている。 [jQuery UI] Datepicker の使い方とオプション【jQuery入門】Datepickerの使い方とオプション設定まとめ！jqueryuiのdatepickerで日曜・祝日を選択不可にする KARICO / 旅行用品のレンタルサービス

ホームページ制作をしていると、競合会社のサービスを参考にして構築を考えたい場合や、依頼元（相談元）の制作環境を確認するために、使用しているサーバーを確認する機会があります。そんな時にURLを入力するだけで使用サーバーを確認できるサービス（サイト）があるのでメモ。 aguse.jp: ウェブ調査 「aguse」を使ったサーバーの確認方法 URLを入力 入力項目に「調べたいサイトのURL」を入力し、「調べる」ボタンをクリック。 結果画面で該当項目を確認 詳細情報の「運営組織」の部分（赤枠部分）にサーバー会社の名前が出てくるので、そちらの会社のサービスを確認する。 余談ですが、怪しいサイトかどうかのチェックにも使えるようなので、気になるサイトがあれば試してみるのも良いかもしれません。 そのリンクちょっと待った！！ページを訪れる前に安全性をチェックできるサイト『aguse.jp』

電話番号を記載する際にPCの場合は番号の記載のみで問題ありませんが、スマートフォンの場合は直接電話を掛けることができるようにリンクを設置するのが親切。PCとスマートフォンでHTMLタグを別に記載する方法もありますが、記載漏れの無いように、今回はjQueryを使い自動でリンクを設置する方法をメモ。 HTML <div class="tel">○○○-○○○-○○○○</div> jQuery if($(window).width() < 560){ $('.tel').each(function(){ var str = $(this).text(); $(this).html('<a href="tel:'+str+'">'+str+'</a>'); }); } //実行結果 <div class="tel"><a href="tel:○○○-○○○-○○○○">○○○-○○○-○○○○</a></div> 「$(this).text」関数で対象となるタグ（例：class="tel"）の電話番号（テキスト情報）を取得。「$(this).html」関数を使って、もともとの記載のあった箇所にリンクを付与した電話番号を置き換えています。 「each」関数で繰り返し処理を行っているので、同ページに電話番号が複数ある場合でも可。冒頭のif文（場合分け）は画面サイズ（例：560px）を利用しています。 【jQuery】.text()と.html()の違い

フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリデーション（入力値のチェック）を行うが、簡易的なものは「filter_input」で行えるので実装方法をメモ。 filter_input (型 , 変数名, フィルタ, オプション); //例） $name= filter_input(INPUT_POST, 'title'); $email= filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); $id= filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT); 「型」の部分で、フィルタリングする対象の型を記載。型には、INPUT_GET、INPUT_POST、 INPUT_COOKIE、INPUT_SERVER、INPUT_ENV があり、それぞれスーパーグローバル変数に対応。 フィルタの種類 フィルタの部分は下記を参照。フィルタが未設定の場合には特にバリデートしない。 種類説明FILTER_VALIDATE_BOOLEAN1、true、on および yes の場合にTRUE、それ以外の場合にFALSEを返します。FILTER_VALIDATE_EMAIL値が妥当な e-mail アドレスであるかどうかを検証します。FILTER_VALIDATE_FLOAT値が float であるかどうかを検証し、オプションで指定された範囲にあるかを調べます。成功した場合は値を float に変換します。FILTER_VALIDATE_INT値が整数であるかどうか、オプションで指定した範囲内にあるかどうかを検証し、成功した場合は整数に変換します。FILTER_VALIDATE_IP値が IP アドレスであるかどうかを検証します。FILTER_VALIDATE_REGEXP値が、Perl 互換の正規表現regexpに一致するかどうかを検証します。FILTER_VALIDATE_MAC値が MAC アドレスであるかどうかを検証します。FILTER_VALIDATE_URL値が URL 形式であるかどうか、 オプションで、必須コンポーネントが含まれているかどうかを検証します。 上記のバリデーションの他、サニタイズ（特定の文字列の除去）も可能。詳細は下記のサイトで確認できます。 【PHP】filter_input を使って、文字列、論理値、配列を受け取ってみるphp filter_input POST や GET などの変数をフィルタリングするフィルタの型

レスポンシブ対応での作成がメインとなり、大きな画像を使う機会が増えてきています。本来であれば機種に合わせて画像を用意するのが良いのですが、数が多いと対応が難しい場合もあるので、PHPでリサイズする方法をメモ。 PHP（resize.php） //値を取得 $img_tmp = htmlspecialchars($_GET['img'], ENT_QUOTES, 'UTF-8'); //画像サイズを取得 $imgary = getimagesize($img_tmp); $srcwidth = $imgary[0]; $srcheight = $imgary[1]; $srctype = $imgary[2]; //リサイズサイズの設定 $newwidth = 200; $newheight = $srcheight * $newwidth / $srcwidth; // 加工前のファイルをフォーマット別に読み出す（今回はjpg、gif、pngのみ対応） switch ($srctype) { case 1: $original_image = imagecreatefromgif($img_tmp); break; case 2: $original_image = imagecreatefromjpeg($img_tmp); break; case 3: $original_image = imagecreatefrompng($img_tmp); break; default: echo('対応していないファイル形式です。: '.$srctype); exit(); } //元画像を縮小してコピー $newimage = imagecreatetruecolor($newwidth, $newheight); imagecopyresampled($newimage, $original_image, 0, 0, 0, 0, $newwidth, $newheight, $srcwidth, $srcheight); // コピーした画像を出力する switch ($srctype) { case 1: header('Content-type: image/gif'); imagegif($newimage); break; case 2: header('Content-type: image/jpeg'); imagejpeg($newimage); break; case 3: header('Content-type: image/png'); imagepng($newimage); break; default: exit(); } //リソースを解放 imagedestroy($original_image); imagedestroy($newimage); まずは「getimagesize」関数を使ってリサイズしたい画像の情報を取得。取得情報をもとにリサイズの設定を行ったら、次に「imagecopyresampled」関数で元画像を縮小コピー。最後は「imagejpeg」関数（jpegの場合）で出力。 実際にHTMLタグの中に組み込む場合は、下記のような使用方法になります。 HTML <figure><img src="resize.php?img=対象画像のURL"></figure>

動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース（MySQL）に保存しているが、バイナリデータに変換してMySQLに保存する方法をメモ。データベースの使用量は増えますが、動画ファイルに直接アクセスできなくなるので、右クリック等の不正ダウンロードは防げそうです。 「バイナリデータ」を使った保存方法 テーブルの作成 動画データを保存するための、テーブルを作成。この時、該当するカラムを「バイナリデータを扱える形式」で作成。 バイナリデータを扱うデータ型（BLOB型） BLOB型はバイナリデータを扱うデータ型。画像、動画、PDFファイルなどを保存する際はこちらの型式を使用。今回は「LONGBLOB」を使用しました。 型式最大長TINYBLOB255バイトBLOB(M)65,535バイトMEDIUMBLOB16,777,215バイトLONGBLOB4,294,967,295バイト 動画をバイナリ形式に変換してデータベースに保存 PHP（input_movie.php） //データベースへの接続 //MySOLホスト名 $host = '○○○○'; //データベース名 $dbname = '○○○○'; //データベースユーザー名 $username = '○○○○'; //データベースパスワード $pssword = '○○○○'; //文字コード設定 $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET 'utf8'"); // MySQLへの接続 $db = new PDO('mysql:host='.$host.'; dbname='.$dbname.'', $username, $pssword, $options); //フォームの入力値を取得 if ($_FILES['upfile']['name'] !== ''){ //ここにバリデーションチェックが入る（省略） //バイナリデータ変換処理 $raw_data = file_get_contents($_FILES['upfile']['tmp_name']); //データベースへの保存処理 $addsql = $db->prepare('INSERT INTO 動画を保存するテーブル名 (動画を保存するカラム名) VALUES(:movie)'); $addsql->bindParam(':movie', $raw_data, PDO::PARAM_STR); $addsql->execute(); } HTML <form action="input_movie.php" method="post" enctype="multipart/form-data"> <dl> <dt>動画ファイル</dt> <dd><input type="file" name="upfile"></dd> </dl> <form> 動画ファイルの呼び出し バイナリデータで保存されたデータはそのままの状態では動画ファイルとして呼び出せません。動画を再生させるためにはバイナリデータを再変換して表示します。 PHP（create_movie.php） $id = preg_replace('/[^0-9]/', '', $_GET['id']); $get_value_sql = $db->prepare('SELECT 動画を保存するカラム名 FROM 動画を保存するテーブル名 WHERE id = :id'); $get_value_sql->bindValue(':id', $id, PDO::PARAM_INT); $get_value_sql->execute(); while($row = $get_value_sql->fetch(PDO::FETCH_ASSOC)){ //今回は出力を「MP4形式」に限定しています。 header('Content-Type: video/mp4'); echo($row['動画を保存するカラム名']); } HTML <figure> <video width="100%" preload="none" onclick="this.play();" controls="" controlslist="nodownload"> <source src="create_movie.php?id=対象動画のID"> </video> </figure> MySQLに画像、動画、PDFを保存する時の型式は？PHPとMySQLを利用した画像・動画のアップロード・保存・表示

WordPress（ワードプレス）のプラグイン作成時にカスタム投稿を利用せず、独自のテーブルを作成する場合の実装方法をメモ。 PHP function create_tables(){ global $wpdb; $charset_collate = ""; $table_name = $wpdb->prefix . '○○○○'; // charsetを指定する $charset_collate = $wpdb->get_charset_collate(); // SQL文でテーブルを作る $sql = "CREATE TABLE {$table_name} ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) NOT NULL, memo text NOT NULL, del_flg int(11) NOT NULL, create_date datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (id) ) {$charset_collate} AUTO_INCREMENT=1;"; require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); dbDelta($sql); } // 有効にした時に引数で指定したファンクションを実行 register_activation_hook( __FILE__, 'create_tables' ); 「$table_name」の部分で、新規に追加するテーブル名を、「$sql」の部分に追加したいカラムの情報を記載する。※データベースを複数追加する場合は「SQL文（$sql）」と「dbDelta(○○○○)」を必要な数分記載。 参考までに、プラグイン停止時、または削除時にアクションを実行したい場合は下記の関数を使用。 PHP // 停止した時に引数で指定したファンクションを実行 register_deactivation_hook(__FILE__, $function); // アンインストールした時に引数で指定したファンクションを実行 register_uninstall_hook(__FILE__, $function); //例：アンインストール時に前述のテーブルを削除する場合 function delete_table(){ global $wpdb; $table_name = $wpdb->prefix.'○○○○'; $sql = 'DROP TABLE '.$table_name; $wpdb->query($sql); } register_uninstall_hook( __FILE__, 'delete_table' ); WordPressのプラグインでデータベースを作成・削除・アップデートする方法 プラグインでデータベーステーブルを作る

サイト全体に大きく画像を表示する表現がメインになり、見やすくて印象的なサイトが増えてきた半面、使用画像のファイルサイズが大きくなり表示スピードが遅くなることも。そんな中、画像の画質を下げずに画像サイズを圧縮できるサイトがあるのでメモ。 TinyPNG – Compress PNG images while preserving transparency 「TinyPNG」を使った画像圧縮の方法 圧縮したい画像をセット 圧縮変換したい画像を選択して中央のエリア（赤枠部分）にドラッグ。「gif」画像は対象外となります。 圧縮後のファイルをダウンロード 画像をセットすると、自動で画像の圧縮処理が始まるので、完了後にファイルをダウンロード。個別のダウンロードのほか、ドロップボックスにも保存できます。 尚、無料版は一度に変換できるサイズとファイル数に制限があるため、多くの画像を一度に変換したい場合は有料版にするのもおすすめです。 他にもあります。優良な画像圧縮サービス 上記サイトの他にも、JPEGとPNGの両方に対応し、最大50MBの画像を圧縮できるWEBサービスを教えていただきましたので合わせてご紹介。 PNG圧縮ツール│無料でPNG・JPGを最大80%圧縮 使い方は「TinyPNG」同様、ファイルを選択して指定の枠にドラックするだけですので、用途に合わせて使いやすい方をご利用ください。

HTMLファイルを外部読み込する必要がある場合などで、不要なタグを削除して読み込みたい時に指定のタグを削除して取り込む方法をメモ。 PHP $html = ' <html> <head> <meta charset="UTF-8"> <title>東京都小金井市のホームページ制作会社｜株式会社衆</title> <meta name="description" content="東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップでホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。メールまたはお電話にてお問合せください。"> <link rel="canonical" href="https://web.syu-u.com/"> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/sp.css" rel="stylesheet" type="text/css"> <script src="//kit.fontawesome.com/c985baa937.js" crossorigin="anonymous"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "WebPage", "name" : "東京都小金井市のホームページ制作会社｜株式会社衆", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップでホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。メールまたはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" } </script> </head> <body> <aside class="contactArea"> <h2 class="heading">まずはお気軽にお問い合わせを。</h2> <div>ホームページ制作に関する質問・ご相談は下記の電話番号または、お問い合わせフォーム（24時間受付中）より受け付けております。<br> ご相談だけでも構いません。まずはお気軽にお問い合わせください。</div> <div class="tel en icon-tel"><span>042-316-1895</span></div> <div class="time">電話受付　10：00～17：00（平日のみ）</div> <div class="btnMore"><a href="/contact/">お問い合わせフォーム</a></div> </aside> </body> </html> '; $ary = array('/<script.*?>.*?<\/script>/is', '/<link.*?>/', '/<div>.*?<\/div>/is'); $html = preg_replace($ary, '', $html); //実行結果 <html> <head> <meta charset="UTF-8"> <title>東京都小金井市のホームページ制作会社｜株式会社衆</title> <meta name="description" content="東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップでホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。メールまたはお電話にてお問合せください。"> </head> <body> <aside class="contactArea"> <h2 class="heading">まずはお気軽にお問い合わせを。</h2> <div class="tel en icon-tel"><span>042-316-1895</span></div> <div class="time">電話受付　10：00～17：00（平日のみ）</div> <div class="btnMore"><a href="/contact/">お問い合わせフォーム</a></div </aside> </body> </html> 参考例は当サイトのトップページのソースの一部。今回の指定では<script>タグ関連のプログラム、<link>タグ、<div>タグの項目はクラス設定の無いもののみ削除されています。divタグにクラスを含めたものを削除する場合は「<div.*?>.*?<\/div>/is」にする。※設定のあるもの、無いものの両方を指定する場合は、両方の記載をする。 今回使用しているパターン（修飾）に関する説明は下記を参照。 パターン修飾子 パターン説明i大文字にも小文字にもマッチするs改行、改行コードを無視してマッチする パターン パターン説明.任意の一文字*前の文字を0個以上繰り返し?後の指定文字が来るまで最小マッチ PHP 正規表現 メモ

「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。アクセスすたびに画像の表示順序が変わるので、コンテンツが単調になりにくく、また一点づつ表示されるので、一度に全ての商品を見せるよりも印象付けることができる。 HTML <ul class="mainimage__list"> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> </ul> jQuery var $list = $('.mainimage__list__item'); var showlist = []; $list.each(function(i) { showlist.push(i); }); showlist.sort(function() { return Math.random() - Math.random(); }); $('.mainimage__list__item').css({opacity:0}); $list.css({opacity: 0}).each(function(i){ $(this).delay(showlist[i] * 500) .animate({opacity: 1}, 500); }); 「each」を使用して、表示する画像のリスト（通し番号）を配列に保存。保存した配列を「sort」を使ってランダムに入れ替える。入れ替えの完了した配列を「animate」を使って表示。表示までの待ち時間は「delay」で指定。 要素をランダムに並び替える 高品質法人印鑑セットを特別価格でご案内｜東洋堂

バリデーションチェックで添付されたファイル情報を取得する際に、便利な「pathinfo」関数の使い方をメモ。 PHP pathinfo('ファイル名、またはURL') 例） $info = pathinfo('https://web.syu-u.com/sample/sample.php'); print_r($info); 結果） Array ( [dirname] => https://web.syu-u.com/sample [basename] => sample.php [extension] => php [filename] => sample ) キー名内容dirnameファイル名を除くディレクトリパスbasenameディレクトリパスを除くファイル名extension引数で指定したファイル名の拡張子filename引数で指定したファイル名の拡張子を除いたファイル名 sample //動画ファイルをアップロードする際のバリデーション例（mp4） if(!empty($_FILES['file']['name'])){ $info = pathinfo($_FILES['file']['name']); $extension = $info['extension']; if($extension == 'mp4' || $extension == 'MP4'){ //次の処理 }else{ exit(); } } 【PHP入門】pathinfo関数を使って拡張子名やファイル名を簡単取得

WordPress（ワードプレス）を使用してホームページの制作を行う際、全てのページを同一ディレクトリ内（ワードプレス内）で作成することが多いのですが、場合によっては新着情報のみをワードプレスで作成し、固定ページを外部ディレクトリで作成する場合もあったりします。そんな時に、ヘッダー部分などをPHPをつかって共有する方法をメモ。 PHP require_once ('./wp-blog-header.php'); ワードプレス内の「wp-blog-header.php」を使用したいファイルで読み込むだけ。テーマファイルを読み込む必要がない場合は「wp-load.php」でも良いです。 WordPressのテンプレートタグやデータベースの情報を外部ファイルから利用する

youtube動画をホームページに掲載する機会も増えてきました。動画サイズを固定するのであれば、埋め込みタグの幅（width）と高さ（height）を適切に変更すればよいのですが、レスポンシブ対応したい場合は自動的に取得する仕組みが必要。そこでCSSのみで実装可能な方法をメモ。 HTML youtubeの埋め込みより取得したコードの「幅（width）と高さ（height）」を指定する部分を削除して設置。 <div class="movie__youtube"> <div class="movie__youtube__frame"> <iframe src="https://www.youtube.com/embed/○○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> CSS .movie__youtube { width: 1200px; margin: 0 auto; } .movie__youtube__frame { position: relative; width: 100%; height: 0px; padding-top: 56.25%;　//縦横比が16：9の場合 } .movie__youtube__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 「.movie__youtube__frame」で設定している「padding-top: 56.25%;」の部分で自動取得が行わる。※「padding-top」や「padding-bottom」の%指定は親ブロックの幅が基準になる。 新生テクノス株式会社採用ページ

カスタム投稿タイプは、独立したコンテンツを作りたい場合に便利なワードプレスの追加機能。Wordpress（ワードプレス）を長く使用していると一般的な投稿（お知らせ・新着情報）以外にも実績やお役立ち情報など、一般投稿とは切り分けたコンテンツの投稿が必要となる場合がある。投稿カテゴリーを使って、投稿を切り分けるのもできるが、管理画面が一目でわかりにくいので、今回はカスタム投稿タイプを使って独自の投稿機能を設ける方法をメモ。 functions.php // カスタム投稿タイプの追加 add_action('init', 'create_post_type' ); function create_post_type(){ register_post_type('test', // 投稿タイプ名の定義 array( 'labels' => array( 'name' => __( '独自コンテンツ' ), // 表示する投稿タイプ名 'singular_name' => __( '独自コンテンツ' ) ), 'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'excerpt', 'author', 'trackbacks', 'comments', 'revisions', 'page-attributes' ), 'public' => true, 'menu_position' =>5, 'has_archive' => true, 'show_in_rest' => true, /* グーテンベルクを有効 */ ) ); //カテゴリタイプの設定（カスタムタクソノミーの設定） register_taxonomy( 'testcat', //カテゴリー名（任意） 'test', //カスタム投稿名 array( 'hierarchical' => true, 'update_count_callback' => '_update_post_term_count', 'label' => '独自コンテンツのカテゴリー', //表示させる名前 'public' => true, 'show_ui' => true, 'show_in_rest' => true, ) ); //タグタイプの設定（カスタムタクソノミーの設定） register_taxonomy( 'testtag', //タグ名（任意） 'test', //カスタム投稿名 array( 'hierarchical' => false, 'update_count_callback' => '_update_post_term_count', 'label' => '独自コンテンツのタグ', //表示させる名前 'public' => true, 'show_ui' => true, 'show_in_rest' => true, ) ); } カスタム投稿の追加の仕方と、具体的な使用例 WordPressのGutenbergにおけるカスタム投稿タイプでカテゴリー一覧が表示されない場合 カスタム投稿タイプの表示側、管理画面側のいろいろをカスタマイズする カスタム投稿タイプの設定

画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img」タグに一行追加するだけで縦横比を変えずに簡単に実装できる方法があったのでメモ。 CSS img { width: 100%; height: 100%; object-fit: cover; } 上記の「object-fit」プロパティーを指定の「img」に追加するだけ。幅と高さは親要素で設定していない場合は指定する。 「object-fit」プロパティーで使える値 値説明fill（初期値）表示枠内を満たすように縦横比を変えながらリサイズ。cover縦横比を保持して表示枠いっぱいにリサイズ。縦横のうち小さい方を基準にして自動的にリサイズし、表示枠からはみ出した部分はトリミングされる。contain縦横比を保持し、表示枠に収まるようにリサイズ。幅と高さのうち大きい方のサイズに合わせて比率を保持して表示枠にフィット。（不足部分は余白が発生）noneリサイズせず、そのまま表示。scale-downnone と contain のうち、小さい方のサイズに合わせて表示。 上記の設定の場合の場合、画像はデフォルトで中央に配置されます。画像の中でフォーカスしたいポイントが中央にある場合にはよいですが、そうでない場合は「object-position」を使用します。初期値は、object-position: 50% 50% でセンター配置。 0% 0%は左上、0% 100%は左下、100% 0%は右下、100% 100%は右下配置となります。 CSS object-position: 左位置 上位置; img { width: 100%; height: 100%; object-fit: contain; object-position: 0px 0px; } 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックスobject-position－CSS3リファレンス IEにobject-fitを対応させる方法 便利な「object-fit」ですが、IEには対応していません。既に公式でのサポートもなくなり、対応が不要なところも多い中、一部の企業では対応が求められることもあるので、対応方法を記載。 ofi.min.jsの読み込み GitHubで公開されている「object-fit-images」をダウンロードし、HTMLのhead内に「ofi.min.js」を読み込みます。ダウンロードが面倒な場合はCDNの用意もあります。 GitHub object-fit-images HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script> スクリプトの実行を行う object-fitを使いたいページで関数を呼び出し、実行します。 jOuery $(function(){ objectFitImages(); }); IE用のCSSを追記 CSSファイルで、object-fitを使用したいセレクターに「font-family: ‘object-fit: 属性値;’; 」を追記する。 CSS object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ object-fit: contain; font-family: 'object-fit: contain;'; /*IE対策*/ CSSプロパティ【object-fit】をIEに対応させる方法IE･Edgeをobject-fitに対応させる（WordPress編）

Wordpress（ワードプレス）のカスタマイズ時にテンプレートにコードを直書きするのでも表示はできるのだけれど、投稿や固定ページで自由に組み合わせて流用したい場合に「ショートコード（例：[shortcode]）」を作成しておくと便利だったので作成方法をメモ。 function.php 下記のコードを「function.php」に追加。利用目的に合わせて属性を付与したり、しなかったりする。 shortcode_atts( ショートコード名 , 属性（任意）, 使用するファンクション ); 属性の無いショートコード（[test]）の場合 投稿（固定ページ）の編集画面でソースブロックを選択後、[test]と記載することで設定された文字が表示できる。 function display_func() { return 'ショートコード[test]の中身が表示される'; } add_shortcode('test', 'display_func'); 属性があるショートコード（[test value1=○○○○]）の場合 ○○○○の部分に文字を入れることで、表示内容を都度変更して表示できる。設定の無い場合は初期値を表示。 function display_func( $atts ) { $atts = shortcode_atts( array( 'value1' => 'value1の初期値', ), $atts, 'test' ); return 'ショートコード[test]の'.$atts['value1'].'が表示される'; } add_shortcode( 'test', 'display_func' ); 属性が複数のショートコード（[test value1=○○○○ value2=○○○○]）の場合 function display_func( $atts ) { $atts = shortcode_atts( array( 'value1' => 'value1の初期値', 'value2' => 'value2の初期値', ), $atts, 'test' ); return 'ショートコード[test]の'.$atts['value1'].'と'.$atts['value2'].'が表示される'; } add_shortcode( 'test', 'display_func' ); PHP（呼び出し時） <?php echo do_shortcode('[test value1=○○○○ value2=○○○○]'); ?> 投稿機能よりブロック要素（ショートコード）を設置して記載する場合は「[test value1=○○○○ value2=○○○○]」で問題ないが、各種PHPファイルに直書きする場合は上記方法を使用 ショートコード API - WordPress Codex 日本語版

Wordpress(ワードプレス)の開発時にセッションを利用することがあるが、初期状態ではセッションを認識してくれないので、設定方法をメモ。 function.php（php） function init_session_start(){ session_start(); } add_action('send_headers', 'init_session_start'); 上記コードを「functions.php」に追記。一般的にセッション開始の関数は最上部に表示する必要があるが、こちらの関数はファイル内であれば、どの位置に記載していても有効となる。

ログインキーなど一時的なデータの保存にはセッション（$_SESSION）を使うことが多いのだけれれど、広告コードのような長期間参照元データが保持できるシステムを開発した際にはクッキー（$_COOKIE）が便利だったので使用方法をメモ。 クッキーの保存 PHP setcookie(クッキー名, 保存したい値, 有効期限); クッキーを使用するには、まず、クッキーを保存することが必要。上記関数で「保存したい値」を指定のクッキー（クッキー名）に保存。有効期限はタイムスタンプで指定。例えば、下記では有効期限を60日後にしています。 setcookie('agency_code', 'getcode', time()+60*60*24*60); クッキーの取得 PHP $_COOKIE[クッキー名] クッキーの削除 PHP setcookie(クッキー名 , '', time()-100); クッキーの削除も「setcookie」を使用。保存時と違うのは有効期限を現在より前に設定すること。

HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりということが多いので、ｎ番目の要素（タグ）を取得できる便利なCSSの疑似クラスをメモ。 ｎ番目系の疑似クラス n番目系の疑似クラスは大きく分けて「-child」と「-of-type」の2種類の系統に分類できる。「i」の部分に整数値、odd（奇数）、even（偶数）、式（例：2n＋1）を指定可能。数値は親要素からの値になる。 種類-child-of-type最初:first-child:first-of-type最後:last-child:last-of-typei番目:nth-child(i):nth-of-type(i)後ろからi番目:nth-last-child(i):nth-last-of-type(i)１個だけ:only-child:only-of-typei番目以降:nth-child(n+i):nth-of-type(n+i)i番目以前:nth-child(-n+i):nth-of-type(-n+i)最後からi個:nth-last-child(-n+i):nth-last-of-type(-n+i)最後からi番目以前:nth-last-child(n+i):nth-last-of-type(n+i) 「-child」と「-of-type」の違い 「-child」と「-of-type」の違いはカウントの対象となる子要素の違い。「-child」は全部の子要素が対象になるのに対して、「-of-type」は子要素の中でも指定した要素のみがカウントの対象となる。 <div class="parents"> <div>兄</div> <div>自分</div> <p>1番目の弟</p> <p>2番目の弟</p> <p>3番目の弟</p> <div> <style> /*1番目の弟が指定される*/ p:nth-child(3) { color: #f00; } /*3番目の弟が指定される*/ p:nth-of-type(3) { color: #00f; } </style> その他のセレクタ 種類例隣の要素h3+p[class]や[href][src]など指定した属性p[class]属性内容の“一部”が一致p[class*="○○○○"]属性内容の“始め”が一致p[class^="○○○○"]属性内容の“最後”が一致p[class$="○○○○"]文章の一行目p::first-line要素が空の時ul:empty CSSのnth-childとnth-of-typeについて基本から学ぼう何番目系の便利なCSSまとめ

PC、スマホともにフリック（ドラッグ）できる自動送り式のイメージスライダーを実装した時のソースをメモ。idを取得して、id毎に作動するのでページ内にいくつでも設置可能。 HTML <figure class="imageslider" id="areai_d"> <div class="imageslider__frame"> <ul class="imageslider__frame__slides"> <li><img src="画像URL" ondragstart="return false"></li> <li><img src="画像URL" ondragstart="return false"></li> <li><img src="画像URL" ondragstart="return false"></li> </ul> </div> <nav class="imageslider__nav"> <ol> </ol> </nav> </figure> 「ondragstart」属性の設定は「firefox」対策。 CSS .imageslider .imageslider__frame { width: 100%; height: -webkit-calc(100% - 40px) ; height: calc(100% - 40px) ; position: relative; overflow: hidden; } .imageslider .imageslider__frame .imageslider__frame__slides { display: -webkit-flex; display: flex; } .imageslider .imageslider__frame .imageslider__frame__slides li img { width: 100%; height: 100%; object-fit: cover; } .imageslider .imageslider__nav { margin: 25px 0 0; } .imageslider .imageslider__nav ol { display: -webkit-flex; display: flex; } .imageslider .imageslider__nav li { width: 65px; margin: 0 5px; } .imageslider .imageslider__nav li a { background: #eee; width: auto; height: 15px; display: block; } .imageslider .imageslider__nav li a.active { background: #916f22; } jQuery var target = []; var size = []; var divFW = []; var startMargin = []; var listblock = []; var listposition = []; var listpositionmax = []; var leftposition = []; for(i = 0; i < $('.imageslider').length; i++){ target[i] =$('.imageslider').eq(i).attr('id'); size[target[i]] = $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides li').length; divFW[target[i]] = $('#'+target[i]+' .imageslider__frame').width(); startMargin[target[i]] = size[target[i]]*divFW[target[i]]; $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides').css({'width':size[target[i]]*divFW[target[i]]*3+'px', 'margin-left':'-'+startMargin[target[i]]+'px'}); $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides li').css({'width':divFW[target[i]]+'px'}); listblock[i] = $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides').find('li'); listblock[i].clone().appendTo('#'+target[i]+' .imageslider__frame .imageslider__frame__slides'); listblock[i].clone().prependTo('#'+target[i]+' .imageslider__frame .imageslider__frame__slides'); var li = []; for (var j = 0; j < size[target[i]]; j++){ li.push('<li><a href=""></a></li>'); } $('#'+target[i]+' .imageslider__nav ol').html(li); $('#'+target[i]+' .imageslider__nav ol li:first-of-type a').addClass('active'); listposition[target[i]] = 0 + startMargin[target[i]]; listpositionmax[target[i]] = divFW[target[i]]*(size[target[i]]-1) + startMargin[target[i]]; } $('.imageslider__nav li a').click(function(){ var id = $(this).parents('.imageslider').attr('id'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $(this).addClass('active'); var index = $(this).parent('li').index(); $('#'+id+' .imageslider__frame__slides').animate({'margin-left':startMargin[id]*(-1)-index*divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = Number(index*divFW[id]); return false; }); //PCでのマウス操作 if($(window).width() > 980){ $('.imageslider .imageslider__frame__slides').mousedown(function(e){ this.touchX = event.pageX; this.slideX = $(this).position().left; $('.imageslider .imageslider__frame__slides').mousemove(function(e){ e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.pageX ); $(this).css({left:this.slideX}); this.accel = (event.pageX - this.touchX) * 5; this.touchX = event.pageX; }); }).mouseup(function(e){ var id = $(this).parents('.imageslider').attr('id'); edge = this.slideX % divFW[id]; leftposition[id] = parseInt($('#'+id+' .imageslider__frame__slides').css('margin-left'),10)*(-1); if(edge <= 0){ if(leftposition[id] < listpositionmax[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]+divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.next a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('next'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+startMargin[id]+'px'}); }); listposition[id] = 0+startMargin[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:first-of-type a').addClass('active'); } return false; }else{ if(leftposition[id] > 0 + startMargin[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]-divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').prev().addClass('prev'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.prev a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('prev'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+listpositionmax[id]+'px'}); listposition[id] = listpositionmax[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:last-of-type a').addClass('active'); }); } return false; } $('.imageslider .imageslider__frame__slides').off("mousemove"); }); }else{ //スマホでのフリック操作 $('.imageslider .imageslider__frame__slides').bind({ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; }, 'touchmove': function(e) { e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); $(this).css({left:this.slideX}); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, 'touchend': function(e){ var id = $(this).parents('.imageslider').attr('id'); edge = this.slideX % divFW[id]; leftposition[id] = parseInt($('#'+id+' .imageslider__frame__slides').css('margin-left'),10)*(-1); if(edge <= 0){ if(leftposition[id] < listpositionmax[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]+divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.next a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('next'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+startMargin[id]+'px'}); }); listposition[id] = 0+startMargin[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:first-of-type a').addClass('active'); } return false; }else{ if(leftposition[id] > 0 + startMargin[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]-divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').prev().addClass('prev'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.prev a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('prev'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+listpositionmax[id]+'px'}); listposition[id] = listpositionmax[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:last-of-type a').addClass('active'); }); } return false; } } }); } //自動スライド処理 setInterval(function(){ for(i = 0; i < $('.imageslider').length; i++){ target[i] =$('.imageslider').eq(i).attr('id'); if(listposition[target[i]] < listpositionmax[target[i]]){ $('#'+target[i]+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[target[i]]+'px'}, 'slow', 'swing'); listposition[target[i]] = listposition[target[i]]+divFW[target[i]]; $('#'+target[i]+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+target[i]+' .imageslider__nav li a').removeClass('active'); if($('#'+target[i]+' .imageslider__nav li.next').length > 0){ $('#'+target[i]+' .imageslider__nav li.next a').addClass('active'); $('#'+target[i]+' .imageslider__nav li').removeClass('next'); }else{ $('#'+target[i]+' .imageslider__nav li:first-of-type a').addClass('active'); } }else{ $('#'+target[i]+' .imageslider__frame__slides').css({'margin-left':'-'+Number(startMargin[target[i]]-divFW[target[i]])+'px'}).animate({'margin-left':'-='+divFW[target[i]]+'px'}, 'slow', 'swing'); listposition[target[i]] = 0+startMargin[target[i]]; $('#'+target[i]+' .imageslider__nav ol li a').removeClass('active'); $('#'+target[i]+' .imageslider__nav ol li:first-of-type a').addClass('active'); } } }, 5000); //数字は時間設定5000=5秒 【コピペで30秒!!】超簡単！マウスでフリックをレスポンシブ対応でお手軽実装！

wordpress（ワードプレス）の投稿記事を別サイト（同一ドメイン）で読み込みで表示したという相談があった際にjQueryのみで実装した方法をメモ。 HTML <ul id="feedList"></ul> jQuery $(function(){ $.ajax({ url: 'rssのURL', cache: false, dataType:"xml", success: function(xml){ $(xml).find('item').each(function(){ var title = $(this).find('title').text(); var url = $(this).find('link').attr('href'); $('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList'); }); } }); }); 外部ドメイン（クロスドメイン）のRSSを読み込む場合 外部ドメインのRSSを読み込む際は、セキュリティの関係で ajax では同一ドメインのファイルとしか通信できない制限があるため、別でPHPファイルを用いて実装が必要。 rss.php（PHP） $url = 'rssのURL'; $xml = file_get_contents($url); header('Content-type: application/xml; charset=UTF-8'); print $xml; 上記の内容で作成したファイルを、jqueryの「url」の値として読み込みます例では『rss.php』としてます。 jQuery $(function(){ $.ajax({ url: 'rss.php', cache: false, dataType:"xml", success: function(xml){ $(xml).find('item').each(function(){ var title = $(this).find('title').text(); var url = $(this).find('link').attr('href'); $('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList'); }); } }); }); RSSをJSのみで表示させる | 福島県郡山市のホームページ制作、Web制作　Kyasper Web Design キャスパーウェブデザイン【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。

jQueryで一定の要素を基準に、上の下層や下の階層の値を取得したり、クラスを変更したりする場合が多くあるので、その際の対象の取得方法をメモ。 取得する対象要素は基準要素と比較して、親子・兄弟要素として設定される。兄弟要素とは基準要素と比較して並列階層の要素、親・先祖要素は上の階層、子・孫（子孫）要素は下の階層の要素になる。 関数説明parents()親要素+先祖要素（上位階層の全親要素）を取得parent()1階層上の親要素を取得prev()前の兄弟要素（兄）を取得prevAll()前の全ての兄弟要素（全兄）を取得next()後の兄弟要素（弟）を取得nextAll()後の全ての兄弟要素（全弟）を取得children()子要素を取得find()子要素+孫要素（子孫要素全て）を取得 HTML <div>先祖要素 <div>親要素 <div>兄要素A</div> <div>兄要素B</div> <div>自分 <div>子要素A</div> <div>子要素B <div>孫要素A</div> <div>孫要素B</div> </div> </div> <div>弟要素A</div> <div>弟要素B</div> </div> </div> jQuery-親要素・子要素・兄弟要素を取得する

表示する画面幅に合わせて可変するデザインを制作する際に「display:flex」を使ってレイアウトすることが多いが、配置した要素に余白を確保したい場合など必要以上にHTMLタグの生成が必要となる場合がある。ここで「calc」を使うとを前述のHTMLタグの生成を抑えることができる場合もあるため使い方をメモ。flexの使い方が知りたい方はページ下部 「関連ページ」を参照 CSS .sample { width : -webkit-calc(100% - 30px) ; width : calc(100% - 30px) ; } 使用できる計算式 計算式説明使用例+加算calc(100% + 30px)-減算calc(100% - 30px)*乗算（引数の1つは数量にする）calc(100% * 3)/除算（右の引数は数量にする）calc(100% / 3) 複数の計算式を兼用することも可能。計算式内に括弧（）を使うことで一般的な数式と同様に計算することが可能。「px」「%」以外に「vw（vh）」、「em（rem）」にも使える。 .sample { width : -webkit-calc(((100% - 40px) / 3 ) * 0.5 + 5px); width : calc(((100% - 40px) / 3 ) * 0.5 + 5px); } CSSで計算式を可能にするcalc()ファンクション 関連ページ CSS「display:flex」で「clearfix」を使わずに要素を並べる。

wordpress（ワードプレス）を使ってテーマを自作した際に使用した、最低限知っておきたい基本的な内容をメモ。 wordpress（ワードプレス）を使ったホームページの作成 まず「テーマ」のファイルを収納するフォルダを作成。そのフォルダの中に、必要に応じてファイルを新規に作成。今回、制作に必要となったファイルは下記。記事の一覧とトップページを兼用しているほか、投稿ページと固定ページのデザインは同じものを流用している。 style.css　//テーマの設定に必須header.php　//外部読み込み用共通ファイルside.php　 //外部読み込み用共通ファイル footer.php　 //外部読み込み用共通ファイル function.php　//機能の追加に必要index.hpsingle.php（page.php） テンプレートファイルの優先順位 Wordpress（ワードプレス）では、ページの種類ごとに、使うテンプレートファイルの優先順位があり、該当ファイルがない場合は時点のファイルを使うようにできている。「index.php」は最も優先順位が低いが、全ての種類のページに対しての最終手段として使われるため、「index.php」があればテーマとして成立する。 ページの種類 優先順位1 優先順位2 優先順位3トップページhome.php index.php アーカイブページcategory.php archive.php index.php 投稿ページsingle.php index.php 固定ページ page.php index.php 404ページ 404.php index.php 分岐タグ Wordpress（ワードプレス）では、 同一のテンプレートファイルを兼用してもデザインを変更できるよう、分岐タグの準備がある。「index.php」は全ての種類のページとして使用できるので、条件分岐タグを用いることで、ページ分のテンプレートファイルを用意しなくてもページデザインを切り替えることも可能。 ページの種類条件分岐タグトップページis_home()カテゴリー別アーカイブページis_category(), is_archive()タグ別アーカイブページis_tag(), is_archive()投稿日別アーカイブページis_date(), is_archive()月別アーカイブページis_month(), is_date(), is_archive()年別アーカイブページis_year(), is_date(), is_archive()検索結果ページis_search()投稿ページis_single()固定ページis_page()404ページis_404() CSS @charset "utf-8"; /* Theme Name: テーマの名前 Theme URI: http://web.syu-u.com Description: テーマの説明文 Version: 2.0　テーマのバージョン Author: syu　制作者 Author URI: https://web.syu-u.com　制作者のホームページ */ @import url('./pc.css'); @import url('./sp.css'); バージョンの数値はアップデートの際に更新の判断材料となる。更新の必要があると表示される場合は数値を大きくすることで回避できる。 header.php <!DOCTYPE HTML> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <meta name="keywords" content="<?php bloginfo( 'description' ); ?>"> <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script language="javascript" src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> <?php wp_head(); ?> <body <?php body_class(); ?>> <header class="header animated fadeIn headerleft"> <div id="inner-header"> <div id="logo"> <?php if(is_home()): ?> <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1> <?php else: ?> <a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a> <?php endif; ?> </div> <div id="g_nav"> <div class="btnClose"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_close.png" width="100%"></a></div> <?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'header__nav', 'theme_location' => 'header__nav' ) ); ?> </div> <div class="btnMenu"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_menu.png" width="100%"></a></div> </div> </header> footer.php <footer> <div class="footer__inner"> <div class="footer__widget_area"> <?php dynamic_sidebar( 'footer-widget' ); ?> </div> <?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'footer__nav', 'theme_location' => 'footer__nav' ) ); ?> <small class="copyright">Copyright<?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>" rel="nofollow"><?php bloginfo( 'name' ); ?></a>.All Rights Reserved.</small> </div> </footer> <?php wp_footer(); ?> </body> </html> sidebar.php <div id="side"> <div class="side__widget_area"> <?php dynamic_sidebar( 'side-widget' ); ?> </div> </div> index.php <?php get_header(); ?> <?php if(is_home()): ?> <figure class="mainimage" style="background: url('<?php header_image(); ?>') center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; "> <hgroup> <h2><img src="<?php echo get_template_directory_uri(); ?>/images/common/title.png" width="100%" alt="<?php bloginfo('name'); ?>"></h2> </hgroup> </figure> <?php else: ?> <?php breadcrumb(); ?> <?php endif; ?> <div class="wrap"> <main class="main"> <ul class="post-list"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li class="post"> <a href="<?php the_permalink() ?>"> <figure class="eyecatch"> <?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?> <span class="cat-name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span> </figure> <section class="entry-content"> <h2 class="entry-title"><?php the_title(); ?></h2> <p class="entry-meta"><?php the_time('Y.m.j') ?></p> <div class="description"><p> <?php if(mb_strlen($post->post_content,'UTF-8') >50 ){ $content= str_replace('', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8')); echo $content.'…'; }else{ echo str_replace('', '', strip_tags($post->post_content)); } ?></p></div> </section> </a> </li> <?php endwhile; endif; ?> </ul> <?php if( function_exists("the_pagination") ) the_pagination(); ?> </main> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> single.php（page.php） <?php get_header(); ?> <?php breadcrumb(); ?> <div class="wrap"> <main class="main"> <article class="pageSub"> <section id="container"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title();?></h1> <figure class="eye_chatch"><?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?></figure> <div> <?php the_content();?> </div> <?php endwhile; endif; ?> </section> </article> </main> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> function.php <?php // サイドエリアのウィジェットを作成 register_sidebar( array( 'name' => __( 'Side Widget' ), 'id' => 'side-widget', 'before_widget' => '<div class="side__widget_area__container">', 'after_widget' => '</div>', 'before_title' => '<h3 class="side__widget_area__container__title">', 'after_title' => '</h3>', ) ); // フッターエリアのウィジェットを作成 register_sidebar( array( 'name' => __( 'Footer Widget' ), 'id' => 'footer-widget', 'before_widget' => '<div class="footer__widget_area__container">', 'after_widget' => '</div>', 'before_title' => '<h3 class="footer__widget_area__container__title">', 'after_title' => '</h3>', ) ); // アイキャッチ画像 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(220, 165, true ); // 幅 220px、高さ 165px、切り抜きモード // カスタムナビゲーションメニューを作成 add_theme_support('menus'); register_nav_menus( array( 'header__nav' => 'ヘッダーナビゲーション', 'footer__nav' => 'フッターナビゲーション', ) ); //ページング機能 function the_pagination() { global $wp_query; $bignum = 999999999; if ( $wp_query->max_num_pages <= 1 ) return; echo '<nav class="pagination">'; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'prev_text' => '<', 'next_text' => '>', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ) ); echo '</nav>'; } function breadcrumb(){ global $post; $str =''; echo('<nav class="pankuzu"><ul>'); if(!is_home()&&!is_admin()){ $str.= '<li><a href="'. home_url() .'">ホーム</a></li>'; if(is_category()) { $cat = get_queried_object(); if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>'; } } $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>'; }else if(is_page()){ if($post -> post_parent != 0 ){ $ancestors = array_reverse(get_post_ancestors( $post->ID )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>'; } } $str.='<li>'. get_the_title() .'</li>'; }else if(is_single()){ $categories = get_the_category($post->ID); $cat = $categories[0]; if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); foreach($ancestors as $ancestor){ $str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>'; } } $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>'; $str.='<li>'. get_the_title() .'</li>'; } } echo $str; echo('</ul></nav>'); } // カスタムヘッダー $custom_header = array( 'random-default' => false, 'width' => 1980, 'height' => 600, 'flex-height' => true, 'flex-width' => false, 'default-text-color' => '', 'header-text' => false, 'uploads' => true, 'default-image' => get_stylesheet_directory_uri() . '/img/default_img.png', ); add_theme_support( 'custom-header', $custom_header ); ?> ページング機能とパンくずリストの機能、トップページのヘッダー画像を変更できるようにカスタムヘッダー機能を追加。その他の機能に関しては、ウィジェットやプラグインを導入したり、別途制作で対応。 WordPress オリジナルテーマの作り方 3.0+テーマを自作したい人必見！WordPressの基本的な仕組みWordPressでプラグインを使わずに簡単にページネーション（ページ送り）を行う 双海カオルのタロット占い

「電気会社」のキャンペーンページを作成した際に使用した、電気料金のシミュレーション機能の制作方法をメモ。定額料金プラス従量課金の仕組みに加え、一定額に達すると比率が変わるので、条件分岐は多め。 HTML <section> <form method="post"> <dl> <dt>契約電流</dt> <dd> <select name="base_A"> <option value="660">20A</option> <option value="990">30A</option> <option value="1320">40A</option> <option value="1650">50A</option> <option value="1980">60A</option> </select> </dd> <dt>使用量</dt> <dd><input type="number" name="use_A">kWh</dd> <dt>子育て応援プラン適応</dt> <dd><input type="checkbox" name="child_A" value="1" id="child_A_checkbox"> <label for="child_A_checkbox">適応する</label></dd> </dl> <ul class="btn_submit"> <li><input type="submit" name="submit_simulation_A" value="この内容でシミュレーション"></li> </ul> </form> <h3>シミュレーション結果</h3> <dl class="result"> <dt>基本料金</dt> <dd class="result_base_A">0円</dd> <dt>従量料金</dt> <dd class="result_use_A">0円</dd> <dt>合計金額</dt> <dd class="result_total_A">0円</dd> </dl> </section> jQuery $('input[name='submit_simulation_A']').click(function(){ if($('input[name='child_A']').prop('checked')){ var baseA = Math.round($('select[name='base_A']').val() * 0.9); }else{ var baseA = $('select[name='base_A']').val(); } var useA = $('input[name='use_A']').val(); $('.result_base_A').text(separate(baseA)+'円'); if(useA > 300){ useAprice = ((useA-300) * 28.40)+((300 - 120) * 24.57)+(18.02 * 120); }else if(useA > 120){ useAprice = ((useA-120) * 24.57)+(18.02 * 120); }else{ useAprice = 18.02 * useA; } $('.result_use_A').text(separate(Math.round(useAprice))+'円'); $('.result_total_A').text(separate(Math.round(Number(useAprice))+Number(baseA))+'円'); return false; })