Web情報の最近のブログ記事

こんにちは、簡単にコマーシャル動画を作成できるサービスで「コマーシャライザー」というサービスがありましたが、2013年3月末日をもってサービスを終了されるとアナウンスされました。

コマーシャライザーのサービス終了日ですが、コマーシャライザーサイトに「3月28日をもって終了」とアナウンスされました。

もしこのコマーシャライザーで作成された動画をご利用の方は、事前に動画ファイルを各自のパソコンに保存できるようになっているそうですので、事前にダウンロードしておいてください。

詳しくは「カンタン動画作成サイトコマーシャライザー」のご案内をご確認ください。

 

同じように動画を作成するソフトで駿河友の会・三遠友の会・群馬友の会では以前Windows Liveムービーメーカーをご紹介しておりますが、そちらをご利用ください。マイクロソフトの無料の動画作成ソフトです。

三遠友の会で作成した動画

こちらは群馬友の会での動画作成の模様。

 

操作方法につきましては、友の会会員の方は専用サイトへアクセスいただき、下記リンク先のページにレジメを掲載しておりますので、ご確認ください。

友の会会員専用サイト Windows Liveムービーメーカー編

※上記サイトへのアクセスには、友の会会員に発行していますIDとパスワードが必要です。

動画作成後にyoutubeなどの動画サイトにアップする必要があります。youtubeサイトへのアップロード方法については、以前の「動画設置方法」の記事をご参照ください。

 

写真の撮り方&画像加工講座のご案内

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成24年度今年度の勉強会日程及びテーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

 

よろしくお願いいたします。

Googleの無料サービスで前からありましたGoogleドキュメントというサービスですが、Googleドライブというサービスにアップグレードすることができます。Googleドライブを利用することにより、パソコンのデスクトップなどのフォルダに保存したファイルが自動でサーバと同期され、インターネット上に複製を保存しておくことができます。

今までのGoogleドキュメントではネットに接続してインターネットエクスプローラなどのブラウザで開いて使用していましたが、Googleドライブでは今までフォルダに保存しておけば、自動でサーバに複製されるので非常に便利に利用できます。

会社用のパソコンと外出用のノートと同期させておくこともできるので、便利に利用できます。

前にご紹介したDropboxとほぼ同等の機能をもっていてm、5GBまで無料で利用できます。(Dropboxは2GBまで無料)

Dropboxのサイト

 

インストールの方法ですが、まずGoogleドライブのサイトへ移動します。

※先にGoogleのアカウントを作成しておいてください。

Googleドライブのサイトへ移動したら、右上の「ログイン」ボタンをクリックします。

Googleドライブ画面

 

次にログイン画面でメールとパスワードを入力して「ログイン」ボタンをクリックしてください。

googledrive

 

下記画面が表示されますので、青い「Windows用のGoogleドライブをインストール」ボタンをクリックしてください。

windows用プログラムインストール

 

右下の「同意してインストール」をクリックします。

同意してインストール

 

インストールが終了すると下記画面が表示されます。この後、再度ログインを即す画面が表示されるはずです。

※多少時間がかかる場合があります。

また、ログイン画面が表示されない場合がたまにあるようです。私の場合自宅のPCではこのまま先に進まず終了できませんでした。

その場合一度アンインストールして再度インストールをするとうまくいきましたので、NGの場合一度お試しください。

ダウンロード終了画面

 

NGの場合の対処: (ログイン画面が表示されない方のみ)

「スタート」ボタン→ 「設定」 → 「コントロールパネル」で「プログラムと機能」を開きます。

Google Driveを選択肢、画面上部のアンインストールをクリックして一度削除して、最初の手順から試してください。

googledriveをアンインストール

 

ログイン画面が表示されたら、メールアドレスとパスワードを入力し、ログインします。

googledrive

 

下記画面で「次へ」をクリックします。

Googleドライブ初期設定

 

「同期を開始」ボタンをクリックします。 左下の「詳細設定」ボタンをクリックすると保存先フォルダなどをカスタマイズすることができます。

Google ドライブ初期設定

 

上記画面で詳細設定をクリックした場合に、下の画面が表示されます。変更ボタンで保存先フォルダの変更ができます。

設定を変更したら、「同期を開始」をクリックしてください。

初期設定画面

 

同期が終了すると、デスクトップ上にGogoleドライブフォルダのショートカットが作成されているはずです。

デスクトップにアイコンが作成される

 

デスクトップ上のGoogleドライブフォルダに保存すると、自動でネットワーク上のサーバに複製されるようになっています。バックアップとしても利用できますので、活用次第では無料で便利に使用できます。是非お試しください。

デスクトップとサーバと同期

 

 

 

静岡のWEB勉強会「駿河友の会」ではこういった勉強会を開催しています。

ご興味のある方は是非お問い合わせください。

お問い合わせ:(有)アイ・リンク・コンサルタント 

TEL 054-205-3320

以前にご紹介しました無料のフォームサービス「フォームメーラー」ですが、今回はこのフォームメーラーで作成したお問い合わせフォームからお問い合わせを受けた際に、自動で返信メールが出るように設定する方法をご紹介いたします。

フォームメーラーサービスは無料のサービスで、標準で暗号化(SSL)も対応していますので、セキュリティ的にも安心してご利用いただけます。お問い合わせフォームやアンケートなどご利用いただけます。 無料版では5個のフォームまで作成することができ、各フォームとも7項目の入力項目を設定できます。
必要であれば有料版も用意されており、フォーム項目や広告をなくしたりといったことも可能です。

弊社のホームページサービス「すこぶるCMS」をご利用の方も、このサービスを使用しておりますので、自動返信メールを設定したい方はご参考にしてみてください。

 

このフォームメーラーの登録および初期のお問い合わせフォームの作成方法は過去の記事をご参照ください。

 

お問い合わせフォームが出来ましたら、フォームメーラーログイン画面からログインしてください。

自動返信メールを設定したいフォームをクリックします。 下記例では一番下の「お問い合わせ」というフォームをクリックしています。

 

フォームメーラー画面へアクセス

 

次に画面が下図のように切り替わりましたら、メールアドレスをクリックします。

もしメールアドレスが無い場合は左サイドのプリセットから「メールアドレス」を画面右サイドへドラッグアンドドロップで移動し、メールアドレス部分をクリックしてください。

メール設定をクリック

 

メールアドレス項目の編集画面が表示されますので、「自動返信メール」の項目で「自動返信先に設定する」にチェックをいれます。

また一番したの「確認用入力欄」も「使用する」にチェックを入れておきましょう。
※メールアドレスの入力間違いを防ぐためにもチェックを入れておくのをお勧めします。

最後に「設定を保存する」ボタンをクリックします。 ※この作業を忘れられる方が結構多いので、忘れないように。

メール設定変更

 

次に「環境設定」タブをクリックします。

環境設定画面へ移動

 

環境設定画面が表示されますので、左サイドメニューの中で「各種メール設定」をクリックしてください。

下図の赤枠部分のお問い合わせがあった際に届く送信先メールを必要であれば変更してください。 またお問い合わせのお知らせメールの差出人名やユーザーの回答内容などの設定を行ってください。通常は下記のような設定で問題ないと思います。

※ここは既に設定してあると思いますので、特に設定は必要ありません。必要であれば適宜変更ください。

各種メール設定画面へ

 

更に画面下に移動しますと、自動返信メール設定画面がありますので、一番上の「使用する」にチェックをいれます。

他、「自動返信メールの件名」、「自動返信メールの本文」、「自動返信メールの差出人アドレス」、「ユーザーの回答内容」の各項目にそれぞれ入力してください。

自動返信メールの本文などは、インターネットでショッピングした際によく自動返信メールが届いていますので、そういったものを参考にして書くとよいでしょう。

最後にここでも忘れずに「設定を保存する」ボタンをクリックして、自動返信メールの設定は終了です。

自動返信文章などを記載

 

ここまでの作業で自動返信メールの設定が終了します。

あとは「コード表示」タブへ移動してソースコードをコピーしてホームページに貼り付けたり、リンク先アドレスをお知らせすれば利用可能です。 リンク先をお知らせする方法は過去の記事をご参照ください。

※尚弊社サービスの「すこぶるCMS」をご利用の方は、コード表示画面で埋め込みコードをコピーし、すこぶるCMSの管理画面へ移動して、ブログ記事からお問い合わせなど対象のブログ記事を開きます。 埋め込みコードを貼り付ける際は必ずツールバー左上の「ソース」ボタンをクリックしてから、コードを貼り付けてください

今回はソーシャルメディアのTwitterのボタンをmovable Typeのブログに設置する方法をご紹介します。ただしMovable Typeのバージョンは5です。それ以外の方は参考に適宜変更して設置ください。

追加した場合のイメージ画像は下記(赤枠部分)となります。

Twitterボタン設置イメージ

 

 

まず、おおまかな手順としては下記となります。

1、Twitterのサイトでボタンのコードを取得する。

2、Movable Typeの管理画面の「ブログ記事」テンプレートに、取得したコードを貼り付ける。

 

それではまず手順1からです。

Twitterのボタン取得サイトを開きます。 

 

Twitterボタン取得サイト

 

(1)でまずはボタンの種類を選択してください。 通常は初期の状態のままでいいと思います。

(2)で設置者のTwitterのユーザーアカウントを入力してください。

(3)で言語設定で日本語を選択します。

最後に(4)にコードが表示されていますので、このコードを全てコピーしておきます。 コピー後メモ帳などに貼り付けておいたほうが良いと思います。(途中ほかのものをコピーすると上書きされて、メモリから消える為)

 

ここまでいったら次に手順2のブログの管理画面を開きます。

 

Movable Type管理画面

 

管理画面の左サイドメニューから「デザイン」→「テンプレート」をクリックし、「ブログテンプレートの管理」を表示させます。

「アーカイブテンプレート」から「ブログ記事」をクリックします。

Twitterボタンのコード追加

 

ここで先ほどTwitterのサイトで取得したコードを貼り付けることになります。

貼り付け位置はだいたい60行から70行目あたりになります。 挿入位置を探す方法ですが、<mt:If tag="EntryBody">というコードがある場所の2行上の</div>の上に設置します。 (ちょっとここがわかりにくいところですが。)

 

コードの貼り付けが終了したら、「変更を保存」をクリックしして、「再構築」を実施してください。

 

これで下記のようにボタンが設置されていればOKです。 ずれていたりうまく表示されていない場合は挿入する行数の部分を再度確認してみてください。

 

Twitterボタン設置イメージ

 

また、今後はGoogle+の「+1」ボタンも設置しておいたほうが良いと思います。 

現在検索結果画面に著者情報が表示されGoogle+の顔写真が表示されるようになりましたが、今後よりGoogle+との連携が強まってくる印象を受けますので、ぜひ「+1」ボタンも設置しておきましょう。

前回の記事で紹介しましたHTML5&CSS3で実現できた機能:Webフォントを実際にサイトに適用させてみましょう。

このWebフォントについての概要は過去の記事をご参照ください。

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

またWebフォントを利用した事例サイトは「ちょっと一服ブログ」にも掲載しています。ご確認ください。※こちらでは日本語のWebフォントの事例も記載されています。(ただし日本語については2012年末までの試用版です)

 

それではまず、GoogleのWebフォントを提供しているサイトを開きます。(左記リンクからどうぞ)

※Googleのサービスは現状、英語のみのフォント提供です。

下記サイトが表示されます。

googleのwebフォントサービス

 

ここでは練習で一番上のフォント(字体)を設定してみたいと思います。

そのフォントの右下のあたりに「Quick use」という文字がありますので、それをクリックしてください。

Webフォントの選択

 

そうすると下記画面が表示されます。 スクロールを下に動かしていってみましょう。

Google webフォント画面

 

スクロールして画面下の方に移動していくと下記の「3, Add this code to your website」という文字(青地で白文字)の部分が確認できるはずです。

Webサイトに貼り付ける必要があるコードは下記画面の「3」と「4」の2つです。 とりあえず「3, Add this code to your website」と「4, Intefrate the fonts into your CSS」の2つのコードをコピーして、メモ帳などに貼り付けておくか、このGoogleWebフォントのページとは別で、自分のサイトの管理画面もしくはHTMLファイルなどを開いてください。(以下Movable Type5での設定方法で説明します。それ以外の方はそれぞれの環境に合わせ適宜変更箇所は変えてください)

Google Webフォントのコード取得

 

コードを管理画面から貼り付けます。

貼り付けたイメージは下図をご確認ください。 この際右上のフォーマットが「なし」になっていることを確認しておいてください。

Webフォントコード貼り付け

 

次のWebフォントを適用させる文字列のところにGoogleのWebフォントのサイトの「4, Intefrate the fonts into your CSS」のコードを貼り付けます。

なので、「4, Intefrate the fonts into your CSS」のコードをまずコピーしておきましょう。

 

Webフォントを適用させる文字列(現状は半角英数字のみにしか適用できません)にスタイルシートで記載します。

ここでは<div>というタグに設定した例でご説明します。 文字列を<div></div>で囲って記載します。 その<div>タグにスタイルシートでコピーした「4, Intefrate the fonts into your CSS」のコードを追記します。

例)

オリジナル:
<div>This is a pen.</div>

Web フォント指定のコードを追記:
<div style="font-family: 'Butterfly Kids', cursive;">This is a pen.</div>

※青文字部分はGoogleのサイトからコピーした文字列。赤文字の部分もこの通り追記してください。

下が実際に適用した文字列です。

 

This is a pen.

 

1回操作してしまえばそれほど難しくはないかと思いますが、できましたでしょうか。

いろいろとお試しください。

 

詳しいかたでわかる方は、コードの貼り付けもHMTLのlinkではなくインポートで指定したりなど、コードが3種類提供されていますので、それぞれの環境ややり方に合わせ、お試しください。

 

また日本語のフォントも無料でいくつか利用できるものがあります。「webフォント 無料 日本語」などで検索でいくつかのサイトがでてきますので、お試しください。 (いいものは有料のものが多いですね。)

 

こういった内容の勉強会も静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからどうぞ。

Webフォントを設定

| コメント(0) | トラックバック(0)

新しいWebの規格 HTML5とCSS3によって「Webフォント」という機能が利用できるようになりました。

通常ホームページではフォント(字体)を変更することは基本できず、(変えたとしても、そのフォント:字体が入っていなければ他のパソコンで見たら反映されません) 通常のゴシックか明朝体程度での利用でしかできませんでした。

今回のHTML5&CSS3によって可能になったWebフォントという機能jですが、これはパソコンに入っているフォント:字体を使用せずに、サーバー上に保存してあるフォントを都度パソコンにダウンロードして表示するようにしたものです。

これによってパソコンに入っていないフォントでも表示できるようになりました。 様々なフォントを利用できるため(もちろんライセンスなど注意すべきことはありますが)、見た目上カッコいいものや手書き風のフォントをテキスト情報のままに使用できます。このテキスト情報のまま利用できるので、今まで見出しや目立つ部分の文字は画像として作成するしかなかったのですが、その必要がなくなりました。テキスト情報(文字情報)ですので、そのまま検索エンジンにもテキスト情報として伝わりますので、その点からも良い影響があります。

イメージとしてわかりにくい場合こちらのブログを見てください。

英文筆記体の例

webフォント英文例

 

下記が実際の英語筆記体のWebフォントの例です。

Welcome to Surugatomo-no-kai Blog!
This article is test for webfont.

テキスト情報ですから、上記文字はコピーしてメモ帳などに貼り付けできます。

 

こちらは日本語フォントの例

日本語のWebフォント

 

英文の筆記体の部分も、写真の下の日本語の部分もテキスト情報ですので、そのままコピーしてメモ帳などに貼り付けることができます。

 

特に英語の場合はGoogleが無料でWebフォントを提供していますので、比較的簡単に導入することができます。日本語については今回事例のサイトでは2012年末まで無料で利用できる試用版を使っています。

ただし注意としては、英語の場合アルファベット26文字それぞれ大文字小文字と記号などで数が少ないのでファイルが軽くて、サーバからダウンロードするのに時間がかからなくていいのですが、日本語の場合は漢字が含まれることもあり、ダウンロードに時間がかかり、文字の表示に一瞬遅れがでたりすることがあります。日本語の場合はタイトルなど文字数の限られた場所での利用になるのかもしれません。

これも必要な文字のみダウンロードするような設定も可能ですが、フォントの利用にはライセンス(著作権)が関わるので、利用する際はその点確認しておく必要があります。 日本語の場合やはりいい字体は有料のものが多いですね。

 

次回GoogleのWebフォントや日本語の試用版などご紹介したいと思います。

 

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

 

静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時テーマを取り上げて勉強会を開催しています。今後はご要望を聞きながらこういったテーマも取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

今年から中学3年の息子の教科書です。中身はだいぶ難しくなってきているようです。

この教科書もカラーユニバーサルデザイン(NPO法人カラーユニバーサルデザイン機構サイトへ)に対応してきているようです。 統計的には男性は20名に1名の確立で色の認識の弱い方がいるという統計もありますので、クラスに2名くらいはいるということになります。

色の認識のパターンにも細かくわけると3種類あり、Pタイプ、Dタイプ、Tタイプとわかれており、それぞれ見え方が変わってきます。それぞれの見え方で問題ないのか確認していくことが必要ですね。 それぞれの特徴や見え方の違いについてはカラーユニバーサルデザイン機構のサイトをご確認ください。

統計からみると比較的人数が多いということになりますので、今後はきちんとこういった対応も大切だと思います。

上記のように男性の場合、色覚異常の可能性のある方が5%(20名に1名)の割合だと、結構多いことになります。 せっかく記載した情報が伝わらないとなると、チラシやホームページの意味がなくなってします。特に注意したいポイントに記載する赤色などは、この影響を受けて強調しているのがわからなくなることもありますので、注意する必要があります。

例えば通常よく使用するケースで、ワードなどのソフトで強調したい部分を赤字にして目立つようにしているケースがあります。(下図)

カラーユニバーサルデザイン 事例原本

 

P型の人には上の赤文字部分も、色の違いはありますが、わかりづらくなります。赤色の種類によっては更にわかりづらくなりますので注意が必要です。

(チェックはVischeckというサイトで確認しています。)

カラーユニバーサルデザイン 事例P型

赤文字の色がもう少し濃くなってくるとよりわかりづらくなってきます。

カラーユニバーサルデザイン 色の見え方

上記の赤色が下図のように、強調箇所がわかりづらくなります。

カラーユニバーサルデザイン 色の見え方

そういった場合には下線(アンダーライン)を入れたりし、色だけでなくてもわかるようにします。
※モノクロでもわかるようにしておくとよいでしょう。

カラーユニバーサルデザイン 対策

 

私も緑内障ということもあり、色覚的には問題ないですが、視野の問題からか、サイトの色づかいによっては非常に読みにくいサイトがあったりします。、

 

下は静岡の中学校の数学の教科書です。裏面をみると、カラーユニバーサルデザインに対応していることが記載されていました。

中学の教科書にもカラーユニバーサルデザイン

 

教科書の裏面にも対応の表記がしっかりと印刷されていました。
男性の場合、強弱はありますが、色覚異常のある方が統計上5%というのは、結構大きな数字です。

 

中学の教科書 カラーユニバーサルデザイン

 

こちらの国語の教科書も対応しています。

カラーユニバーサルデザイン対応

 

 

一度みなさんのホームページも確認してはいかがでしょう。

 

カラーユニバーサルデザインに関しては下記サイトもご確認ください。

カラーユニバーサルデザインデザイン機構ホームページ

Vischeck(色弱イメージのチェックが可能)ホームページ

駿河友の会でも以前講座で実施しました。

 

教科書の裏面「この教科書は、これからの日本を担う皆さんへの期待をこめ、税金によって無償で支給されています。大切に使いましょう」の記載が。

本であれ、物であれ、どんなものでも、それを作るために関わった人は数百人から数千人規模になります。大切に使いましょう。

今回は無料で暗号化付きのフォーム機能を利用できる無料のお問い合わせなどのフォームサービス「フォームメーラー」のご紹介です。

フォームメーラーというサービスですが、これはよくあるお問い合わせの機能を提供しているサービスです。
無料で5つまでフォームを作成することができ、質問項目も予めフォーマットも用意されていますので、簡単に設定することができます。無料版ではこの質問項目が7項目までと決められていますので、それ以上の質問項目を利用されたい場合は別途有料版もご検討ください。

このサービスであればフォームのみのアドレスを取得することもでき、またホームページへ埋め込むことも可能です。

弊社サービス「すこぶるCMS」においてもお問い合わせページにはこのフォームメーラーを利用しています。

弊社が運営していますWEB勉強会「駿河友の会」のご紹介ホームページのお問い合わせページも同様にフォームメーラーを利用しています。

以下に簡単に利用方法を記載します。ぜひ参考にしてください。

 

このフォームメーラーで設定する返信メールを自動返信に設定する方法の記事もご紹介しています。

 

フォームメーラー設置方法

1、検索でフォームメーラーのサイトを探しアクセスする。(もしくは左記リンクから)

Google検索画面でフォームメーラーを検索

矢印

2、フォームメーラーサイトで新規登録ボタンをクリックします。

フォームメーラー新規登録

矢印

3、無料版の新規登録をクリックします。

フォームメーラー無料版新規登録

矢印

4、登録に必要なメールアドレス情報を入力します。
ここで登録したメールアドレスにお問い合わせメールが入りますので、必ず受信できるメールアドレスを入力ください。

メールアドレス入力、同意

矢印

5、送信ボタンで登録メールアドレスに仮登録メールが送信されます。その仮登録メールに本登録のためのURLが記載されていますので、そのアドレスをクリックすることで、本登録となり利用できるようになります。その際パスワードなども設定。

矢印

6、本登録が終了したら、再度フォームメーラーのサイトへアクセスし、Free版のログインボタンからログインします。

無料版ログイン画面

矢印

7、画面上部の一般フォーム作成からフォームの作成を行います。

フォーム作成画面

矢印

8、入力画面でフォームをカスタマイズできます。

お問い合わせフォームカスタマイズ

 

以降各画面で設定を行います。※環境設定タブでPC公開を必ず有効に設定してください。

環境設定で公開する

 

最後にコード表示タブでアドレスを公開(もしくは相手に連絡)して利用します。

コードの取得

運営者

リンク