カテゴリー: コーディング

マウスオーバーとかロールオーバーとか、CSS？JS？ちょっと難し目の話。

 

 

マウスオーバーとかロールオーバーとか言われるものがあります。これを何で組むのかどうかみたいなものです。正直決まりがないのですが、シンプルな方がいいです。

そういう場合にはKISSメソッドを意識します。

KISSメソッド　＝　Keep It Simple, Stupid
の略語で「誰でもわかるくらい単純にしてね」の略です。シンプルイズベスト。
となると、マウスオーバーもシンプルなものが好ましいとなります。

http://www.clarenet.co.jp/img/template/globalNavi03_out.jpg

http://www.clarenet.co.jp/img/template/globalNavi03_out_on.jpg

でオンマウス時の画像は　_on　で制御してます。あとは　class=”over” を設定画像でOK。over画像の指示を出してます。CSS制御です。ドリームウィーバーに「スワップイメージ」とかあるのでそれでもいいんですけど、KISSメソッドからすればCSSがいいような気がします。

頭の部分にはいろんな要素や属性的なものを入れます。
体には中身を入れます。

すごいシンプルイメージでHMTLは成り立ちます。こんな覚え方で20年前のものをしっかり覚えているものです。18歳の時のHMTLの覚え方。

クライアントサイドとサーバーサイド。
まずはクライアントサイドから開始するのが大事です。

クライアントサイドの
・HTML
・CSS
・js　あたりの仕組みをある程度理解してから

サーバサイドの
・php
・mysql　あたりに進むのが大事。最初にデータベースなど理解難しいです。DB知ってるけどHTMLわからん、そんな人はいませんふつう。

「ajaxzip3」を使えば、郵便番号を入力すると住所が表示されるシステムが構築できます。
第六十二回「簡単ajaxzip3を使って、郵便番号を入力すると住所が自動表示されるフォームを作成する。」

しかし、ボタンがあった方が分かりやすいという声もあります。
今回は、自動ではなくボタンで住所が表示される方法を見ていきます。

■記述方法

■こんな感じで表示されます。

※フォーム自体はこんな感じです。

※郵便番号を入力して

※検索を押すと

住所が表示されます。

★完成★

記述も少し変更するだけなので、自動表示と状況により使い分けましょう。

今回はPDFを回転して保存できるフリーソフト「PDF-Viewer」をご説明します。

■PDF-Viewerの使い方

窓の杜などからフリーソフトのPDF-XChange Viewerをダウンロードしてきます。

「PDFXVwer.exe」を起動します。

セットアップ画面で次へを押します。

次へを押します。

次へを押します。

次へを押します。

次へを押します。

Free版を選択し次へを押します。

インストールを押します。

完了でインストールを押します。

アプリケーションを起動します。

回転させたいPDFファイルをドラッグして開きます。

ドキュメントを押します。

ページの回転を押します。

方向を決めてOKを押します。

回転したこと確認したら

ファイルの中のファイルを上書き保存。

★完成★

PDFファイルが回転するだけで、保存できない方は試してみてはいかがでしょうか。

「ajaxzip3」を使えば、郵便番号を入力すると住所が表示されるシステムが構築できます。
それでは、使い方を見ていきます。

■head内に下記スクリプトを記載します。

■フォーム内にはこのように記載します。

■使用感はこんな感じです。■

※フォームはこんな感じで、郵便番号に数字を入力すると…

※7ケタの数字を入れます。すると、住所が自動生成されます。

※さらに、郵便番号の3ケタの後ろにハイフンを入れても…

※しっかり表示されます。

★完成★

短い記述で、コンタクトフォームの入力補助が出来るようになりました。
お問合せやご注文時や会員登録の入力って面倒なので、補助することができればコンバージョンが増える事間違いなしでしょう！

知名度抜群のWPtouchプラグインのご紹介です。
導入するだけで、スマホ表示したときに見やすく最適化してくれる優れものです。

■「WPtouch」のプラグイン導入方法

1.「WPtouch」のプラグインをインストールします。

2.現状のサイトがこちら。

インストール後、スマホで見てみると・・・

★完成★

スマホユーザーが増えている昨今のインターネット業界。
スマホでホームページを見る人が多いのならば、スマホ用にホームページを最適化して見やすく設定してあげましょう。閲覧数増加が狙えます。

また、今回は導入のみですが、カスタマイズすることによってデザインの幅が広がるのも嬉しいですね。

今回は、pタグ・li・dt・ddなど、連続して使うタグの何番目かにだけ特別なCSSをあてる方法を備忘録します。

■以下のようなHTMLをベースとして考えます。

■htmlの記述

■cssの記述

■初めの要素のみにCSSを適用する記述。

■cssの記述

■最後の要素のみにCSSを適用する記述。

■cssの記述

■上から5番目の要素にCSSを適用する記述。

■cssの記述

★完成★

n番目の指定は、そのタグ数の順番に依存するため、使い所に注意しましょう。

第三章では「SEO対策でのキーワード選択の重要性」をご説明します。

キーワードの選定は、ホームページ集客のSEO対策で非常に重要となります。
キーワードがある程度決まっていると、ホームページのデザインやアピールポイントも明確に見えます。
キーワードの考え方ですが、まずは自分のホームページで何を売りにしたいかを考えます。

例えば、「りんご」のホームページを作ります。

しかし、「りんご　料理」なのか「りんご　栽培」なのか「りんご　飴」なのかによって、
イメージする色もデザインも変わってしまい、まったく別物のサイトとなってしまいます。

SEO対策でキーワードを決めるということは、ホームページの集客以外にも効果があるのでしっかり選定しましょう。

さらに、キーワードを具体的に決める方法として、基本的にはアクセス解析を行って
検索につながるキーワードを探すのが確実なのですが、アクセス解析を行わなくても、
ホームページを使用するニーズを探ることによって選択できます。

少し違った言い回しの違いを記載するだけで、検索に繋がることもあります。
しっかり検索キーワードになりそうなものを選定しましょう。

良い検索キーワードを設定できると訴求に繋がります！！

次回、【第四章】でお会いしましょう。

ホームページを作成する業務について、勉強していくうちにCSSの発音が間違っていないか不安になることってありませんか？

今回は私が読み方を間違えやすいCSSや、言い方が複数あるCSSをご紹介します。

1.「width」

これは「ウィドス」と発音します。横幅を指定できるプロパティです。
実際は「ウィドゥス」や「ウィズ」など複数呼び方があるみたいです。

2.「opacity」

これは「オパシティ」と発音します。このプロパティを使うと透過することができます。

使い方：第四十八回「何回も調べてしまった覚えてしまいたいCSSまとめ～その一～」

3.「relative」

これは「レラティブ」と発音します。このプロパティを使うと相対指定することが出来ます。

使い方：第四十八回「何回も調べてしまった覚えてしまいたいCSSまとめ～その一～」

4.「absolute」

これは「アブソリュート」と発音します。このプロパティをつかうと絶対指定することができます。

使い方：第四十八回「何回も調べてしまった覚えてしまいたいCSSまとめ～その一～」

5.「border-radius」

これは「ボーダーレイディアス」と発音します。このプロパティを使うと角に丸みをつけることができます。

使い方：第五十五回「写真の角に丸みをつける簡単CSS」

★まとめ★

読み方を間違うと恥ずかしいので、間違いやすい英単語はチェックチェック！