Googleが提供しているスピードチェック
PageSpeed Insights
HTMLの文法チェック
Another HTML-lint gateway
GetTabInfo というGoogle Chromeの拡張機能
https://chrome.google.com/webstore/detail/gettabinfo/iadhcoaabobddcebhmheikmbcjcigjhc?hl=ja
拡張機能の追加方法
Chromeウェブストアで「GetTabInfo」と検索し「Chromeに追加」で拡張機能が追加できます。
上記のリンクからも追加が可能です。
使用方法
最初に行う設定
ブラウザ右上に追加された「GetTabInfo」のアイコンをクリックします。
GetTabInfoのウィンドウが表示されます。
Templates をクリックし、
「Preview」にタイトルとURLが一覧で表示されます。
これはHTMLのタグがついた形で記載されていますが、使いやすいようにテンプレートの編集が可能です。
テンプレート変更方法
「Template」内を編集し、「Save template」をクリック。
注:下図の例ではHTMLのタグを無し、タイトルとURLを縦に並べる形にしています。
テンプレート名(任意の名前、下図はbasic2としています)を入力し、「Save」ボタンを押下。
この設定が完了したら、2回目からはブラウザ右上に追加された「GetTabInfo」のアイコンをクリックするだけで、サイトのタイトルとURLの一覧が表示され、コピーされた状態になります。
まずGoogleMapで埋め込みタグを取得。
1、埋め込みたい地図を表示したら「共有」をクリック。
2、「地図を埋め込む」を表示。
3、埋め込みタグ(HTML)をコピー。
これで取得するタグは下記のような内容。
この羅列の中で「4f13.1」という表記を変更すると縮尺が変わります。
━━━━━━━━━━━━━━━━━━━━
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.426903155609!2d139.51303491525505!3d35.54315758022669!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f831781a0c4f%3A0x4225c0d743ccd56!2z44CSMjI3LTAwNjIg56We5aWI5bed55yM5qiq5rWc5biC6Z2S6JGJ5Yy66Z2S6JGJ5Y-w77yS5LiB55uu77yW4oiS77yR!5e0!3m2!1sja!2sjp!4v1544070708695″ width=”100%” height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
━━━━━━━━━━━━━━━━━━━━
「13.1」が尺度で、数値が小さいほどズームアップします。
1〜179の間で調節してみてください。
デフォルト(「4f13.1」のまま)の表示
1(「4f13.1」を「4f1」にする)の表示
179(「4f13.1」を「4f179」にする)の表示
※この記事は2018年12月現在の内容です。GoogleMapの仕様変更により利用できなくなる場合もあります。ご了承ください。
W3C
https://www.w3.org/Style/CSS/
Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.html
iPhoneやAndroidのスマートフォンからWordPressを更新したいというリクエストが増えてきました。
以前はプラグンインとして管理画面をスマトーフォン対応にしていましたが、iPhoneやAndroid専用のアプリを利用する方法が使いやすいのでいいと思います。
特にアプリがいいのは文字の入力をスマートフォン自体の入力ボタン(キーボード)が使用できること、そして画像も入れやすいことです。
iPhoneならApp Storeから「WordPress」で検索
https://itunes.apple.com/jp/app/wordpress/id335703880?mt=8
AndroidならGoogle Playから「WordPress」で検索
https://play.google.com/store/apps/details?id=org.wordpress.android&hl=ja
どちらも無料です。
Googleから無料で提供されている翻訳機能をホームページに追加する。
Googleへアクセス
http://translate.google.com/manager/website/
右の青いボタン「今すぐウェブサイトに追加」を選択。
ログイン画面に移動するので、Googleアカウントでログインする。
アナリティクスを使用している人はそのIDでログイン、ない人は新規でアカウントを作成。
ログインしたら早速設定開始
今回は当社運営のSEOファクターに設置する「www.seofactor.org」
ウェブサイトの言語は「日本語」を設定(セレクトの一番下にありました)したら「次へ」。
今回は「英語」「韓国語」「中国語」そして「日本語」を選択。
「日本語」はなくてもいいのですが、最終使用画面で上にGoogle翻訳バーが表示されますが、もしそれを見れないようにバー右の「×」をしても「日本語」に戻れるようにしたかったので今回は選択。
アナリティクスを使用している人はアナリティクスのプロパティIDを入れる。
最後に2つのコードが出来上がりので、1つは「/head」の前と、1つは表示させたい場所のHTML内にコピーペーストする。
以上が終了。
実際には
翻訳されるとGoogle翻訳のバーが上部に表示される。
Google Mapでマーカーなどいろいろな機能を使いたい場合に場所の緯度経度を簡単に調べる方法
1、住所が分かれば「Geocoding」が便利
例えば「横浜市青葉区青葉台1-6-21」と入れると
簡単に緯度経度を表示
2、実際のGoogle Mapで緯度経度を調べたい場合はGoogleでログインした状態で、その場所をなるべく大きめに表示する。
知りたい場所にWinなら「マウス右クリック」、Macなら「コントロール+クリック」するとポップアップ案内がでます。その一番下の「この場所について」を選択。
上のGoogleマーク横のボックスに緯度経度が表示されます。
※便利なのが緯度経度が分かるとGoogle Mapの中心を決める時にとっても役立ちます。
Googleの地図をホームページに入れる方法。
Googleサイト地図より住所を入れて検索
「神奈川県横浜市青葉区青葉台1-6-21 a・cube」
「リンク」アイコンをクリックするとウェブサイトへの地図埋め込み用 HTML コードがでるのでその中の「埋め込み地図のカスタマイズとプレビュー」をクリック。
地図の大きさを「大」にしてズームを調整し埋め込むHTMLをコピーして、自分のサイトへHTMLをペーストする。
実際に見ると吹き出しが表示されるので、吹き出しを非表示にする
HTML内の/iframeの最後の前部分に「&iwloc=B」を追加
<iframe width=”640″ height=”480″—————–
————————–;output=embed&iwloc=B“></iframe>
サイトがレスポンシブデザインなら「width」設定を「100%」にする。
<iframe width=”640″ height=”480″—————–
を
<iframe width=”100%” height=”480″—————–