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

ポイント等を表現する時にナンバリングをしていますが、項目増えたり、並び替えた際に番号の振り直し忘れの無いよう、自動でナンバリングが行えるようにする方法をメモ HTML <ul class="pointlist"> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> ・ ・ ・ <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> </ul> CSS .pointlist{ counter-reset: number 0; /* number というカウンタ名で 0 をセット */ } .pointlist li::before{ counter-increment: number 1; /* number の値を 1 づつ増加 */ content: counter(number); } 「countercounter-reset」はカウントする値をリセットするプロパティ。ナンバリングをしたい要素の親要素に設定しカウンタ名(例：number)と初期値(例：0)を設定。ナンバリング値は「counter」で出力。カウントの増加数は「counter-increment」で設定。 欅BodyTherapistSchool

病院のホームページ制作に携わった際に使用したループスライダーの実装方法をメモ。個々の画像をじっくりと見てもらうというようりは、色々なサービスを展開してる場合に、まずは一通り見せて、興味を引きたい時などに便利です。 「ループスライダー」の実装方法 ループスライダーの実装には「jQuery」を利用。まずは外部ファイルを使用するサイトの「head」タグ内にコードを記載。その後、以下のソースコードで実装。 jQueryの設置方法は下記サイトで確認。 jquery HTML .loopSlider　スライダーの表示枠（動かない枠部分）.loopslider_wrap　スライダーの可動枠 <div class="loopSlider"> <div class="loopslider_wrap"> <ul> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> </ul> </div> </div> <script> $(function(){ loopTopSlider(); loopsliderPosition(); }); </script> CSS 基本的に「 表示枠 < 可動枠 」なので「overflow: hidden;」で見えては困る部分を見えなくする。また、「position」プロパティを使うため、枠の高さも設定。 .loopSlider{ height: 230px; overflow: hidden; position: relative; } .loopSlider .loopslider_wrap{ height: 230px; display: -webkit-flex; display: flex; position: absolute; top: 0; left: 0; } .loopSlider .loopslider_wrap ul{ display: -webkit-flex; display: flex; } .loopSlider .loopslider_wrap ul li{ width: 324px; } jQuery スライダー画像の全体幅を「sliderSize」として取得してから、取得値を2倍したものをスライダーの可動枠の幅に設定。「clone」関数でスライダー画像を複製して、スライダー画像の末尾に追加。60000秒かけて稼働枠を左端から、左方向に移動させていき、複製部分の左端が左端に到達した時点(60000秒 ) で、左端 ( 0 )の位置に戻す。あとはこの動作を「setTimeout」関数で60000秒ごとに繰り返す。見た目はループしているように見えますが、実際は複製した画像が左端で重なるようにして、入れ替えています。 function loopTopSlider(){ var sliderSize = $('.loopSlider .loopslider_wrap ul').width(); $('.loopSlider .loopslider_wrap').css({'width':sliderSize*2+'px'}); $('.loopSlider .loopslider_wrap').find('ul').clone().appendTo('.loopSlider .loopslider_wrap'); }; function loopsliderPosition(){ var sliderSize = $('.loopSlider .loopslider_wrap ul:first-of-type').width(); $('.loopslider_wrap').css({left:'0'}); $('.loopslider_wrap').stop().animate({left:'-'+(sliderSize)+'px'},60000,'linear'); setTimeout(function(){ loopsliderPosition(); },60000); };

コンテンツマーケティングの一環として、自社でブログを書いてツイッターで情報発信という流れをされているところも増えたので、ツイッターで拡散した記事を、よりクリックしてもらえるようになる「twitter（ツイッター）カード」の導入方法をメモ。 Twitterカードとは Twitterカードとは記事等のツイートボタンを押した（ URLをシェア ）際に自身で入力したコメントは別に、自動的にツイートに組み込まれるページ情報のこと。 上のイメージのように、記事のURLのみでなく、タイトルや要約文、画像が一緒に表示されるので、ユーザーの目に留まりやすく、流れの速いツイートの中では、このTwitterカードが設定されているかどうかでツイートのクリック率も大きく変わる。 Twitterカードの概要と設定方法 Twitterカードの設定は、情報発信をするページのHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <meta name="twitter:card" content="カード種類"> <meta name="twitter:site" content="@ユーザー名"> <meta property="twitter:title" content="記事のタイトル"> <meta property="twitter:description" content="記事の要約（ディスクリプション）"> <meta property="twitter:image" content="画像のURL"> 「twitter:title」「twitter:description」「twitter:image」の3つは、OpenGraphの項目と併用可。すでにOpenGraph（「og:title」「og: description」「og: image」）が設定されている場合は、Twitter側を省略可能。カードの種類は下記の通り。 カードの種類 種類表示される内容 summary タイトル、説明、およびサムネイルを表示できる。 summary_large_image 「summary」とほぼ同じ、表示される画像が大きくなる。 app アプリを直接ダウンロードできるボタンを表示できる。 player ビデオ/オーディオ/メディアを表示できる。 About Twitter Cards Wordpress（ワードプレス）への導入 実際は、ワードプレス等のCMSに組みこんで自動取得する流れがメインになるので、ワードプレスへの導入方法もメモ。「All in one seo」というプラグンでも実装はできるが、今回はソースを直にカスタマイズ。 記事の要約（ディスクリプション）を個別に設定できるように機能を追加する 初期状態では、ページの要約の部分が一律（キャッチフレーズ）になっていることが多いので、記事ページで個別に要約が設定できるよう変更。使用しているテーマフォルダ内の「function.php」に下記のソースコードを追加。 //ディスクリプションの設定 function get_description() { if(is_single()) { $description = get_the_excerpt(); } if(empty($description)) { $description = bloginfo('description'); } return $description; } Twitterカードの更新される部分に該当部分を変更する Twitterカードのソースコードを下記の内容に変更。 <meta property="twitter:title" content="<?php the_title(); ?>"> <meta property="twitter:description" content="<?php echo get_description(); ?>"> <meta property="twitter:image" content="<?php the_post_thumbnail_url( 'medium' ) ?>"> 「twitter:title」の記載内容は記事タイトル。サイト名なども記載したい場合は好みで変更。「twitter:description」に表示される内容は各記事の「抜粋」に入力した内容。入力がなければ「キャッチフレーズ」になる。「twitter:image」の記載内容は「アイキャッチ」で登録している画像。 「Card validator」表示内容を確認 ソースコードを追加したら、きちんと表示されるのかを「Card validator」で確認。「Card URL」に設定したページのURLを入力して「Preview card」をクリック。正しく表示されれば完了 Card Validator | Twitter Developers

ホームページを制作する中でアイキャッチ等のポイントとして使われているアイコン。以前は画像を作成して設置していましたが、スタンダードなものであればWEBアイコンフォント「Font Awesome」を使って表現が可能なので、使い方をメモ。 「Font Awesome」を使ったWebアイコンの実装の方法 「Font Awesome」のサイト内に用意されているタグを設置するだけでもWEBアイコンの実装は可能ですが、空タグになるのは好ましくないので、CSSの疑似要素（before）使った方法で実装。 サイトに登録して外部読込用タグを取得 「Font Awesome」のサイトで登録(無料)を済ませた後に表示される「kit code」をコピー、使用するサイトの「head」タグ内にコードを記載。SSL化に影響がないよう、プロトコル部分を削除。 <script src="//kit.fontawesome.com/○○○○○○○○○○.js" crossorigin="anonymous"></script> Font Awesome 使いたいアイコンを検索して、アイコンのコードと種類を確認。 サイト内の検索フォームから利用したいアイコンを検索。 アイコンの詳細ページで「種類」と「ユニコード」を確認。 HTMLとCSSを編集してアップロード 前の工程で確認した「ユニコード」をCSSの「content」の部分に頭に「\」(円マーク)を付けて記載。使用するアイコンの種類により「font-family」と「font-weight」も変更。 ※下記の参考例は「icon-mail」というクラスの疑似要素(before)を使用。 HTML <ul> <li class="contact"><a href="/contact/" class="icon-mail">お問い合せ</a></li> </ul> CSS .icon-mail::before { font-family: "Font Awesome 5 Pro"; content: "\f0e0"; font-weight: 900; } 「font-family」と「font-weight」の対応表 種類font-familyBrandsFont Awesome 5 Brandsその他Font Awesome 5 Pro 種類font-weightSolid900Regular or Brands400Light300

2019年12月から2020年2月にかけ、Google ChromeではWebサイト内の「HTTP」コンテンツがブロックされるよう段階的な仕様変更が行われることが公表されました。今後は「HTTP」のホームページは訪問されたお客様に伝えたい情報を正しく伝えることができなくなるとか。今更ではありますが、常時SSLの方法をおさらい。 常時SSL化の3つの手順 使用しているサーバーで、「SSL証明書」を取得 SSL証明書は、ほとんどのレンタルサーバーでは、無料で提供しています。利用中のサーバー会社の管理画面にログイン後、管理画面からSSL証明書の発行を申請。適応されるまで待つ。 レンタルサーバでない場合は、各種管理会社に確認しSSL証明書の発行手続きを行う。 ホームページのURLを、「https」で入力して、ホームページが表示されることを確認 SSL証明書の発行が完了したら、対象となるホームページのURLを「https」で入力して、きちんとページが表示されるのか確認。画像や外部読み込みリンクなどがきちんと表示、動かない場合は、ソースを変更。 相対パスで書かれていれば、ほとんど問題はない。外部読み込み用リンクの場合は、 プロトコルに左右されないよう「http:(https:)」を省略した記述が一般的。 <link href="//use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 「.htaccess」ファイルで常時SSL化対応 テキストエディタで下記のソースコードを記載し、ファイル名を「.htaccess」として保存。対象ホームページの直下のディレクトリにアップロード。 ※拡張子的に「.htaccess」というファイル名は作成できない環境の場合、アップロードしてからFTP内でリネーム。 RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] URLを「www」無しに統一する場合は更に下記のソースコードを記載。 RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。 構造化データをマークアップする方法 構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <script type='application/ld+json'> { "@context" : "http://schema.org", "@type" : "WebPage", "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" } </script> 上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。WEBページとして認識できるよう@typeに「WebPage」のプロパティ（属性）とバリュー（属性値）を使用して構造化データをマークアップ。 構造化データのマークアップの4つの手順 JSON-LDの構造化データは、次の4つのマークアップが基本。 JSON-LDの構造化データマークアップを宣言 JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。 <script type="application/ld+json"> { } </script> @context属性を宣言 @contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。文字コードの設定のようなもの。 "@context": "http://schema.org", @type属性を指定 @typeのプロパティで、ページの種類を指定。ここの部分を実際に記載するページの種類に合わせて書き換える。 "@type": "WebPage", ページの種類は下記サイトで確認。 プロパティとバリューを記載 @typeで指定した属性値に関連するプロパティ（nameやurlなど）を、必要に合わせて@type以降にマークアップ。プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。 "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" プロパティの種類は下記サイトで確認。 構造化データの有効性を確認する方法 構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。 本番に反映（アップロード）する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。 構造化データテストツール

コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。日本語フォントも増えてきたので使い方をメモ。 「Google Web Font」を使った文字の実装方法 「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート（@iｍport）を使った方法で実装。 使いたいフォントを検索して、フォントのソースを確認。 サイト内の検索フォームからイメージに近い文字を検索。希望フォントの詳細ページで「SELECT THIS FONT」をクリック。 下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。 Google Fonts CSSを編集してアップロード 文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。 ※下記の参考例は「 Noto Sans JP 」というフォントを使用。 CSS @import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap'); .jpn-font{ font-family: 'Noto Sans JP'; }

携帯で撮影した写真をブログに投稿する人も多いですが、どんなにきれいに撮影しても色味が微妙な場合も多いはず。そんな時に便利な自動で写真を美味しそうに変換してくれるサイトを発見したのでメモ。料理と同じく、一手間加えることで、料理がの写真が一層美味しそうになります。 参考サイト 超!美味しく変換 - 料理の写真をおいしそうにするよ♪

サイトのURLが変更になったとかで見かける「○秒後にページが切り替わります」という表記。タグを入れるだけで簡単に実装できるのでメモ。※この方法の場合、〜秒後に移動させる〜秒の部分をできる限り短くすることがSEOにおいては効果的であるようです。 HTML <meta http-equiv="refresh" content="転送されるまでの秒数; URL=http://移転先ページ"> SEO で失敗しないためのリダイレクト設定

商用サイトでも無料で利用できる、ひらがな・カタカナ・漢字などが含まれている日本語のフリーフォントが一度に紹介されているサイトを見つけたのでメモ。 特に手書き風の文字はロゴやポイントに使えて非常に便利。 参考サイト 商用サイトでも無料で利用できる日本語のフリーフォント集

PHPで、ユーザーエージェントを取得して各キャリアとPCに振り分ける方法をメモ。スマートフォン、 DOCOMO、 SOFTBANK、 AU、 WILLCOMの振り分けをします。 PHP function ketai_class() { // キャリアの種類を取得 $ua = $_SERVER['HTTP_USER_AGENT']; // 取得した種類によって判別 switch (true) { case (preg_match('/iPhone|iPad/', $ua)): echo 'ios'; break; case (preg_match('/Android/', $ua)): echo 'Android'; break; case (preg_match("/^DoCoMo/i", $ua)): echo 'DoCoMo'; break; case(preg_match("/^(J-PHONE|Vodafone|MOT-[CV]|SoftBank)/i", $ua)): echo 'SoftBank'; break; case(preg_match("/^KDDI-/i|/UP.Browser/i", $ua)): echo 'au'; break; case(preg_match("/^WILLCOM/i", $ua)): echo 'WILLCOM'; break; } }

多くの画像を効果的に見せることができるスライドショー。ギャラリーサイトでよく見かけますし自分自身も利用しているのですが、基本はサムネイルは横並び。そんな中、サムネイルを縦に表示できるものを見つけたのでメモ。 使用するスクリプト slideshow.js mootools.js HTML <!-- スライドショー表示部分 --> <div id="show" class="slideshow"> <!-- ローディング画像 --> <img src="lightpop-ico-loading.gif" width="32" height="30" style="position:relative; top:150px; left:190px"> </div> CSS slideshow { display: block; position: relative; z-index: 0; } javascript <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = ['sample02_1.jpg', 'sample02_10.jpg', 'sample02_11.jpg', 'sample02_12.jpg', 'sample02_13.jpg', 'sample02_14.jpg', 'sample02_2.jpg', 'sample02_3.jpg', 'sample02_4.jpg', 'sample02_5.jpg', 'sample02_6.jpg', 'sample02_7.jpg', 'sample02_8.jpg', 'sample02_9.jpg']; //スライドショーで表示する画像ファイル名 var myShow = new Slideshow('show', data, { controller: true, //オンマウスでコントロールパネル表示 height: 300, //スライドショー高さ hu: 'http://sample.com/', //画像(サムネイルも同じ)のある場所のパスを入れる thumbnails: true, //サムネイル表示 width: 400 //スライドショー幅 }); }); //]]> </script>

セレクトボックスを使用して検索をする場合通常は「PHP」で処理するのですが選択項目が単数の場合は選択しただけで移動する方法が便利な場合も「javascript」による方法を見つけたのでメモ HTML <select onChange="moveUrl(this)"> <option value="">選択してください</option> <option value="URL1">リンクテキスト1</option> <option value="URL2">リンクテキスト2</option> <option value="URL3">リンクテキスト3</option> <option value="URL4">リンクテキスト4</option> </select> javascript function moveUrl(selection){ var url = selection[selection.selectedIndex].value; if(url != ""){ location.href=url; } }