ブログBLOG

Googleモバイルフレンドリーの基準とは？スマホのhtmlコーディングで気を付けたいポイント

2015年4月21日から開始されるGoogleのモバイルフレンドリーについてスマートフォンサイトの制作会社として纏めてみました。 なぜGoogleのモバイルフレンドリーが必要か！？ ユーザーにとってスマートフォンなどの携帯端末を使って、多くの情報を気軽に検索することは今や日常茶飯事に ...

失敗しないWordPressのリニューアル手順

最近WordPressが関係するサイトリニューアルを幾つも行っているので、手順を４つのケースに分けてまとめました。 個人的には、どのようなケースでもwebルート直下に「wp」などのフォルダを作ってその中にWordPress一式を格納するのが良いと思います。 利用する画像などもWo ...

初心者でも大丈夫！ホームページの見栄えをよくする写真の撮り方

見栄えの良いホームページデザインを作成するためには、 写真のクオリティを高める必要があります。 ホームページの種類にもよりますが、 優れたデザインのホームページには写真を多く使っているケースが多くあります。 TOPページの場合ページの半分近くは写真・画像を使っているサイトも増えてきました。 ホーム ...

レスポンシブデザインのコーディングの３つのポイント

PC用ページとスマホ用ページなど、横幅に応じた違うデザインを１つのhtmlで実現させちゃうレスポンシブデザイン。 最近多くのサイトで使われるようになってきました。 今回は、レスポンシブデザインにするメリット・デメリットは置いておいて、コーディングする際の自分なりのポイントを３つほどまとめてみ ...

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

ホームページにGoogleマップを載せたい時は、 Google → マップ → 設定 → 地図を埋め込む で、埋め込みコードをコピーして貼り付ければできます。 ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。 以前の記事では、 ...

[HTML] シンプルで幅広いカスタマイズができるフォーム

web ページを制作する際 form まわりは時間のかかる作業のひとつです。form 部品の表示はブラウザごとや機種ごとでかなりバラつきがあるため、なかなかうまくいきません。 できるだけシンプルに、幅広いカスタマイズができるようなパターンを考えてみたいと思います。 ※HTML5 対応ブ ...

webページ作成で CSSアニメーションを具体的に使えないか試す

CSS の animation や transition を使えるようになって久しいですが、実際の使いどころはいまいちな印象です。原因の大部分は IE にあるとおもいますけど。 そこで animation に対応しているまともなブラウザさんにはおもてなしを、 そして対応していない困ったブラウ ...

江東区にあるWeb制作会社BRISKの社長日記 2014年4月

3年目に突入したBRISKですが、先日新規一転ホームページをリニューアル致しました。 設立時にホームページを作成し、そこからWordPressを入れたり、レスポンシブ対応したりと マイナーチェンジをしていましたが、ようやくリニューアルできました。 案件の合間にちょこちょこ進め、できてない機能もあ ...

Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

ホームページに地図を設定したい時ありますよね。 よく使われるのがGoogleマップを埋め込む方法です。 地図を表示させたい目的は、たいてい、ある特定の地点（例えば会社の場所）を指し示すためであり、 マーカーを置くのはほぼ必須となります。 そしてマーカーをクリックした時に何らかの動作をさせたい時も出 ...

[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する　easyselectboxの使い方

デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。 背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。 select要素の装飾用に作成されたjQueryのプラグインはい ...