chevron_left サーバー基礎 Webサイト公開

サーバー基礎 Webサイト公開

PREMIUM
第3回

「ファビコン」を設定して、サイトを目立たせる方法

2014年7月27日 60min

会員登録して、全てのスライドを見よう

1 / 17

授業の概要

「自作サイトのFTPサーバーアップロード編 全3回」(3回目)

今日は、7月22日に完成したサイトにファビコン(favicon)を表示してみましょう。ファビコンとは、ブラウザのタブやお気に入りやブックマークに登録した時に表示されるアイコンの事です。

作ったサイトをよりたくさんの人に知ってもらい親しみを持ってもらうためにもファビコンの設定をしましょう。また、仕事を発注して下さったクライアントさんの満足度も上がりそうです。

▼ファビコンの例

フリーイメージを使ってファビコンを表示させる方法を学んでいきます。
自作のイラストを使用する方は授業前までに、用意しておいて下さい。

サイト制作の大まかな流れは、下記の手順です

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析) 


このシリーズは7番のテストサーバーレビューの為に、レンタルサーバーを借りてサイトをアップロードする演習です。
テストサーバーレビューとは、ローカル(自分のPCの中)で完成したサイトがネット上でどのような動きをするのか検証する事です。自分でデバッグをして問題なければ、クライアント(サイトの発注者)さんにURLをお伝えしてチェックしてもらいます。

まだレンタルサーバーを借りてない人は20日の授業を録画授業を見てサーバーを借りておいて下さい。(授業では、10日間の無料期間のあるレンタルサーバーを借りる演習をしています。無料期間終了後は月払いだと300円、年払いだと月額250円が必要になってきます。)

7月15日までの授業を見ていない人には、アップロード用のサンプルを配布しています。
今回初めて授業を受ける方は、サンプルをブラッシュアップをして、オリジナルのサイトにカスタマイズしてして行きましょう!

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)

下記のURLからダウンロードしてください。

http://www.sublimetext.com/2

設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)

授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。

Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。

http://www7a.biglobe.ne.jp/~schezo/

 

こんな人にオススメ

Webサイトを公開したい方

チャプター

play_arrow
自己紹介&アジェンダ
04:35
play_arrow
ファビコンって何?
06:48
play_arrow
ファビコンを作ろう!:素材をダウンロードしよう
00:55
play_arrow
ファビコンを作ろう!:画像解像度の設定で48pxの画像を作ろう
02:36
play_arrow
ファビコンを作ろう!:画像解像度の設定で32pxの画像を作ろう
01:59
play_arrow
ファビコンを作ろう!:画像解像度の設定で16pxの画像を作ろう
05:27
play_arrow
作った画像をジェネレータにアップロードしよう
04:44
play_arrow
ロリポップのFTPを開こう
03:56
play_arrow
作った画像をFTPにアップロードしよう
03:20
play_arrow
他のブラウザでも見れるように、ジェネレーターサイトからコードをコピペしよう
05:18
play_arrow
ルートをおこう
02:45
play_arrow
ファビコンをアップロードしよう
08:55
play_arrow
Q:企業のロゴなどをファビコンにアレンジする場合、どんな事に気をつけたらいいでしょうか?
00:48
play_arrow
Q:初受講なのですが、1、2回目のサンプルはどこでダウンロードすればいいのでしょうか?
00:30
play_arrow
Q:今回、ファビコン作成でファビコン作成サイトを使ったのですが、他にも作成の方法はあるのでしょうか?
00:59
play_arrow
Q:いくつかのブラウザで勝手に解釈して空気を読んでいるところをはっきりと明記するような感じでしょうか?
00:55
play_arrow
Q:jQueryのbxsliderを使用して、カルーセルを実装したのですが、サーバーにアップすると表示されませんでした。サーバーにアップするとjQueryを編集しないといけないなどありますか?
01:08
play_arrow
レポート課題発表