小金井にあるWEB制作会社の備忘録

画像データ等をサーバーにアップロードする際、一点づつアップロードしても良いけれど、ファイル数が多くなると時間がかかる上に面倒なので、zipファイルを使ってアップロードした際の方法をメモ。 HTML <form action="upload.php" method="post" enctype="multipart/form-data"> <dl> <dt>画像ファイル[zip形式]</dt> <dd><input type="file" name="newzip"></dd> </dl> <input type="submit" name="submit" value="登録"> </form> upload.php（PHP） if(!empty($_POST['submit'])){ define('error01', '画像ファイルのデータサイズが大きすぎます'); define('error02', '画像ファイルのデータ形式が不適切です'); //エラーチェック if(!empty($_FILES['newzip']['size'])){ $ext = substr($_FILES['newzip']['name'], strrpos($_FILES['newzip']['name'], '.') + 1); if($_FILES['newzip']['size'] > 128000000){ $err_msg['error']['newzip'] = error01; }else if($ext != 'zip'){ $err_msg['error']['newzip'] = error02; } } if(empty($err_msg['error'])){ //ディレクトリの指定 $directory_path = $_SERVER['DOCUMENT_ROOT'].'/upload/'; if($_FILES['newzip']['size'] > 0 ){ $filename = time().'.zip'; $filepath = $directory_path.'/'.$filename; move_uploaded_file($_FILES['newzip']['tmp_name'], $filepath); if (file_exists($filepath)) { $zip = new ZipArchive; if ($zip->open($filepath) === TRUE) { $zip->extractTo($directory_path); $zip->close(); //zipファイルの削除 unlink($filepath); } } } } } フォームからzipファイルをアップロードしサーバ上で解凍したいphp ZIPファイル解凍

ワードプレスを使用して運用されているサイトで投稿した記事を検索したい（サイト内検索）というご相談を受けた際に調べた内容をメモ。 サイト内検索の実装手順 検索フォームを準備する まずは、検索フォームを準備します。ソースを該当ページに直書きするでも良いですが、使いまわせるように別ファイル（searchform.php）で作成。テーマ内にファイルをアップしたら、読み込み専用のソースで読み込みます。 PHP <?php get_template_part('searchform'); ?> searchform.php 今回はカスタム投稿から投稿された記事に対して、タグ、カテゴリー（カスタムタクソノミー）を使用して検索する方法を実装。 <form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input type="hidden" name="s" id="s"> <input type="hidden" name="post_type" value="<?php echo get_post_type( $post ); ?>"> <select name='s-tag'> <option value="">全てのタグ</option> <?php if($terms = get_terms('contents-tag')) { foreach ( $terms as $term ) { echo('<option value="'.esc_html( $term->slug ).'">'.esc_html($term->name).'</option>'); } } ?> </select> <select name="s-cat"> <option value="">全てのカテゴリー</option> <?php if($terms = get_terms('contents-cat')) { foreach ( $terms as $term ) { echo('<option value="'.esc_html( $term->slug ).'">'.esc_html($term->name).'</option>'); } } ?> </select> <input type="submit" value="検索"> </form> ワードプレスの検索機能は「s」のパラメータ（キーワード検索）を基準に行われる、キーワードの指定が不要な場合でも「hidden」要素で「s」の値を返す必要があります。また、一般的にサイト内検索では全てのページが対象となってしまうので、「name="post_type"」の部分で該当する投稿タイプを限定しています。 検索結果ページの準備 ワードプレスで検索を行った際に表示されるページは「search.php」が使用されます。そのままで良い場合は別として、検索結果ごとに表示するページを変更した場合は以下のコードを追加する必要があります。 検索結果ページを投稿タイプ別に切り分ける場合の対応 function.php function custom_template_include($template){ if(is_search()){ $post_types = get_query_var('post_type'); $new_template = locate_template(array('search-'.$post_types.'.php')); if($new_template != ''){ return $new_template; } } return $template; } add_filter('template_include', 'custom_template_include', 99); 上記コードを「function.php」に追記することで、他のページ同様に「search-○○○○（カスタム投稿名）.php」が使用可能にできます。 search.php（search-○○○○（カスタム投稿名）.php） <?php // searchform.phpから送られてきたパラメーターを取得 $post_type = wp_unslash($_GET['post_type']); $s-tag = wp_unslash($_GET['s-tag']); $s-cat = wp_unslash($_GET['s-cat']); // 絞り込み条件を追加 if($s-tag) { $taxquery_tag = array( 'taxonomy' => 'contents-tag', 'terms' => $s-tag, 'field' => 'slug', ); } if($s-cat) { $taxquery_cat = array( 'taxonomy' => 'contents-cat', 'terms' => $s-cat, 'field' => 'slug', ); } $args = array( 'post_type' => $post_type, 'paged' => get_query_var('paged'), 's' => get_search_query(), 'tax_query' => array( 'relation' => 'AND', $taxquery_tag, $taxquery_cat, ), ); $sub_query = new WP_Query($args); ?> <ul class="newslist__list"> <?php if ( $sub_query->have_posts() ) : ?> <p><?php echo $sub_query->post_count; ?>件<span> / <?php echo $sub_query->found_posts; ?> 件</span></p> <?php while ( $sub_query->have_posts() ) : $sub_query->the_post(); ?> <!-- ここにループ処理 --> <li> <a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a> </li> <!-- ここまでループ処理 --> <?php endwhile; ?> </ul> <nav class="pagination"> <?php //ページネーション $bignum = 999999999; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $sub_query->max_num_pages, 'prev_text' => '&larr;', 'next_text' => '&rarr;', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ) ); ?> </nav> <?php else: ?> <p>検索されたキーワードにマッチする記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> 「WP_Query」を使用して、条件に合った投稿リストを取得できるように値を設定。リスト取得後は「wp_reset_postdata」使用して、変更していた取得条件をリセットしています。 検索箇所をタイトルのみに限定する 特に指定のない場合は、タイトル、本文、抜粋が検索キーワードの対象となります。正確性を増すため、本文のみに限定したい場合は下記を追記。 function.php function search_by_title_only($query) { if (!is_admin() && $query->is_main_query() && $query->is_search()) { $query->set('post_type', 'post'); // 投稿タイプを限定する場合に記載 $query->set('search_title_only', true); } } add_action('pre_get_posts', 'search_by_title_only'); function filter_search_by_title($where, $query) { global $wpdb; if ($query->get('search_title_only')) { $search = $query->get('s'); if ($search) { $where = " AND {$wpdb->posts}.post_title LIKE '%" . esc_sql($wpdb->esc_like($search)) . "%'"; } } return $where; } add_filter('posts_where', 'filter_search_by_title', 10, 2); 条件に応じてテンプレートファイルを変更する 『WordPress』でカスタム投稿毎にsearch.phpを切り替える WordPress サイト内検索機能の実装方法 【タクソノミー＆ターム編】WP_QueryのANDとORを併用した複雑な条件指定の書き方 [WordPress] カスタムフィールドで絞り込んで一覧表示する WordPressのカスタムタクソノミーで記事の絞り込み検索をする方法

PHPを使用して画像（動画・PDF等）をアップロードするフォームを作成した際に、ファイルサイズが大きくてアップロードできないことがあります。サーバーで許容されていないからと、エラーメッセージで制限することもできますが、「.htaccess」を使用して上限を解放する方法をメモ。 ファイルアップロードサイズの上限値変更の実装手順 php.iniの初期設定を確認。 現在、使用しているサーバーのphp.iniの設定を確認する必要があるので、まず以下のファイル（phpinfo.php）を作成し、該当するディレクトリの直下にアップロードし、アクセスします。 phpinfo.php <?php phpinfo(); ?> 以下の画面が表示されるので、この中から「memory_limit」「post_max_size」「upload_max_filesize」の値を確認します。 新しい値を「.htaccess」に設定 現在の値が確認出来たら新しい値を「.htaccess」に記載します。この時、優先順位があるので「memory_limit　>　post_max_size　> upload_max_filesize」の関係になるよう注意が必要。また、apacheの上限により「2G」より大きな値は設定できないようです。 項目解説memory_limitメモリ使用量の上限post_max_sizePOSTデータの最大サイズ※1回のアップロードファイルすべての合計サイズupload_max_filesize1ファイルあたりの最大アップロードサイズ .htaccess php_value memory_limit 256M php_value post_max_size 256M php_value upload_max_filesize 256M ファイルをアップロードし、再度設定状況を確認 作成した「.htaccess」ファイルを該当ディレクトリの直下にアップロード。前の項目で作成した「phpinfo.php」にアクセスして値が変更されているかを確認して終了。 PHPでアップロードできる上限は2GBまで！【POSTの場合】 【コピペ用】PHPのアップロード容量を変更する.htaccess、php.iniの記述サンプル ロリポップで一度にアップロードできるファイルサイズ上限を増やす方法 phpinfoの「Local Value」と「Master Value」の違い。結局反映されるのはどっち？

カスタムフィールド機能の追加は、プラグインでも可能ですが、今回は投稿済の記事から選択して設定する必要があったので、function.phpに追記して実装した方法をメモ。 function.php //カスタム投稿（contents）追加 function create_post_type_contents() { register_post_type( //カスタム投稿 'contents', array( 'labels' => array('name' => __('用語説明'), 'singular_name' => __('用語説明'), 'menu_name' => __('用語説明'), 'edit_item' => __('用語説明を編集')), 'supports' => array('title', 'editor', 'thumbnail', 'revisions'), 'public' => true, 'has_archive' => true, 'rewrite' => array('slug' => 'contents'),//URL 'menu_position' => 6 ) ); } add_action('init', 'create_post_type_contents'); //カスタムフィールド追加 function hook_func_for_metabox(){ add_meta_box( 'metabox_div_id',//メタボックスのdivに指定されるID '関連用語', //タイトル 'html_for_metabox_1_func', //表示用のHTMLを出力するphp関数（下で定義） 'contents', //どのタイプの記事入力画面で表示するか 'normal' ); } //メタボックスの中身を実装する function html_for_metabox_1_func($post){ $keyname = "field_1"; //記事タイトルを配列に格納 $args=array( 'post_type' => 'contents', 'posts_per_page' => -1, 'post__not_in' => array($post->ID) //自身の記事を除外 ); $sub_query = new WP_Query($args); //登録済みの値を取得 $get_value = get_post_meta($post->ID, $keyname, true); if($sub_query->have_posts()){ while($sub_query->have_posts()){ $sub_query->the_post(); if(in_array(get_the_ID(), $get_value)){ echo('<label><input type="checkbox" name="'.$keyname.'[]" value="'.get_the_ID().'" checked="checked">'.get_the_title().'<label>'); }else{ echo('<label><input type="checkbox" name="'.$keyname.'[]" value="'.get_the_ID().'">'.get_the_title().'<label>'); } } } wp_reset_postdata(); //nonceを作成し、hiddenフィールドとして書き込む wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } add_action('admin_menu', 'hook_func_for_metabox'); //カスタムフィールドの入力欄の中のデータをデータベースへ保存する function hook_func_for_save_customfield( $post_id ){ $custom_fields = array('field_1'); foreach( $custom_fields as $d ) { if(isset($_POST['nonce-'.$d])){ if(wp_verify_nonce($_POST['nonce-'.$d], 'action-'.$d)){ if(current_user_can('edit_post', $post_id)){ ///// カスタムフィールドの値を更新 /// if(get_post_meta($post_id, $d) == ""){ //新しいデータならデータを作成 add_post_meta($post_id, $d, $_POST[$d], true); } elseif($data != get_post_meta($post_id, $key, true)){ //既存にあるデータで内容が異なるなら更新 update_post_meta($post_id, $d, $_POST[$d]); }elseif($data == ""){ //入力内容が空ならデータの削除 delete_post_meta($post_id, $d, get_post_meta($post_id, $d, true)); } } } } } return $post_id; } add_action('save_post', 'hook_func_for_save_customfield'); カスタムフィールドの入力チェック 入力チェックはjavascriptで行う。 function check_contents_field(){ global $post; if (is_admin() && $post->post_type == 'contents'){ echo <<<END <script language="javascript" type="text/javascript"> jQuery(document).ready(function(){ jQuery('#publish').click(function() { //バリデーションの実行 var error = []; if(jQuery("input[name='field_1']").val() ==''){ error[0]="値を入力してください"; } if(error.length > 0){ alert(error[0]); return false; } }); }); </script> END; } } add_action('admin_head-post-new.php', 'check_contents_field'); add_action('admin_head-post.php', 'check_contents_field'); single-contents.php（表示画面） <h3>関連用語</h3> <ul> <?php if(!empty($post->field_1)){ foreach($post->field_1 as $key => $value){ echo('<li><a href="'.get_the_permalink($value).'">'.get_the_title($value).'</a></li>'); } } ?> </ul> WordPressのカスタムフィールド追加（前編　メタボックス表示） WordPressにてfunction.phpを使いチェックボックスのカスタムフィールド付ける functions.phpでカスタムフィールドを追加する 【WordPress】プラグインなしでカスタム投稿タイプにカスタムフィールド（テキスト＆画像）を追加する方法

javascriptを使用して指定値を取得する際に、「jQuery」を使うことが多いのですが、既存のサイトを編集できる権限がない状態で、googleタグマネージャー等の外部ツールに値を渡す必要があり、無理矢理値を取得した際に使った方法をメモ。 事例1：コンバージョン時の値を取得 今回は「お申込みボタンクリック時に表中のお名前の姓に該当する値のみを取得する」という内容。 HTML <h2 id="order_info_checkout_title" class="form_title">お客様情報</h2> <table id="order_info_checkout"> <tr id="order_info_name"> <th>お名前</th> <td>カブシキカイシャ&nbsp;シュウ</td> </tr> <tr id="order_info_kana"> <th>ふりがな</th> <td>かぶしきかいしゃ&nbsp;しゅう</td> </tr> <tr id="order_info_zip"> <th>郵便番号</th> <td>〒184-0002</td> </tr> <tr id="order_info_prefecture"> <th>都道府県</th> <td>東京都</td> </tr> <tr id="order_info_address1"> <th>住所1（市郡区/町・村・丁目・番地）</th> <td>小金井市梶野町</td> </tr> <tr id="order_info_address2"> <th>住所2（マンション名・号室）</th> <td></td> </tr> <tr id="order_info_tel_no"> <th>電話番号</th> <td>042-316-1895</td> </tr> <tr id="order_info_email"> <th>メールアドレス</th> <td>○○○○@syu-u.com</td> </tr> </table> <section class="k-button"> <a href="">申し込む</a> </section> javascript //値の取得 let entryname = document.getElementById("order_info_name"); let val_entryname = entryname.innerHTML; val_entryname = val_entryname.replace(/\r?/g, "").replace(/\s+/g, "").replace(/<th>お名前<\/th><td>/g, "").replace(/<\/td>/g, ""); val_entryname_ary = val_entryname.split("&nbsp;"); //クリック時にアラートを出力 let targets = document.getElementsByClassName("k-button"); for(let i = 0; i < targets.length; i++){ targets[i].addEventListener("click",() => { alert("姓"+val_entryname_ary [0]); }, false); } 該当箇所に直接クラスやIDが割り振られていないため、親要素のID（order_info_name）から「innerHTML」を使用してHTMLを一式取得してから、「replace」を使用して改行と不要な文字列を削除。最終的に得られた値を「split」を使用して分割して目的の値を取得。 アラート処理もクラス（k-button）から取得する都合で、一度で処理できないので「for」ループ処理を介して機能を実装。

ホームページに画像を配置する際に、四角形や円形、角丸を用いることが多いのだけれど、変化をつけて別の形（多角形）に切り欠きたい場合に、画像を作り直すのは大変。そんな時に便利な方法があったのでメモ。 HTML <figure class="clip__image"> <img src="○○.jpg"> </figure> CSS .clip__image { width: 20vw; height: 20vw; } .clip__image img { clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%); } 「polygon」の部分が多角形を意味し、座標（左上を基準に、右下に向けて100%になるよう、X軸、Y軸の順）を打ち込むことで親要素（自身に幅、高さを設定した場合はその値）の範囲内で変化する。 値はパーセンテージ（％）の他にピクセル（px）やビューポート（vw、vh）にも対応。レスポンシブの時も比率を変えることなく表現が可能。 サンプル .clip__image{ width: 20vw; height: 20vw; margin: 0 auto; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1)); } .clip__image img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%); } サンプルは「filter」を使ってドロップシャドウも適応させてますが、切り欠きした形に対応して影をつけることも可能。 CSS .clip__image { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1)); } CSS clip-path の使い方

ワードプレスにアップロードされる画像は初期設定の大きさに自動でリサイズされたものが作成されますが、特定のページに適した大きさの画像にしたい場合もあります。そうった場合に希望の画像サイズを追加する際の方法をメモ。 function.php（PHP） add_image_size('画像サイズの名称', 横幅, 縦幅, 画像の処理); 画像の処理効果false初期値。指定した大きさに合うように、元の画像の縦横比を維持したまま切り欠きせずにリサイズtrue画像を指定した大きさに切り欠きしてリサイズ 「add_image_size」は画像を追加登録時に有効となるため、既に登録済の画像を新しいサイズで作成したい場合はプラグイン「Regenerate Thumbnails」を使用して一括リサイズを行う必要があります。

WEBサイトの表示速度を改善する際に、特定のファイル（拡張子）に有効期限を設けてキャッシュするように設定したいとの要望があったので、その方法をメモ。 .htaccess <Files ~ "\.(gif|jpe?g|png|svg|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> 1行目の（）の部分に「キャッシュさせるファイルの拡張子」を記載。複数ある場合は「|」で区切る。 2行目は「キャッシュの有効期限」を秒数で設定したもの。上記の2592000は、「60*60*24 * 30」の値で「30日間」になります。 また、キャッシュの有効期限が拡張子によって異なる場合は、上記セットを必要な数分記載する。 .htaccess <Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=86400, public" </Files> たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！

データベースのバックアップを取りたい時、毎回管理ツールからダウンロードボタンを押しても可能だけれど、押し忘れや対応できない時があるのを避けるため自動化した際の内容をメモ。 PHP $dbHost = '○○○○'; // MySQLホスト名 $dbName = '○○○○'; // データベース名 $dbUser = '○○○○'; // データベースユーザー名 $dbPass = '○○○○'; // データベースパスワード $filePath = './○○○○/'; // ファイルを保存するディレクトリ $fileName = date('ymd').'_'.date('His').'.sql'; $savePath = $filePath.$fileName; $command = "mysqldump ".$dbName." --host=".$dbHost." --user=".$dbUser." --password=".$dbPass." > ".$savePath; exec($command); 「$filePath」に記載した内容のディレクトリを作成し、上記を記述したファイルをサーバーに用意されているクーロン機能を使って定期的に実行する。  [PHP][MySQL] データベースをダンプ(エクスポート)するPHP MySQLのデータを保存するmysqldumpのやり方

フォームの入力項目を作成した際に、テキストエリアとは別にカラーピッカーを設置する必要があった時に実装した「Spectrum」の使い方をメモ。 datepicker導入の手順 spectrum.jsを読み込む HTML <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css"> inputタグを設置し、spectrumを適応。 HTML <input type="hidden" name="color" value="#f00"> <input type="text" id="colorpicker"> カラーピッカーの設置のみであれば「<input type="text" id="colorpicker">」で可能だが、フォームを送信した際に値を取得できないため、「<input type="hidden" name="color">」を使用し値を取得。初期値の「value」は自由に変更可。 jQuery <script> var defcolor = $('input[name="color"]').val(); //初期値を取得 $("#colorpicker").spectrum({ color: defcolor, showPalette: true, chooseText: "決定", change: function(color){ setcolor = color.toHexString(); $('input[name="color"]').val(setcolor); }, }); </script> 参考例はカラーパレット、初期値、色を変更した際のアクション、テキストをカラーピッカーに設定しているが、その他に色々と設定ができるようなので、詳しくは下記サイトを参照。 Spectrumの使い方 (Webページにカラーピッカーを導入する)spectrum.jsで簡単にカラーピッカーを設置する サンプル var defcolor = $('input[name="color"]').val(); //初期値を取得 $("#colorpicker").spectrum({ color: defcolor, showPalette: true, chooseText: "決定", change: function(color){ setcolor = color.toHexString(); $('input[name="color"]').val(setcolor); }, });

ホームページを改修（リニューアル）する際に、ページが増えたり減ったり、変わったりすることはよくあることですが、そのことで以前は存在していたページがなくなり、アクセス数が減るのは避けたいところ。そんな時に便利な「.htaccess」を使ったページ単位でリダイレクト（転送）処理をする方法をメモ。 RewriteEngine on RewriteRule ^旧URL$ 新URL(絶対パス) [L,R=301] 旧URLの部分に以前使っていたURLを、新URLの部分に転送先のURLを絶対パスで指定。 複数ページを設定する場合は、上記を複数セット設定します。（下記参照） RewriteEngine on RewriteRule ^○○○○1.html$ http://○○○○/○○○○/○○○○1.php [L,R=301] RewriteRule ^○○○○2.html$ http://○○○○/○○○○/○○○○2.php [L,R=301] RewriteRule ^○○○○3.html$ http://○○○○/○○○○/○○○○3.php [L,R=301] ErrorDocument 404 http://○○○○/ 最後の一文（ErrorDocument 404 http://○○○○/）は404エラー時（ページが見つかりません）の転送先を設定しています。 .htaccessでページ単位、ディレクトリ単位の301リダイレクト(転送)を設定する方法

WEBで提供されているサービスを使用する際に、提供元のAPIに自身のサイトで入力されたデータを送信をする必要があったので「file_get_contents」を使った実装方法をメモ。 $data = array( "scode" => "代理店コード", "date" => date('Y/m/d H:i:s'), "name" => $_POST['name'], "email" => $_POST['email'], "tel" => $_POST['tel'], "products_id" => '1' ); $data = http_build_query($data, "", "&"); $options = array( 'http' => array( 'method'=> 'POST', 'header'=> 'Content-Type: application/x-www-form-urlencoded', 'content' => $data ) ); $context = stream_context_create($options); // POST送信 $contents = file_get_contents('APIのURL', false, $context);

ホームページの作成時に、ワード（Word）やエクセル（Excel）、パワーポイント（PowerPoint）で資料をいただくことも多いのですが、その中でよくあるのが画像データがファイル内に添付された状態で送られてくること。基本的には再度、画像のみを再送いただくのですが、そんな時に一括で添付された画像データをフォルダに展開して保存できる方法があったのでメモ。 添付された画像を一括で展開・保存する方法 拡張子を「zip」に変更する まずは、画像が添付された状態のファイルを複製し、「名前の変更」から拡張子を「zip」に変更します。この時「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と表示されますが、そのまま「はい」を選択して進みます。 例は「sample.docx」を複製して「sample - コピー.docx」を作成し、「sample - コピー.zip」に変更しています。 拡張子が表示されていない場合はエクスプローラー（フォルダ）上部の「表示」タブを開き「ファイル名拡張子」にチェックを入れます。 Windows10 - ファイルの拡張子を表示/非表示にする zipファイルを解凍 次に、上記で作成したzipファイルをクリックしてファイルを「解凍」します。解凍先はどちらでも大丈夫。解凍先に「ファイル名のフォルダ」が新規に作成されます。 フォルダを開いて画像を取り出す。 解凍されてできたフォルダを開くと中に複数のフォルダが作成されています。その中から「ファイル変更前のソフト名のフォルダ」（ワードの場合は「word」、エクセルなら「xl」、パワーポイントの場合は「ppt」を開きます。更に中に「media」というフォルダがあるので、こちらを開くと添付されていた画像データが保存されています。 画像が劣化して使用できない時もありますが、ワイヤーフレームや初校を提出する時などで、正式な画像に差し替えるまでの対応としては使えたりします。

通常メールの送信用メールフォームは以前から作成していましたが、HTMLメールの送信用にフォームを作成する機会があったので方法をメモ。 HTML <form method="post" action="sendmail.php"> <dl class="table"> <dt>送り主メールアドレス</dt> <dd><input type="text" name="frommail"></dd> <dt>送り主名前</dt> <dd><input type="text" name="fromname"></dd> <dt>宛先メールアドレス</dt> <dd><input type="text" name="email"></dd> <dt>件名</dt> <dd><input type="text" name="subject"></dd> <dt>HTMLメール本文</dt> <dd><textarea name="html"></textarea></dd> </dl> <ul class="btnSubmit"> <li><input type="submit" name="submit" value="送信する"></li> </ul> </form> PHP（sendmail.php） if(!empty($_POST['submit'])){ foreach($_POST as $key => $value){ $dt[$key] = mb_convert_kana($value, "KVa", "UTF-8"); } //エラー処理は省略 if(empty($dt['error'])){ $mail_from = $dt["frommail"]; $mail_to = $dt["email"]; $mail_from_name = $dt["fromname"]; $subject = $dt["subject "]; $message = $dt["html"]."\r"; $headers = "From: ".mb_encode_mimeheader($mail_from_name)."<".$mail_from.">". "\r"; $headers .= 'Content-type: text/html; charset=UTF-8' . "\r"; mail($mail_to, $subject, $message, $headers); echo("メール送信成功です"); exit(); } } 通常のメールと異なる点はヘッダーで「Content-type」を設定する部分。 【PHP入門】メールを送信する方法(mail/mb_send_mail) PHPでHTMLメールを送る方法 PHPでメール送信するための方法を解説【初めてでもわかりやすく】

WordPress（ワードプレス）で専用の機能を実装する際にプラグインを利用することが多いなか、テーマの適応時に機能追加（データベースの作成）ができる方法があったのでメモ。 function.php（PHP） function theme_activate() { global $pagenow; if(is_admin() && $pagenow == "themes.php" && isset($_GET["activated"])) { do_action('theme_activate'); } } add_action('init', 'theme_activate'); function create_theme_tables() { global $wpdb; $table_name = $wpdb->prefix.'tbl_link'; //テーブルが存在していなければ作成する if ($wpdb->get_var("SHOW TABLES LIKE {$table_name}") != $table_name) { if(!empty($wpdb->charset)){ $charset_collate = "DEFAULT CHARACTER SET {$wpdb->charset} "; } if(!empty($wpdb->collate)){ $charset_collate .= "COLLATE {$wpdb->collate}"; } $sql = "CREATE TABLE {$table_name} ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `state` int(11) NOT NULL, `url` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) {$charset_collate} AUTO_INCREMENT=1;"; require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); dbDelta( $sql ); } } add_action('theme_activate', 'create_theme_tables'); テーマを有効化したときにアクションフックを呼び出すWordPress テーマ有効化時に独自テーブルを追加する方法

メールフォームからメールを送信する際に、画像（ファイル）を添付できるようにしてほしいとの依頼を受けた際の実装法をメモ。 HTML <form action="./sendmail.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="your-token" value="'.$_SESSION['your-token'].'"> <dl class="form__table"> <dt class="must">お名前</dt> <dd><input type="text" name="your-name" value=""></dd> <dt class="must">メールアドレス</dt> <dd><input type="email" name="your-email" value=""></dd> <dt class="must">ファイル</dt> <dd><input type="file" name="your-file"></dd> <dt class="must">お問い合わせの内容</dt> <dd><textarea name="your-message"></textarea></dd> </dl> <ul class="form__submite"> <li><input type="submit" name="mailform" id="submit" value="送信"></li> </ul> </form> sendmail.php（PHP） if(!empty($_POST['mailform'])){ foreach($_POST as $key => $value){ $dt[$key] = mb_convert_kana($value, 'KVa', 'UTF-8'); } //エラー処理は省略 if(!empty($_FILES['your-file']['name'])){ //ファイル名 $file = $_FILES['your-file']['name']; //添付したいファイルのパス $file_path = $_FILES['your-file']['tmp_name']; } //自動メール送信 //言語設定、内部エンコーディングを指定する mb_language('japanese'); mb_internal_encoding('UTF-8'); date_default_timezone_set('Asia/Tokyo'); //【相談者宛】件名 $mailto= 'test@syu-u.com'; $form= '運営会社'; $subject_owner = 'お問い合わせがありました'; //入力情報 $resbody = ""; $resbody .= "□お問い合わせ日：".date('Y/m/d', time()).""; $resbody .= "□お名前：".$dt['your-name'].""; $resbody .= "□メールアドレス：".$dt['your-email'].""; $resbody .= "□お問い合わせ："; $resbody .= $dt["your-message"].""; //受取側本文 //メールボディを定義 if(empty($file)) { $body_owner .= "お申込み内容"; $body_owner .= "----------------------------------------------------"; $body_owner .= $resbody.""; $body_owner .= "----------------------------------------------------"; }else{ $body_owner = "--__BOUNDARY__"; $body_owner .= "Content-Type: text/plain; charset=\"ISO-2022-JP\""; $body_owner .= "お申込み内容"; $body_owner .= "----------------------------------------------------"; $body_owner .= $resbody.""; $body_owner .= "----------------------------------------------------"; $body_owner .= "--__BOUNDARY__"; $body_owner .= "Content-Type: application/octet-stream; name=\"{$file}\""; $body_owner .= "Content-Disposition: attachment; filename=\"{$file}\""; $body_owner .= "Content-Transfer-Encoding: base64"; $body_owner .= ""; $body_owner .= chunk_split(base64_encode(file_get_contents($file_path))); $body_owner .= "--__BOUNDARY__"; } //メールヘッダーを定義 $header_owner = "Content-Type: multipart/mixed;boundary=\"__BOUNDARY__\""; $header_owner .= "Return-Path: ".$mailto. " "; $header_owner .= "From: ".$form." "; $header_owner .= "Sender: ".$form." "; $header_owner .= "Reply-To: ".$mailto. " "; mb_send_mail($mailto, $subject_owner, $body_owner, $header_owner); } 実際の使用時は確認画面を用意する必要があるため、「＄_POST」で取得した値を「$_SESSION」に入れたり、一時的に画像をWEB上に保管する等をして処理してます。 メールにファイルを添付して送信するPHPで添付ファイル付きのメールを送信する「mb_send_mail」編

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メールを作成する機会があったので、制作時に気付けた点をメモ。 HTMLはテーブルレイアウトで作成する。 受信環境（メーラー）によって使用できるCSSの種類が異なるため、2カラムをCSSで実装できるものとできないもがある。 全てのメーラーで同じ表現にする場合はテーブルタグを入れ込状にして使用する「テーブルレイアウト」を使用するのが確実。 CSSは「style」を使ってHTMLタグに書く。 CSSの外部読み込みはもちろん、一部のメーラーではインラインで設定したCSSが効かない場合も。基本的には「style」やHTMLタグが保有している属性を使って直にHTMLタグに設定していくのが安全。 メーラーによってメディアクエリの効かない環境がある。 PCのOutlook、スマートフォンのGmailアプリはCSSのメディアクエリが効かない。（Gmailアプリに関しては「メッセージ全体を見る」ボタンを押さなければ有効。）そのため原則としてPC版の表示を基準に作成し、スマートフォン（タブレット）にのみ適応するところを、メディアクエリを使用して制作する方法をとる必要がある。 また、Outlookに関しては、下記のタグを使用することで、他のメーラーでは表示させない方法をとることもできる。 HTML <!--[if gte mso 9]> ＝＝＝＝outlookのみ対応＝＝＝＝ <![endif]--> 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で幅を固定する対処法

テキストエリアを使ったテキスト入力時にツイッター（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+（シュウプラス）

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

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

画像を多用することで遅くなっている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 などの変数をフィルタリングするフィルタの型