沖縄も遂に梅雨に入りましたね！
雨に濡れて風邪引かないように気をつけましょう！

さて、今回はHTML５で追加されたimgタグに追加する値のsrcset属性が便利なので紹介します。
srcsetタグでできることはratinaのディスプレイで表示する際に大きい画像に自動的に変更されたり、画面サイズに合わせて表示を変えたりと様々なことに使うことができます。

普通imgタグを書くときは、
<img src=”abcd.jpg” alt=”イメージ”>
で表示させたい画像を指定して行くのが普通の使い方なのですが、これにsrcsetタグを指定して画面サイズを指定していく事ができます。

画面サイズが４００ｐｘ以下や８００ｐｘ以下はちょっと縦長のに変えたりや用途が様々あります。
例えば、、、、、
<img src=”abcd.jpg” srcset=”abcd-m.jpg 600w, abcd-l.jpg 800w” alt=”イメージ”>
こうすることによって、600px以下ではabcd-m.jpg　800px　以降もしくは以上は
abcd-l.jpgが表示されます。
画像を数種類用意しないと行けないですが自分の表示させたい画像をスムーズに切り替える事ができます。

まだ使えないブラウザのバージョンが時々あるので、もうちょいバージョンアップが進めば主流で使えそう！と思いました！！

デジタルドリームワークスからHigaです。
さて気になる記事がありましたのでピックアップ

数ヶ月以内にGoogleはインデックスを分割する。
つまりモバイルファーストインデックスを導入するという記事です。

これまでもモバイルフレンドリーなサイトは検索エンジンの結果に良いとされてきました。
しかしGoogleは検索に使用するためのインデックスを1種類しか持っておらず、
一部の評価に関してはモバイル向けページの情報が用いられているが、基本的にはPC向けのページを基準に検索結果を出しているようです。

しかしモバイルファースト インデックス導入後にはこれが逆転すると噂されています。
モバイルサイトを基準に検索結果を出していくと考えられています。
いよいよモバイルファーストの考えが検索エンジンにも反映されていきますね。

今後制作側に影響はあるのか…

弊社はスマートフォンへ対応したレスポンシブデザインをベースに提案しております。
この考えは変えなくても問題なさそうです。特に大きな影響は無い感じです。
しかし一部注意が必要かもしれません。
特にモバイル向けコンテンツはサイト内容を省略している場合は注意です。

まだ多くの事が憶測のような感じもします。
今後の情報に注目ですね！

参考

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は？

http://web-tan.forum.impressrd.jp/e/2016/11/08/24325

今回はFlexboxのメモ

CSSに新しく追加されたFlexboxはCSSに高さを自動調整させる機能をもっててフロートの代わりになるプロパティが追加されました。

今まではpositionやfloatで調整してたバナーの位置がFlexboxで楽に調整できるようになりました。

親要素にDisplay:flexを追加させるだけで子要素に影響がでます。

もちろん、フロートの代わりになることもあって横並びは持ちろん片方を大きめに範囲を取る事もできる！！

ただブラウザのバージョンが結構厳しい！

IE だと１０以下は効かないという厳しい条件になってますが、CSSに一行追加で出来るのは製作者側ではとても嬉しい！
対応してないブラウザだと　-webkit-　を使って記述しないといけないのが大変な所です。だけど近い未来、近い未来ブラウザもEdge chromeの使う割合が増えれば普通に使えるようになる！

詳しい内容はこちらから確認できます。

使い方解説ページ

 

デジタルドリームワークスからHigaです。
今日はSVGを少し触れていきたいと思います。

SVGとは…

XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

とwikipediaで説明されています。
つまり画像をxmlで描写することが出来るというものです。
ベクター形式として描写されるので拡大しても画像が荒れないことやアニメよーションにも対応。Javascriptとの連携も出来ます。

さっくりとSVGのテストを行ってみました。
以下DDWの文字が書きなぞるように表示されていますか。
このように動きのある表現が出来ます。

これまでほとんどSVGは利用して来なかったのですが、表現の幅を広げる為にも習得していきたいと思います。
今回は触りくらいしか確認出来ていませんが、さらにSVGの知識を深めていきたいと思います。
それでは！

 

2016年6月20日現在で、「WordPress 沖縄」をgoogleで検索したらデジタルドリームワークスは4番目でした。これから3ヶ月後に1番になるために本の読んでSEO対策に実践できるかを実施します。

「SEO対策のためのWebライティング実践講座」を参考に、自社サイトをオウンドメディアマーケティングまで活用することを目指します。

googleサーチで1番になることは、もちろんですが技術もデザインも1番になることを心がけます。

デジタルドリームワークスからHigaです。
さてGoogleが猛プッシュ中のAMPについて下調べしました。
今後弊社のブログにも導入していきたいと思います。

AMPについての概要は以前に投稿した記事をご確認下さい。
http://blog.ddwnet.com/archives/1190.html

さてそれではAMPのコードを見ていきましょう！

上記が推奨されるampの雛形です。
HTMLのコーディングをしている方であれば、それほど難しくないですね。
しかしAMP独自の記述もありいくつか注意が必要です。

● htmlタグにはamp属性を入れましょう。
● canonical要素には通常記事のURL、もしくはAMP版ページしか無い場合は、AMPページのURLを記述します。
● viewport要素は「initial-scale=1」が望ましいようです。
● スキーマタグでセマンティックウェブへの対応
● AMP JS ライブラリーの読み込みとAMPスタイルの読み込み

という感じでしょうか。それに加えて以下も気をつけてましょう！
従来通りCSSで装飾を行っていきますが、AMPではhead内にインラインで以下の様に記述していきます。

[css]

[/css]

imgダグはAMP独自タグ（amp-img）だったりするようです。
その他、AMP独自タグがあったり、非推奨タグなどもあり、詳細はACCELERATED MOBILE PAGES PROJECTを確認してみましょう。

それでは次回 実際に記述してみたいと思います。

参考
ACCELERATED MOBILE PAGES PROJECT
https://www.ampproject.org/

term link の表示のメモ

カテゴリーのタームリンクを難しく考えてて、

$terms = get_terms('カテゴリー');

foreach ( $terms as $term ) {

    $term_link = get_term_link( $term );
   
    if ( is_wp_error( $term_link ) ) {
        continue;
    }
    echo '<p><a href="' . esc_url( $term_link ) . '">' <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/12345.jpg"/> '</a></p>';
}

こんな風に書いてたのですが、上手く行かず教えて貰ったところ

  <p><a href="<?php echo esc_url( get_term_link( タグID , 'カテゴリー' )); ?>"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/12345.jpg" alt=""/></a></p>

一個や二個表示するくらいならこの一行で表示させるのが楽と教えてもらいました。上の記述の場合はリストとか作る時に使う事があるみたいです！

まだまだ、山ほど勉強せなあかん！

 

お客様からGoogle マップ上位表示についてチラッと話が出たのでメモ。
Googleマップの上位表示についてまとめてみました。

1. Google マイビジネスの登録
2. ホームページと登録したGoogle マイビジネスの情報の統一
3. サイテーションを増やす

様々な要因があるようですが、自分としての最も重要な部分は上記と思いました。

 

1. Google マイビジネスの登録（無料）

・正確な情報を入力する
・入力出来る項目は出来るだけ入力する
・適切なカテゴリへの登録

Google マイビジネスへの登録自体が重要なのではなく、登録する際に正確な情報を入力することが重要です。
業務内容に合ったカテゴリの登録や紹介文などにはキーワードを盛り込んだ文章にすると良いそうです。
ホームページに記載されているビジネス名や住所、電話番号もGoogle マイビジネスの情報と完全一致させることも重要だそうです。

沖縄県宜野湾市大山6-27-11
沖縄県宜野湾市大山6丁目27番地11

など意味は同じでも、少し違う書き方をすると良くないようで統一すること。

 

2. ホームページと登録したGoogle マイビジネスの情報の統一

項目1とかぶりますが、Google マイビジネスに登録した情報とビジネス名や住所、電話番号もGoogle マイビジネスの情報を統一させる。
また登録したURLのページのtitleに都市名を入れて地域性を持たせた方が良いそうです。

 

3. サイテーションを増やす

協力していただける方などがいれば、協力してもらいサイテーションを増やしていきましょう！

 

「住所」、「電話番号」の完全一致ということは各店舗ごとにGoogle マイビジネスを登録が必要そうですね。
サポートページに一括アップロードツールなどもありました。

https://www.google.co.jp/business/faq.html

デジタルドリームワークスから比嘉です。
たぶん「こんなの知ってるよ！」というくらい、ちょっとしたメモです。

ホームページにGoogle Mapsを組み込むことは多々あります。
Google Maps APIを使用すればよりカスタム性は上がりますが、そこまでは…
という方にはGoogle Mapsの「共有」から組み込みコードを取得してコピペで簡単に導入出来ます。

Google Maps 非常に便利ですが、少し気になる部分も出てきます。
ページの表示速度が遅くなること。そしてページをスクロールする際にマップの上引っ掛かることがあります。
実際に試して下さい。

 

 

スクロール中にマップにさしかかると、マップのズームが反応してスクロールの妨げになります。
PCの場合はカーソルをマップからずらせば問題ないですが、スマホとかだと画面一杯に表示されていて面倒だったりもします。
Google Maps APIで回避する方法は以前から知っていましたが、iframeでも簡単に回避できるようです。

ちなみに、Google Maps APIでは、以下のようにマウスホイールのオプションを付与することで回避出来ます。

scrollwheel: false

 

[javascript]

[/javascript]

 

そしてGoogle Maps iframeの場合は、こちらもめちゃくちゃ簡単でした　笑
iframeのスタイルに、pointer-events無効のスタイルを入れるだけ。

pointer-events: none;

 

[html]

[/html]

 

 

スクロールがマップにさしかかってもズームが回避されてスムーズにスクロール出来ると思います。

 

—–

 

ここ数年はスマホ、タブレットに対応したサイト制作が増えましたね。
今年もサイト制作の上でスマホやタブレット対応は必須、重要となってきますが、
さらにスマホでもより使いやすいサイト設計へとステージアップ、レベルアップしていきたいと思います。
今年もどうぞよろしくお願い致します！