作成したバナーの数が少ないので、もう少し練習したいと思います。 Photoshopで「ゆこゆこ」のバナーを模写します。 元バナー 模写したバナー Photoshopのレイヤー

Google search consoleの検索アナリティクスによってクリック数、表示回数、CTR、掲載順位について、それぞれを「検索ワード」、「閲覧ページ」、「検索に使用された端末」別に見ていきます。 以下の用語説明は、Googleの検索アナリティクスレポートからのコ…

過去に授業でPhotoshopを使って動きのあるバナーを制作しましたので、忘れないように手順を記しておきます。 作成したバナーです。 作成手順 2種類のタイトルと4種類の色のシューズを準備しました。 「ウィンドウ」メニュー内の「タイムライン」を選択します…

楽天バナーの模写です。 楽天スーパーセールのバナー 元バナー 模写バナー Photoshopのレイヤー

PHPを使用してデータベースを検索して表示するプログラムを学習しました。 実行画面 「お問い合わせ内容一覧」の結果 テーブルに登録されている全データを表示しています。 お問い合わせ内容検索 No.(プライマリキー)を入力します。 「お問い合わせ内容検索…

JALのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景画像 ロゴ画像

ANAのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 旅客機の加工 旅客機の背面が暗いので、その部分だけトーンカーブで少し明るくしました。 旅客機の元画像

GAZOOのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景に使用した写真

コミュファ光のバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 背景の元画像

Relo国内旅行のバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー 模写で使用した背景画像

データベースの準備 MySQLにてデータベース名：mydb、テーブル：formを作成します。 formテーブルのカラムデータを作成 1 id int(11) AUTO_INCREMENT PRIMARYキー 2 name VERCHAR(20) 3 email VERCHAR(50) 4 blood VERCHAR(10) 5 message VERCHAR(400) ここ…

LCCジェットスターのバナーをPhotoshopで模写しました。 元バナー 模写したバナー Photoshopのレイヤー Photoshopで旅客機を切り抜き 使用した旅客機の画像（Google画像検索にて）

面接に臨む前に「緊張しない心構え」と「想定質問」について考えました。 緊張しない心構え 練習したんだから しょうがないよ やる事はやったんだから 面白いことを考える 感謝 気合 自信を持つ 誠意を持つ チャンス 身だしなみ マナー、笑顔 自分を営業する…

Disallowはクロールを禁止する場合に用います。しかし、インデックスに登録されないだけで情報の取得は行われているようです。 テスト用のサーバーに/monicaというディレクトリを作り、そこにWebページ一式を置いておきました。robots.txtを設置してDisallow…

Google AnalitycsはGoogleが無料で提供するWebサイトのアクセス解析ツールです。 サイトを訪問した人のサイト内の動きを把握することで、サイトの改善すべき点が見えてきます。 クライアントワークで制作したWebサイトに導入し、改善すべきところを調べたい…

Google Chromeのプライベートモードを使用し、PCとスマホの検索順位を比較しました。検索順位を調査するサイトはスマホ対応してあります。 結果は、まったく同じではありませんが大差はありませんでした。 スマホで上位表示されているサイトを見てみると、ス…

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; パターン２ ※パターン１と２の…