Google Search ConsoleとGoogle Analytics

GoogleAnalyticsが登場したことで多くの業者が廃業に追い込まれてしまいました。
それほどAnalyticsの機能は素晴らしいもので、それなら「Adwordsから広告を出してみようか」という気にさせるものでした。

その後、サイト内だけでなく、どのような経緯で流入してきたかなど、Analyticsの機能ではカバーしきれない部分がSearchConsoleとして用意されています。
位置づけとしては、こちらが親として機能するよう調整されています。

両者は連携することでより多くの分析が可能となっています。

プロトタイピングツール

AdobeXDはもちろんのこと、その他にもプロトタイピングツールは多数あります。
AdobeXDはそのまま検索するとAdobe社公式のレクチャーサイトがありますので、一通りの学習が可能です。

MacユーザーならSketchもありますが、Windowsにも対応しているZeplinも人気です。

パララックスの練習

パララックス(視差効果)を取り入れたサイトを作成する方法について紹介します。

以下は練習用の例文のコードです。
jquery.morphing.min.jsで表現されるぷよぷよが面白いです。
背景画像が動くため、テキストが読み辛くなってしまうことも多いので、気をつけましょう。

See the Pen Parallax_practice001 by mine333 (@kenic_ono) on CodePen.0

メディアクエリの書き方

スマホ・タブレットの見栄えを考えると、デバイスにはそれぞれの画面サイズがあるため、Webサイトによっては一定のwidth値によって適用するCSSを変更したい場合があります。
CSSには@media以降に指定のwidth値を与え、デバイスの幅(device width)に応じたCSSの適用を行う機能があります。

現在の主流は、モバイルファーストと呼ばれるwidthが狭いときの見栄えを先に記述し、後に@mediaを用いてwidthが広いときの見栄えを記述する方法です。
一方で、デスクトップファーストと呼ばれるwidthが広いときの見栄えを先に記述し、後に@mediaを用いてwdithが狭いときの見栄えを記述する方法もあります。
いずれにせよ、width値がどの範囲にあるときにどのCSSを適用するのかを常に意識する必要があります。

理解の鍵はmax-widthとmin-widthの指定方法です。

min-width, max-widthとは

min-width:○○pxからcssを適用(主にモバイルファーストで使用)
max-width:○○pxまでcssを適用(主にデスクトップファーストで使用)

以下は、デスクトップファーストとして書かれたCSSで、画面幅が大きい順に 赤 > 青 > 緑 と背景色を変えるものですが、max,minの指定を誤ったために意図しない表示となっています。

See the Pen メディアクエリ失敗 by mine333 (@kenic_ono) on CodePen.0

新しいデバイスが次々に登場している時期ですので、デバイス幅やデバイスピクセル比を考えるとなかなか「決定版」といえるメディアクエリを製作するのにも工夫が必要かもしれません。

WordPressサイトのカテゴリーを並び替えよう

WordPressで作成したカテゴリーの表示順を自由に並び替えるプラグインを紹介します。
Category Order and Taxonomy Terms Orderを使えば、管理画面でドラッグ&ドロップするだけでカテゴリーの並び替えが可能になります。

使い方


1、 WordPressの管理画面を開き、メニューのプラグイン>新規追加から「Category Order and Taxonomy Terms Order」で検索。「今すぐインストール」でインストールし、ボタンが「有効化」に変化するのでこれもクリックします。


2、 無事に有効化されると、この投稿のメニューに「Taxonomy Order」という項目が追加されます。
この画面のカテゴリーをドラッグ&ドロップし、「更新」ボタンを押せばカテゴリーを任意の順に変更できます。


本体サイトを表示し、カテゴリー順が変更されていれば成功です。