ホームページ制作 | 東京・小金井市のWEB制作会社の豆知識

WordPress

WordPress（ワードプレス）で投稿に表示されているブロックを制限

2020.11.28 248

WordPress（ワードプレス）でのホームページ作成時に、ブロックの種類が多すぎると、かえって使いにくいので利用できるブロックを制限してほしいとの依頼を受けた際に参考にしたサイト、対応方法をメモ。 function.php（PHP） add_filter('allowed_block_types', 'custom_allowed_block_types', 10, 2); function custom_allowed_block_types($allowed_block_types, $post){ if($post->post_type === 'post'){ $allowed_block_types = array( 'core/paragraph', 'core/heading', 'core/image', ); } return $allowed_block_types; } 上記コードは「投稿画面（post）」で使えるブロックを「段階」「見出し」「画像」の3種類に制限しています。他のブロックや、投稿タイプを指定する場合は下記を参考。ブロックのタイプ $allowed_block_types = array( // 一般ブロック 'core/paragraph', // 段落 'core/heading', // 見出し 'core/image', // 画像 'core/quote', // 引用 'core/gallery', // ギャラリー 'core/list', // リスト 'core/audio', // 音声 'core/cover', // カバー 'core/file', // ファイル 'core/video', // 動画 // フォーマット 'core/code', // ソースコード 'core/freeform', // クラシック 'core/html', // カスタムHTML 'core/preformatted', // 整形済み 'core/pullquote', // プルクオート 'core/table', // テーブル 'core/verse', // 詩 // レイアウト要素 'core/button', // ボタン 'core/columns', // カラム 'core/media-text', // メディアと文章 'core/more', // 続きを読む 'core/nextpage', // 改ページ 'core/separator', // 区切り 'core/spacer', // スペーサー // ウィジェット 'core/shortcode', // ショートコード 'core/archives', // アーカイブ 'core/categories', // カテゴリー 'core/latest-comments', // 最新のコメント 'core/latest-posts', // 最新の記事 // 埋め込み 'core/embed', // 埋め込み 'core-embed/twitter', // Twitter 'core-embed/youtube', // YouTube 'core-embed/facebook', // Facebook 'core-embed/instagram', // Instagram 'core-embed/wordpress', // WordPress 'core-embed/soundcloud', // SoundCloud 'core-embed/spotify', // Spotify 'core-embed/flickr', // Flickr 'core-embed/vimeo', // Viemo 'core-embed/animoto', // Animoto 'core-embed/cloudup', // Cloudup 'core-embed/collegehumor', // CollegeHumor 'core-embed/dailymotion', // Dailymotion 'core-embed/funnyordie', // Funny or Die 'core-embed/hulu', // Hulu 'core-embed/imgur', // Imgur 'core-embed/issuu', // Issuu 'core-embed/kickstarter', // Kickstarter 'core-embed/meetup-com', // Meetup.com 'core-embed/mixcloud', // Mixcloud 'core-embed/photobucket', // Photobucket 'core-embed/polldaddy', // Polldaddy 'core-embed/reddit', // Reddit 'core-embed/reverbnation', // ReverbNation 'core-embed/screencast', // Screencast 'core-embed/scribd', // Scribd 'core-embed/slideshare', // Slideshare 'core-embed/smugmug', // SmugMug 'core-embed/speaker-deck', // Speaker Deck 'core-embed/ted', // TED 'core-embed/tumblr', // Tumblr 'core-embed/videopress', // VideoPress 'core-embed/wordpress-tv', // WordPress.tv // 再利用ブロック 'core/block', // 再利用ブロック ); 投稿タイプ $post->post_type === 'post' //投稿 $post->post_type === 'page' //固定ページ $post->post_type === 'カスタム投稿スラグ' //カスタム投稿 WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法

その他

メディアクエリを使ってレスポンシブ対応したHTMLメールを作成

2020.11.21 755

パソコンとスマホ用にメディアクエリを使用してレスポンシブ対応のHTMLメールを作成する機会があったので、制作時に気付けた点をメモ。 HTMLはテーブルレイアウトで作成する。受信環境（メーラー）によって使用できるCSSの種類が異なるため、2カラムをCSSで実装できるものとできないもがある。全てのメーラーで同じ表現にする場合はテーブルタグを入れ込状にして使用する「テーブルレイアウト」を使用するのが確実。 CSSは「style」を使ってHTMLタグに書く。 CSSの外部読み込みはもちろん、一部のメーラーではインラインで設定したCSSが効かない場合も。基本的には「style」やHTMLタグが保有している属性を使って直にHTMLタグに設定していくのが安全。メーラーによってメディアクエリの効かない環境がある。 PCのOutlook、スマートフォンのGmailアプリはCSSのメディアクエリが効かない。（Gmailアプリに関しては「メッセージ全体を見る」ボタンを押さなければ有効。）そのため原則としてPC版の表示を基準に作成し、スマートフォン（タブレット）にのみ適応するところを、メディアクエリを使用して制作する方法をとる必要がある。また、Outlookに関しては、下記のタグを使用することで、他のメーラーでは表示させない方法をとることもできる。 HTML  HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no, address=no, email=no, date=no, url=no"> <title>レスポンシブ対応したHTMLメールのサンプルソースコード｜株式会社衆</title> <style> body { font-size: 90%; } @media screen and (max-width: 480px) { .tbl { width: 90% !important; margin: 0 5% !important; border-collapse: separate; border-spacing: 5vw !important; } .tbl__cell { display: block !important; width: 100% !important; } .padding_top { padding-top: 5vw !important; } } </style> </head> <body style="background-color: #f5f5f5; margin: 0; padding: 0;"> <table width="650" border="0" cellpadding="0" cellspacing="25" bgcolor="#ffffff" style="margin: 0 auto;" class="tbl"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell"> <p style="margin: 0 0 10px;">こんにちは、「株式会社衆」メルマガ担当の○○○○です。<br> いつも弊社の備忘録（ブログ）をご覧頂きありがとうございます。</p> <p style="margin: 0 0 10px;">衆では「HTMLメール」の参考になればと考え、弊社ブログをご覧頂いている方限定でこちらのソースを公開しています。</p> <p style="margin: 0;"><strong>レスポンシブ対応したHTMLメールを作成</strong>される際に、こちらの<strong style="color: #FD5B3E;">ソースコード</strong>がお役に立ちますと幸いです。</p> </td> <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell padding_top"><img src="○○○○" width="100%"></td> </tr> </table> </td> </tr> </table> </body> </html> 送信環境にも左右される？同じHTMLを使用しても送信環境（メーラー）によって正しく送信されない場合もあるようです。たまたま、異なるメーラーを使用してメール配信テストをした際に、同じ内容なのに異なる表示がされたことがあったので一応追記。メール作成の手順もあるので、再度検証は必要。送信環境（メーラー）結果状態Outlook×メディアクエリが正しく機能しなかった。Becky〇レスポンシブHTMLメール制作で失敗しないためのポイントとは？【レスポンシブ（リキッド）HTMLメール】outlookで幅を固定する対処法

PHP

PHPを使ってTwitter風のハッシュタグでの自動リンク機能を実装

2020.11.14 356

テキストエリアを使ったテキスト入力時にツイッター（Twitter）のように＃（ハッシュタグ）を使って自動リンク（検索機能）を実装した時の方法をメモ。 funciton.php（PHP：独自関数の作成）独自関数「CreateKeywordLink」を作成し、こちらを使用して、ページに自動リンクを生成。＃（ハッシュマーク）で対象となる本文を区切り、配列に挿入。この時＃（ハッシュマーク）のついていなかった文字列も配列に挿入されるため、こちらは除外する。また、スペースや改行を含むものも、スペース以降、改行以降の文字は除外する。 function CreateKeywordLink($str) { $keywordary = str_replace(array("\r", "\r", ""), "", $str);　 //改行コードを1つに統一 $keywordary = explode('#', $str); //文字列をハッシュタグで分割 foreach($keywordary as $key => $value) { //配列の最初の項目（＃のつかない項目）以外を使用 if($key !=0 ){ //スペース（半角・全角）が入っている場合は更に分割 if(strpos($keywordary[$key],' ') !== false) { $moreexplode = explode(" ", $keywordary[$key]); $keywordary[$key] = $moreexplode[0]; }else if(strpos($keywordary[$key],'　') !== false) { $moreexplode = explode(" ", $keywordary[$key]); $keywordary[$key] = $moreexplode[0]; } //改行が入っている場合は更に分割 if(strpos($keywordary[$key], "") !== false) { $moreexplode = explode("", $keywordary[$key]); $keywordary[$key] = $moreexplode[0]; } $keyword[$key] = $keywordary[$key]; $href[$key] = '<a href="URL?keyword='.$keyword[$key].'">#'.$keyword[$key].'</a>'; } } $search = array_values($keyword); $replace = array_values($href); $str = str_replace($search, $replace, $str); return $str; } PHP（使用ページ） include('./function.php'); $txt ='Zoomを使ったオンラインでの海外・国内のツアーのサービスサイト。受注管理システムはaishipの機能を使用。各ツアーの詳細ページに設置された予約日のカレンダーはjQuery用プラグイン「datepicker」を使用し、商品登録ページからツアーごとに設定できるよう対応。サイトを訪れた方に、少しでも旅行気分を味わってもらえるようにと設置したトップページの飛行機は、CSSアニメーションを3パターン用意し、指定するクラスを一定時間ごとに切り替えることで実装しています。 #旅行 #ECサイト #ショッピングサイト #aiship'; echo(CreateKeywordLink($txt)); 今回は＃（ハッシュマーク）をベースにキーワードを作成しているが、キーワードの区切りに使う文字は、文章を作成するのに支障のないものであれば、何でも構わない。制作実績でフリーランス・制作会社に依頼 SYU+（シュウプラス）

javascript / jQuery

レスポンシブサイト作成時のjsのブレイクポイント対応

2020.11.7 312

レスポンシブ対応でサイトを制作時に「$(window).width()」や「$(window).innerWidth()」（jQuery）を使い、ブレイクポイントをCSSで設定してるメディアクエリの値と同じにしてしまうと誤差が生じる時があります。これはCSSとjQueryとでは、スクロールバーの幅に対しての処理が異なり、jQueryではページ幅にスクロールバーの幅は含まないから。そこで、誤差が生じないための解決方法をメモ。 javascript if(window.innerWidth < 数値){ //ここに処理を記載 } 普通のjavasciptを使用することで、CSSのメディアクエリの値と一致します。

WordPress

WordPress（ワードプレス）で複数のデーターベースの内容を読み込む。

2020.10.31 621

WordPress（ワードプレス）を使ってサイトを作る際に、既に別サイト（同一サーバー内）で作成しているコンテンツなどを共有して制作したい場合（本サイトとは別のデータベースを読み込みたい場合）の対応方法をメモ。 function.php（PHP） //他のデータベースに接続 $another_db_user = 'データーベースユーザー名'; $another_db_pass = 'データーベースパスワード'; $another_db_name = 'データーベース名'; $another_db_host = 'データーベースホスト名'; $another_tb_prefix = 'wp○○_'; $another_wpdb = new wpdb($another_db_user, $another_db_pass, $another_db_name, $another_db_host); $another_wpdb->set_prefix($another_tb_prefix); 読み込みページ（PHP）こちらのサンプルでは追加で読み込むデータベースもワードプレスを使用し、投稿一覧の内容を表示しています。 /* Template Name: 読み込みに使用するページのテンプレート名 */ //SQLでデーターベースに直接アクセスして、情報をとる $result = $another_wpdb->get_results(' SELECT * FROM '.$another_wpdb->posts.' WHERE post_type = "post" && post_status = "publish" ORDER BY post_date DESC '); foreach ($result as $value) { $the_post_id = $value->ID; // カテゴリとアイキャッチを取得したい投稿のID //カテゴリーの取得 $categories = ''; $get_term_relationships_res = $another_wpdb->get_results('SELECT '.$another_wpdb->term_relationships.'.term_taxonomy_id as term_taxonomy_id FROM '.$another_wpdb->term_relationships.', '.$another_wpdb->term_taxonomy.' WHERE '.$another_wpdb->term_relationships.'.term_taxonomy_id = '.$another_wpdb->term_taxonomy.'.term_taxonomy_id && '.$another_wpdb->term_relationships.'.object_id = "'.$the_post_id.'" && '.$another_wpdb->term_taxonomy.'.taxonomy = "category"'); foreach($get_term_relationships_res as $row_term_relationships){ $get_terms_res = $another_wpdb->get_results('SELECT name FROM '.$another_wpdb->terms.' WHERE term_id = "'.$row_term_relationships->term_taxonomy_id.'"'); foreach($get_terms_res as $row_terms){ $categories .= $row_terms->name; } } //アイキャッチの取得 $get_postmeta_res = $another_wpdb->get_results('SELECT meta_value FROM '.$another_wpdb->postmeta.' WHERE meta_key = "_thumbnail_id" && post_id = "'.$the_post_id.'"'); foreach ($get_postmeta_res as $row_get_postmeta ) { $get_attachment_res = $another_wpdb->get_results('SELECT * FROM '.$another_wpdb->posts.' WHERE post_type = "attachment" && ID="'.$row_get_postmeta->meta_value.'"'); foreach($get_attachment_res as $row_get_attachment){ $eyecatch = $row_get_attachment->guid; } } //表示内容 echo('<li class="post"> <span class="cat-name">'.$categories.'</span> <a href="'.$value->ID.'"> <figure class="eyecatch"><img src="'.$eyecatch.'"></figure> <div class="entry-content"> <h2 class="entry-title">'.$value->post_title.'</h2> <p class="entry-meta">'.$value->post_date.'</p> <p class="description">'.mb_substr(strip_tags($value->post_content), 0, 50, 'UTF-8').'</p> </div> </a> </li>'); }

その他

「webP(ウェッピー)」を使用して画像サイズを縮小。

2020.10.24 209

画像を多用することで遅くなっている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形式で画像を表示する。

2020.10.17 302

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が正しく表示されていなかった問題を解決

WordPress

「All in One SEO Pack」使用時に投稿記事のタイトルタグに所属カテゴリーを自動で追加。

2020.10.10 224

「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()」の場合にのみ適応しています。

PHP

PHPの「preg_replace」を使って文中のURLを自動認識してリンクに変換

2020.10.3 2467

テキストエリア等で入力した文字の中に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);

javascript / jQuery

ページスクロール時にコンテンツを左右交互にスライドイン

2020.09.12 497

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'); }); } })

javascript / jQuery

jQuery「datepicker」を使ってフォームの入力項目にカレンダーを設置

2020.09.5 349

レンタルサービスのサイト制作に携わった際に使用した、jQuery用プラグイン「datepicker」を使ったカレンダーの実装方法をメモ。 datepicker導入の3つの手順 jQueryを利用するのに必要なcssとjsのURLを読み込む  <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>  <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 / 旅行用品のレンタルサービス

javascript / jQuery

jQueryでスマホの場合にのみ電話番号を自動リンク

2020.08.22 320

電話番号を記載する際に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()の違い

PHP

PHPの「filter_input」関数を使って簡易バリデーション（入力チェック）を実装

2020.08.15 1467

フォームの入力値や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でホームページに表示される画像をリサイズ

2020.08.8 577

レスポンシブ対応での作成がメインとなり、大きな画像を使う機会が増えてきています。本来であれば機種に合わせて画像を用意するのが良いのですが、数が多いと対応が難しい場合もあるので、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>

PHP

PHPで動画をバイナリデータに変換してMySQLに保存

2020.08.1 1744

動画ファイルを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

WordPress（ワードプレス）でプラグイン有効時にデータベースに独自テーブルを追加

2020.07.25 196

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」を使ってサイトの表示スピードを改善

2020.07.18 196

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

PHP

PHPの「preg_replace」関数を使って特定のHTMLタグ（要素を含む）を削除

2020.07.11 839

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 正規表現メモ

javascript / jQuery

jQuerで要素のランダム表示を実装

2020.07.4 301

「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。アクセスすたびに画像の表示順序が変わるので、コンテンツが単調になりにくく、また一点づつ表示されるので、一度に全ての商品を見せるよりも印象付けることができる。 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」で指定。要素をランダムに並び替える高品質法人印鑑セットを特別価格でご案内｜東洋堂

PHP

PHPの「pathinfo」関数を使ってファイル情報（拡張子、ファイル名）を取得

2020.06.27 354

バリデーションチェックで添付されたファイル情報を取得する際に、便利な「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関数を使って拡張子名やファイル名を簡単取得

PHP

WordPress（ワードプレス）に登録されているデータを外部ファイルで利用する。

2020.06.20 359

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

CSS

youtube（iframe）の埋め込み動画をレスポンシブ対応にする

2020.06.13 275

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

WordPress（ワードプレス）でカスタム投稿タイプを追加

2020.05.16 233

カスタム投稿タイプは、独立したコンテンツを作りたい場合に便利なワードプレスの追加機能。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におけるカスタム投稿タイプでカテゴリー一覧が表示されない場合カスタム投稿タイプの表示側、管理画面側のいろいろをカスタマイズするカスタム投稿タイプの設定

CSS

CSS「object-fit」を使って画像を表示枠に合わせてトリミング

2020.05.9 363

画像を表示枠いっぱいに表示する場合に、背景画像や「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編）

PHP

WordPress（ワードプレス）でショートコードを作成

2020.05.2 329

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 日本語版

PHP

WordPress(ワードプレス)でセッション（SESSION）を使用する

2020.04.25 348

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

PHP

PHPでクッキー（$_COOKIE）を使用する

2020.04.18 253

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

CSS

CSSの疑似クラスを使ってｎ番目の要素を取得

2020.04.11 288

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まとめ

javascript / jQuery

jQuerでフリック（ドラッグ）スライダーを実装

2020.04.4 277

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秒!!】超簡単！マウスでフリックをレスポンシブ対応でお手軽実装！

javascript / jQuery

jQueryでRSSを読み込んで表示

2020.03.28 581

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 の代替案を紹介します。