1回目の検索は12月8日に行いました。それから1週間経ちましたので、検索順位に変動があるのか確認しました。 結果は検索ワードに久喜や埼玉など地域を含めた検索では大きな順位の変動はありませんでしたが、検索ワードに地域を含めない検索では、表示順位が1…
12月8日のブログの続きです。 12月5日に7ページのサイトマップを送信しましたが、2日後にインデックスに登録されたのは1ページだけでした。しかし、12月12日に 6ページが登録されていました。 このサイトの「トップ」、「お店紹介」、「素材へのこだわり」、…
ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSをすべてリセットするのではなく、リセットの必要のないものはそのまま利用しようという考え方です。 ブラウザごとに異なる初期設定の差を無くす働きもあるようですが、結局基…
「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。 ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」の…
padding-topでアスペクト比をコントロールする img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。 アスペクト比を求…
PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。 PageSpeed Insights 制作したサイトに対して実行してみました。 http://monica1818.sakura.ne.jp/ モバイルに対しての結果 速度 59/100 と表示され…
PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。 PageSpeed Insights 制作したサイトに対して実行してみました。 http://monica1818.sakura.ne.jp/ パソコンに対しての結果 72/100 と表示されまし…
上位表示させたいワードを入力して掲載順位を確認しました。 検索はPCからGoogle ChromeのシークレットモードでGoogle検索を実行しました。 1ページ目に表示されることを目標にしていましたから、合格ラインはクリアしました。 シークレットモードで検索する…
12月5日にサイトマップを送信し、2日後にはサイトがインデックスに登録されました。サイトのインデックスへの登録は1週間くらいかかると思っていましたから、ずいぶん早く登録されました。しかし、登録されたのは1ページです。実質5ページのサイトですから、…
Google Search Console でWebサイトのドメインを登録しても、サイトの構成まで登録できません。そこでサイトの構成を ”XMLサイトマップ” として作成して、Search Consoleに登録します。 XMLサイトマップの作成は、サイトマップ・ジェネレーターを使うと便利…
Google Search Consoleは、Googleの検索エンジンがどのようにWebサイトを見ているのかを知ることができます。 サイトの登録は、このSearch Consoleで行います。 www.google.com サイトの登録 Google Search Consoleのサイトに入り、「プロパティを追加」をク…
widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。 確認内容 親と子のdiv要素を作り、それぞれwidthを100%にしました。 親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認しま…
300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。 確認は以下の4通り行います。 CSSで何も指定しない場合の表…
レスポンシブで画像がうまく表示されない場合があって苦労しました。 今後苦労しないために、img要素とbackgroundの４パターンで画像の表示を確認しました。 パターン１ imgタグをdivタグ囲む max-width: 100%; height: auto; パターン２ ※パターン１と２の…
flexboxのプロパティ flexboxコンテナプロパティ flex-direction flexコンテナの主軸方向を決める row | row-reverse | col |col-reverse flex-wrap flexアイテムを1行か複数行かを決める nowrap | wrap | wrap-reverse flex-flow flex-directionとflex-wrap…
フレキシブルボックスレイアウト（flexible Box Layout Module） flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素（Flexboxコンテナ）の中に子要素（Flexboxアイテム）を並べていくという考え方でレイアウトします。 flexboxの特徴 …
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
Mozilla Firefoxで画像をダウンロードする手順 １．Firefoxでダウンロードしたい画像があるページを表示 ２．表示したページ上でマウスを右クリック ３．「ページの情報を表示」を選択 ４．「メディア」を選択し、「すべて選択」をクリック ５．「名前を付け…
レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% － fixedVal…
スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像（画面幅は640px） 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像（画…
今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…
2017年1月のカレンダーをつくる 作成したカレンダー PHPソース h1 { font-size: 28px;}table { border-top: solid 1px black; border-collapse: collaose; border-spacing: 0;}td { border-bottom: solid 1px black; padding: 6px; margin: 0;}</style>__STYLE; echo…
2017年まであと何日かを求める PHPソース 2017年まで、あと {$days}日です。</p>"; 実行結果 翌週水曜日の日付を求…
URLを入力して変換ボタンをクリックすると、入力したURLのQRコードが表示されます。サイズは大(300x300)、小(150x150)を選択できます。 PHPソース
ボタンを100個表示し、ボタンをクリックするとボタンの番号を表示するプログラムをPHPで作成しました。 ソース "; for($i=1; $i <= 100; $i++){ echo "<input type='submit' name='btn' value='{$i}' style='width:48px;' />"; } echo "</form>"; //ボタンが押されていれば、押された番号を表示 if(isset($_GET["btn"])){ $btn = intval(…
マウスをクリックするとボタンが作成されます。作成されたボタンをクリックすると、アラートウィンドウ [ cliked:button 番号 ] が表示されます。 アラートウィンドウ ソース <html lang="ja"><head> <meta charset=UTF-8"> <title>ボタンを作成</title> <style> html,body,h1 { margin: 0; padding: 0; } h1{ width:490px; fon</meta></head></html>…
移行元の作業 データベースをエクスポートする xamppのコントロールパネルを起動してMysqlをstartさせ、mySQLの「Admin」を起動します。 データベース「0708_wp」を選択して全てのテーブルをチェックし、チェックしたものを「エクスポート」します。 データ…
WordPressをダウンロードしてデータベースの作成と設定を行い、WordPressを使用できる状態にします。ダウンロードはWordPress日本語サイトで可能です。 ja.wordpress.org WordPressのダウンロード ダウンロードボタンをクリックしてWordPressをダウンロード…
画像を縮小するのに使用したサイトをログに残しておきます。 画像ファイルをアップロードして縮小された画像ファイルをダウンロードするというものです。簡単な手順を箇条書きにします。 縮小したい画像ファイルをアップロード（Max２０ファイル） 縮小サイ…
