備忘録 アーカイブ

自分のホームページやブログにFacebookページの内容を表示させる

お客様より「ホームページにFacebookの内容を表示させるには?」とご質問をいただきましたので、下記に手順を。気になる方は参考にしてください。

①まず、facebook開発者のLike Boxのページにいきます。

こちら → http://developers.facebook.com/docs/reference/plugins/like-box/

Like Boxページ


②次に左側の設定項目に入力します。
  設定しながら右側のプレビューで確認ができます。

Facebook Page URL
自分のfacebookページのURLを入れます。

Width
埋め込み窓の横幅を入力します。

Color Scheme
埋め込み窓の色味です。lightかdarkのどちらかです。

Show Faces
いいね!を押してくれた方の写真を出すかどうかです。出す場合は「Show Faces」をチェック。

Border Color
枠の色です。指定する場合はカラーコードを入力。

Stream
更新・書き込み内容を表示するかです。表示する場合は「Show stream」をチェック。

Header
「Facebookもチェック」の青帯を出すかどうかです。出す場合は「Show header」をチェック。


③プレビュー内容でよければ『GetCode』をクリックしコードの生成。

『GetCode』クリック後、コードの種類を3種類の中から選べます。
とりあえず、一番右の「IFRAME」でいいかと。

生成コード例


④生成されたコードをコピーして、自分のホームページやブログの表示させたい場所に貼り付けます。

※ jimdoやみんビズのホームページに貼り付けたい場合は、埋め込み窓を設置したい場所で、「新項目を追加」→「ウィジェット/HTML」を選んで、貼り付ければOKです。

確認のために、Facebookでどうでもいい事実を書き込んでこのブログに設置してみました。(左下にあります。)
ちなみに横幅は「180」です。


Facebook Static HTML を使ってみた

前回の記事のとおり、Facebookでアプリケーションの作成をしたくても、携帯電話で認証が出来ず、先に進めなかったので、すでにあるアプリケーションの中で「Static HTML」を使ってみた。

使い方は…

Facebook内で「Static HTML」で検索するか、下記をクリック。
Static HTML

「アプリへ移動」を押し、アプリを追加(許可)する。

次に出てくる「ご利用の流れ」の手順通りに登録や追加を行う。
全然簡単。

Static HTML 追加しますか?
こんな画面が出るので、「Static HTMLを追加する」をクリック。
これを追加しないと、ページは追加されません。


ページ一覧画面
左側に「static HTML」が追加されてるので、それをクリックするか、「アプリ」から「static HTML」を選ぶと、こんなような画面になる。確か…。(1日経つと記憶もあいまい…(´Д`;)

これでもう編集可能です。


編集画面
編集画面ですが、上の方に「WYSIWYGモード」と「HTMLモード」とあります。
上の画像は「HTMLモード」ですが、「WYSIWYGモード」にするとご存知の方はご存知(そりゃそーだろ)、HTMLが書けなくてもワード感覚でページを作成する事ができます。
しかーも、「いいね!」を押してないユーザー向けのページも作成する事ができます。
ちなみに左側の「static HTML」の文字もちゃんと変更可能です。


このアプリの良いと思ったところは、
サーバーを用意してない人でもページを作れる。
HTMLが書けなくても大丈夫。
「いいね!」ボタンを押してくれた人へと押してない人へのページを作れる。
ってとこだと思いました。

ちょっと残念なところは、これ以上ページを増やすことはできません。(増やしたい場合は有料)
あと、動きが重いってところでしょうか。

でも、「とりあえず作りたい!」、「1ページで十分!」って方にはいいんじゃないでしょうか。


Facebook 登録してみた。 けど…

Facebookページが気になったので、登録してみました。
Facebookの登録自体は簡単。

Facebookのページからアカウント登録をすればOK。
ちなみにサイトで使っている「info@」のメールは登録出来ませんでした。
「info@」や「admin@」みたいな一般的なアドレスじゃなく、個人用のアドレスで…みたいなメッセージが。

プロフィール設定もそこそこに、Facebookページの作成を始めてみた。
カテゴリーを選んで、必要事項を入力して…。
その程度で、準備OK。

基本データの入力もそこそこに(またか)、iframeを組み込むべくアプリを登録。
が、その途中、
Facebook アカウント認証 モバイルテキスト
携帯電話か、クレジットカードを登録してアカウント認証を行って下さい。と…。

先日のITリーダー研究会で聞いてたので、「あぁ、これか。」と思い、「絶対、携帯電話。」と「携帯電話」の文字ををクリックし、「Facebookテキストに登録」をクリック。
(※研究会で携帯電話を推奨していた訳ではありません。むしろ、クレジットカードの方がすんなり認証できるという話でした。)

まず、国を選択するようになっているんですが、日本がない…(-ω-lll)

それでもいろいろ探しまくって、携帯のメールに認証コードが届き、コードを入力するも、認証されず…。
どうにかならんか…と一晩置いてみたり、アカウント一回削除してみたりしてあがいてみたものの、結局携帯電話を登録することだけしかできず。
でもどうやら、現時点では携帯電話では認証できないらしい。
クレジットカードでなら、認証できるそうですが、私はどーしても嫌。

いろいろ調べたり、Facebook内クリックしたりしてるうちに、「アプリケーションの作成」からではなく、すでにあるアプリは使える事が判明。
さっそく「アプリ」で「iframe」で検索してみると、たくさん出てきた。
しかも、横文字多し!!il||li(つд-。)il||li

たくさんの中から、一つ日本語のものを使ってみました。
その話は、また今度。

あ、Facebook内で私を探さないでください!w
試してるだけで、コミュニケーション関係の機能は今のところ使用しない予定なので…。


Google タイムライン検索

今度は、Googleのナビゲーションパネル内の「タイムライン」をクリックしてみました。
Google Japan Blogによると、「歴史や人物の生い立ちなどを時系列で調べたい時、年表形式で検索結果を閲覧することができます。」という事だったので、「坂本龍馬」で検索。

龍馬伝」見てますか?
私は見てます…。(どーでもいい情報…(´Д`;)

坂本龍馬 タイムライン検索結果

するとこんな感じ。
棒グラフが高く伸びているところは、重要なイベントがあった時期だそうです。

ここから、グラフの気になる部分をクリックしたり、検索結果にある西暦をクリックしたりして年代から月まで期間を絞り込んだ検索ができます。

検索結果に表示される要約文(?)を見てるだけでも結構おもしろかったです。


期間指定検索してみた

昨日に引き続き、Googleのナビゲーションパネルにある期間指定検索をしてみました。
検索語句も同じく「松本市 ホームページ作成」のまま、「最新」をクリックしてみました。
ガラリと検索結果が変わりました。

1ページ目の10件、確認すると全てブログ記事でした。
しかも、記事やブログの内容は松本市に関係する話ではあるようでしたが、ホームページ作成に関してはほぼ無関係。
その代わり、どのブログにもGoogle AdSense の中、または他に「ホームページ」というリンクがありました。
でーもー、純粋に検索してたとしたら、クリックせず検索キーワード変えるか、普通の検索に戻してるだろう検索結果。

これは、検索したキーワードが悪かったと思い「父の日 プレゼント」に変更。
「2日以内」と「1カ月以内」をクリックしましたが、うーん…。
特に期間指定を使った方がいいような気は…。

結局、使いどころ分からず…。(´Д`;)
調べたい事によっては使うかなぁ???って感じです。

もう活用されてる方って多いのでしょうか?


Googleの検索結果画面が変わった!

お久しぶりです。
バタバタと忙しくしているうちに、Googleの検索結果画面が変わりました。

検索結果画面の左側にメニューのようなものが。
ぱっと見、どっかで見たことあるような気もしましたが、ナビゲーションパネルというそうです。
これによって、今までよりも探している情報を簡単に見つけられるようになったらしい…。

Googleナビゲーションパネル

「すべて」のすぐ下の「もっと見る」をクリックすると、今までもあったような「画像」「動画」「地図」といったカテゴリ検索が。

それよりも、その下にある「その他のツール」をクリックすると指定した期間内に更新されたサイトやブログが表示されたり、プレビュー画像が表示されたりと今までは検索オプションの中に隠されてた(?)ようなものが表示されるようになりました。

検索オプションなんて今まで使った事なかったけど、こーなると使ってみたくなる…。
という訳で、いろいろクリックしてみました。

が、それはまた次回。(´Д`;)


Adobe Flash Playerの更新

Windows Updateはされてると思いますが、Adobe Flash Playerも時々更新が必要です。

先日、Adobe Systems社より、Adobe Flash Playerの脆弱性を修正する更新プログラムが公開されました。
これらの脆弱性を利用した悪質なプログラムが埋め込まれたウェブサイトを閲覧すると、パソコンが異常終了したり、悪意のある第三者にパソコンが乗っ取られるなどの被害にあう恐れがあるそうです。

すぐさま最新版にアップデートしましょう。

■Adobe Flash Playerのバージョン確認
パソコンにインストールされているAdobe Flash Playerのバージョンの確認は、こちらの「Adobe Flash Playerのバージョンテスト 」で確認できます。

Your Player Versionで表示されたバージョンと、ページの下の方にある「現在の Flash Player バージョン」を確認して、最新じゃなかった場合はアップデートします。

■Adobe Flash Playerのアップデート
最新版の更新プログラムのアップデートは、こちらの「Adobe Flash Playerのインストール 」から行えます。

同時にインストールと書いてある「無料のMcAfee Security Scan (オプション)」が必要なければチェックをはずし、「今すぐインストール」をクリックするとインストールできます。

あ、インストールの前にFlash Player のバージョンやダウンロードオプション、ソフトウェア使用許諾契約書を確認してください。

ちなみに、複数のブラウザを使用している場合はブラウザごとにインストール作業が必要です。


よくある質問

お客様とお話していて、以外によくある質問。

「URLとアドレスって違うんですか?」

そう聞かれると「おぉ~、確かに…。」って感じかもしれません。
深い話は私も出来ませんが、普段使っている感じで言うと「サイトのURL」と「サイトのアドレス」という言い方であれば同じ意味になると思います。

ただ、「アドレス教えて!」とだけ言われたら、携帯やパソコンのメールアドレスの事を思う方が多いかも知れません。

という感じで、「アドレス」だけではいろんな意味に取れてしまいます。
実際に「アドレス」だけでは、「ネットワーク上の存在場所」「メールアドレスの事」「データの位置を示す番号」などの意味があるようです。

それに対して「URL」は、「インターネット上に存在する情報の住所」という事なので、使い分けるとしたら、「サイトのURL」と言う方が正確という事になると思います。

とは言っても話の流れやその時の状況などで、どちらを使っても大体分かると思うので個人的には「そんなに気にしなくても分かればOK。」と思ったりしています。(´∀`;A


MT トラックバックエラー

今日、MTブログへトラックバックを送ると「トラックバックは失敗しました: HTTP error: 403 Throttled」エラー」というメッセージが出てトラックバックが送れないという問題があったので調べてみました。


症状は…
送った側 :「 トラックバックは失敗しました: HTTP error: 403 Throttled」エラーが出て、何回やっても送れないよ~。」

受ける側 : 「でも、迷惑トラックバックはいっぱい来るのに~。」
という感じ。
ちなみに、MT以外のブログからトラックバックを送信した場合、「送信済み」となる場合もあるそうです。

どうやら、MTの方で予めスパムトラックバック防止のため、制限をかけているようです。
対処方法は、環境設定ファイル「 mt-config.cgi 」に、「 OneHourMaxPings 」と「 OneDayMaxPings 」というのを設定すればよいそうです。

①「 mt-config.cgi 」 を開きます。(MTをアップしたフォルダ内にあると思います。)
②一番最後に、「 OneHourMaxPings 50(←任意の数) 」と
  「 OneDayMaxPings 500(←任意の数) 」 と追加。
※ダウンロードして変更した場合は、アップロードを忘れずに!


あまり数を増やしすぎても、その分スパムトラックバックが入ってきてしまう事もあるので、ほどほどの数を設定した方が良いかと思います。
あとは、頑張ってスパムトラックバックを削除…(´∀`;A
意味については、下記を参照ください。

(以下、Mobable Type 環境変数リファレンスより抜粋)

OneHourMaxPings
特定のブログに対するトラックバックについて、1時間に受け付けられる最大値を設定できます。ThrottleSeconds で制御できないトラックバックスパムを制限することに利用できます。
デフォルトは、10。

OneDayMaxPings
特定のブログに対するトラックバックについて、1日に受け付けられる最大値を設定できます。ThrottleSeconds で制御できないトラックバック・スパムを制限することに利用できます。
デフォルトは、50。

ThrottleSeconds
サイトの閲覧者がコメントを投稿した後に、再投稿できない時間を秒数で指定します。
デフォルトは、20。


nofollow属性

Yahooブックマークの事を調べてる時に気になった「nofollow」。
そういえば、MTにもあったな?と調べてみました。

nofollowとはリンクタグの属性で、リンクタグにこの属性がついているとGoogleやYahooなどの検索エンジンではそのリンク先をクロールしないそうです。
無視されてるので当然、被リンク数としてもカウントされません。

MTの場合、3.2以降から初期設定でトラックバックやコメントのリンクには「rel="nofollow"」が付くようになってます。(4.xになるまで知らなかったけど…。
もちろん、はずす事もできます。

ブログ記事に貼ったリンクやブログタグには、「rel="nofollow"」は付きません。
だって管理者が自分で書いたものなので。

Yahooブックマークに続き、やっぱり外部から貼れるリンクなどには効果がない、または何らかの対策が実装されるって事ですね~。
地道にサイトを良くしていく事が一番のようです。


Yahooブックマーク

先日の何でも座談会で少し話題になった「Yahooブックマーク」。
Yahooブックマークの登録数が多い方がYahoo検索で上位表示されるか?
家に帰ってから、自分なりに調べてみました。

やはり、Yahooブックマークの数がYahoo検索での表示順位に有利という事はなさそうです。
先日の何でも座談会の時に確認した時も、確かにブックマーク登録数が多い方が上位表示されているというわけでは無かったし。

よーっく考えてみれば外部の人の手によって操作?仕掛け?うまく言えませんが、なんとかできる事で順位が変わるようでは、Yahoo検索自体の質が落ちるわけで…。
IDなんて、取ろうと思えば一人で何個も取れる訳だし。(´∀`;A

もしかしたら、登録数を参考にクリックしてサイトを見に来てくれる人もいるかもですが、内容が伴ってなければ結果にはつながらないって事で…。

ブックマークはあくまでもブックマークという事かな。


FC2ブログからのトラックバックが文字化け(追記編)

先日書いた対処方法を行っても、一度受信して文字化けしてしまったものは直りませんでした。
可能であれば再度送りなおして頂くか、可能な限り手動で直すしかないかもです。

今回私は、確認のために、乾式タイル、外壁のタイルリフォームの原タイルさんにご協力いただいて、文字化けしてしまっていた時と同じ記事から同じようにトラックバックを送り直して頂き、確認しました。


文字化け解消


原さん、ありがとうございました!


FC2ブログからのトラックバックが文字化け(対処編)

小粋空間さんに、「Trackback文字化け対処」とあったので参考にさせていただきました。

やる気になって読んでみると作業は簡単。(´∀`;A
一応、このブログ(MT3.33)の場合です。
「mt」フォルダ内の「lib/MT/App/TrackBack.pm」を開いて2行追加するだけ。
ちなみに、小粋空間さんでは、まず「Jcode.pmのダウンロード」とありますが、3.33は最初からあるので飛ばしました。


「TrackBack.pm」を開いて、57行目以下を

sub no_utf8 {
require Jcode;
for (@_) {
next if !defined $_;
$_ = pack 'C0A*', $_;
$_ = Jcode->new($_)->utf8;
}
}

と変更。
上から2行目の「require Jcode;」と、6行目の「$_ = Jcode->new($_)->utf8;」を追加しました。

修正画面
こんな感じ。赤い下線の部分を追加しました。
最後の「utf8」の部分は、自分のブログの文字コード(euc、sjis など)にします。

これで、ファイルをアップすればOKなはずです。

ちなみに、最近私のまわりで流行ってる(?)MTOSで試す場合は、「MT」フォルダはなしで、「lib/MT/App/TrackBack.pm」を開き、先程とは違い79行目あたりから「sub no_utf8 」と始まってるので、同じように追加すれば大丈夫だと思います。


FC2ブログからのトラックバックが文字化け(謎編)

以前に頂いたトラックバックが文字化けをしてました。

文字化け
送信元のブログはFC2ブログです。
以前にも同じ方の同じブログからトラックバックを頂いた時は、文字化けせずに表示されました。

調べてみると、何箇所かで「文字コードの異なるブログ同士でトラックバックをすると発生。」と書かれてるのを見ました。

試しに私もFC2ブログからこのブログへトラックバックを送ってみましたが、文字化けせず…。
送信元の記事のタイトルが半角で始まってたので、同じようにタイトルを半角文字で書き始めてみた記事を、このブログへトラックバックしてみたけど、文字化けせず…。

いろいろ試してみましたが、結局文字化け状態に出来ず終い。
分からん…。


カート付き携帯サイトを作るなら

そういえば、レンタルショッピングカートの「ジョイカート」でも、携帯対応ってあったんじゃないかな~?と思い、確認。

あった!
商品ページは自分で作成し、カートだけレンタルするAタイプの方も、商品一覧ページからカートまでレンタルするBタイプの方も、それぞれモバイルというプランがありました。

docomo、Softbank、au のすべてのキャリア機種に対応だそうです。
商品写真も携帯用に小さいサイズを用意しなくても、自動で小さく表示されるらしい。
もちろんSSL対応で、さらに会員制も使えて、各キャリアに対応した絵文字も使える!

ジョイカートのページ内の「管理画面サンプル」で「携帯用の設定」からページの作成を見てみたけど難しくはなさそうでした。

携帯用ショッピングサイトを作るなら、いいかも。
3日間の無料お試し有り!

レンタルショッピングカート 「ジョイカート」
料金は当然プランによって異なります。
Aタイプの方は、利用要件有。
Bプランのサーバーセットプランの方は、「.com」「.net」「.org」のドメインの取得・管理費用無料!どうせなら、こっちか!?


ホームページ作成のデザインカフェよりお知らせ

ホームページ作成のデザインカフェ、および当ブログをご覧頂きありがとうございます。

現在、ご依頼の方が混み合っており、お問合わせ頂いた方々にはご迷惑をおかけしており大変申し訳ございません。

個人での運営の為、一度に沢山のご依頼をお受けする事が出来ず、ご依頼を頂いた順に作業をさせて頂いておりますが、現時点でご依頼頂いているお客様とご予約頂いているお客様で年内作成開始分のご依頼を締切とさせて頂きました。

年明けより、ご依頼の受付を開始できる予定でございますが、お急ぎでない方には今まで同様、先にお打合せだけさせて頂いて、お待ち頂いている間にお客様の方でご用意頂くもの(原稿、素材等)を準備しておいて頂き、作業に取り掛かれ次第、ご依頼順に作成を開始させて頂く様な対応を取らせて頂いておりますので、お問合わせください。

ひとつひとつ、丁寧に作業させて頂きたいと思いますので、ご理解のほど今後もホームページ作成のデザインカフェをよろしくお願い致します。


画像ファイルも疑え!

いつもの様に、firefoxで確認しながらメモ帳でスタイルシートをポチポチ書いて、適当なところでIE6でも確認してみたら、背景に指定した画像が表示されてない事を発見。

えー。なんでぇ??
bodyの背景だよ??何がおかしいんだろ…。

いろいろ消したり、書き直したり…。
firefoxでは表示されてるんだから、ファイルパスは無いだろ…と思いつつ念のために疑ってみたり。

とうとう「あー、もうパソコン壊れたわっ。」と得意のパソコンのせいにして再起動とかしてみたり…('A`)

そんなこんなでもがき苦しむ事、小一時間。
「もう、これは画像がおかしいんじゃねーの?」と、photoshopでGIFファイルを開いてみると何やらエラーが出た。
あらためて保存しなおしてみると…

出た!!

もう何なんだーっ。

疲れた…。
今日はもう終わりにします…。


HTMLとXHTML

HTMLからXHTMLに…という流れになってきている訳ですが、で結局どうすりゃいいの?って話です。
で、調べたりしてみると「HTML4.01の時に…」とか「W3Cが…」とか「マークアップ言語を…」という話の段階で うぅ…(-ω-lll) と頭を抱えました。
そして今でも頭を抱えます…(;´∀`A)

そんな私でも、なんとかXHTMLと思われるものでサイトを作るようになってとりあえず気をつけているHTMLとXHTMLとの大きな違い。

1.XML宣言をする

2.タグは全て小文字で書く

3.終了タグを明示する

4.空要素タグの最後に「 /(半角スペースとスラッシュ)」を入れる

5.属性値は必ず引用符(")で囲む

といった感じです。
あくまでも私が思っている大きな違いですが…。本当はもっと細かく、ちゃんといろいろあるはずです。

1.XML宣言をする
XML宣言と言って、一番最初(1行目)に
<?xml version="1.0" encoding="Shift_JIS"?>
を書かなくてはいけません。

だけどこれを書くと、IE6ではDOCTYPEスイッチというのが起こり、後方互換モードってやつで動作します。
「後方互換モード」は、web標準に準拠していない古いブラウザに合わせて動作します。
ちなみに、「標準準拠モード」は、W3Cの仕様に準拠した表示をします。

で、せっかくXML文書だよと示すためにXML宣言を書いたのに、IE6では互換モードになってしまってレイアウトが崩れたりしてしまいます。
でも、文書の文字コードにUTF-8、UTF-16をつかっていればXML宣言は必須じゃないよとなっているので、この文字コードで書いていればXML宣言は省いても大丈夫です。

実際にはXML宣言の後に、DOCTYPE宣言を書いて、xmlns属性の指定を書くようになります。
私の場合だと(XHTML 1.0 にも3種類のDOCTYPE宣言があるので…)
<?xml version="1.0" encoding="Shift_JIS"?> (XML宣言)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (DOCTYPE宣言)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> (xmlns属性)
と書いてます。


2.タグは全て小文字で書く
これはそのまんま、タグは全部小文字で書きましょう。
「HTML」と書いたり、「ID」と書いたりしてはダメです。
「html」「id」といった風に、全部小文字で。


3.終了タグを明示する
終了タグを省略できません。

例えば…
■HTMLの場合
<UL>
<LI>ガンダム
<LI>ケロロ軍曹
<LI>戦国BASARA
</UL>

■XHTMLの場合
<ul>
<li>ガンダム</li>
<li>ケロロ軍曹</li>
<li>戦国BASARA</li>
</ul>

となります。


4.空要素タグの最後に「 /(半角スペースとスラッシュ)」を入れる
これは、昨日のCSSファイルへの指定の仕方に書いた違いもそうですが、よく使う空要素タグは…

■HTMLの場合
<BR>
<HR>

■XHTMLの場合
<br />
<hr />

となります。
あと画像の指定をする場合も、最後に「 /」を忘れずに。
(例) <img src="ファイル名.gif" alt="代替テキスト" width="サイズ" height="サイズ" />


5.属性値は必ず引用符(")で囲む
■HTMLの場合
width=80%

■XHTMLの場合
width="80%"


といった感じです。
この他にも、入れ子が正しいかとかタグ以外の場所(文書内)で「<」や「>」をそのまま書かないとかありますが、そういうのは実際にやってみて「Another HTML-lint gateway」などでチェックしながら、徐々に自分で直していって覚えた方が早いです。

結局、分かりにくい&間違ってたらごめんなさい(´Д⊂グスン


CSSファイルへの指定の仕方

CSSファイルの用意ができたら、(X)HTMLに適用するために(X)HTMLファイル内に指定します。

※cssファイルが「style.css」というファイル名の場合
■HTML
<title>サイト(ページ)のタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">

■XHTML
<title>サイト(ページ)のタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" />

xhtmlの方は最後に「 /」を入れます。
 
 
■CSSファイルの階層が違う場合の指定の仕方

・指定するCSSファイルが同じ階層にあるとき
<link rel="stylesheet" type="text/css" href="style.css" />

・一つ下の階層にあるCSSファイルを指定する場合(「css」というフォルダに入ってる場合)
<link rel="stylesheet" type="text/css" href="css/style.css" />

・一つ上の階層にあるCSSファイルを指定する場合
<link rel="stylesheet" type="text/css" href="../css/style.css" />
 
 
フォルダ名もファイル名も全て半角英数で名前を付けておきましょう。
あと、ファイルの指定を間違えるとせっかくのスタイルが適用されないので気をつけましょう。(特に階層が違う場合)

 
書いて残すって難しい…(;´Д`)


スタイルシートのファイルの作り方

スタイルシートを書くにはまずCSSファイルを作らなくてはいけません。
私はWindows標準の「メモ帳」で作成してます。
でも、他のテキストエディタでも大丈夫です。


1.メモ帳を開きます。

2.「ファイル」から「名前を付けて保存」を選択します。

3.ファイル名に任意の名前を付けます。
  この時に拡張子を「txt」から「css」に変更します。と言っても、自分で「txt」の部分を「css」に書き直すだけです。
  例えば、ファイル名を「style」としたい時はファイル名の所に「style.css」と入力すればOKです。


CSSファイル作成


これでCSSファイルが出来ました。
あとはこのファイルにスタイルを書いていきます。

※「保存する場所」はちゃんと選んでくださいねー。
初めてで分からないときは、スタイルを適用させたいhtmlと同じ場所に保存すると良いと思います。

【補足】
スタイルの最初に「@charset」を使って文字コードを指定する場合は、保存の際に「文字コード」の部分も指定したコードと同じものを選んでから保存しましょう。



スタイルシートのメリット

外部スタイルシートのメリットを簡単に…。

メンテナンスの向上
スタイルを外部のファイルに記載し、HTMLからリンクして適応させるのでウェブサイト全体でスタイルを共有できます。
外部のスタイルシートを変更すると、レイアウトやデザインを一括に変更することが可能です。

アクセシビリティ
一言で言えば、利用しやすさって事でいいのかな?(出た!あいまいな発言…)
例えば、ブラウザひとつ取ってもいろいろあります。
という事はもちろんどれを使ってるかもいろいろです。
せっかくサイトに来ていただいた方に、「必ずIEでよろしく!」という訳にはいかないという事です。

あとは目の不自由な方、弱視者の方への配慮などもそうです。
私も以前にボランティアなどで目の不自由な方、弱視者の方のお宅へ伺った事があるんですが、字が「小さくて見えない」という事でブラウザのメニューで文字の大きさを変更しようと思ったら出来ない!!
という事になるので、固定するような単位で書かない方が良いです。

画像にも代替テキストをできるだけ入れましょう。
テキスト情報という事でSEO対策にもなりますが、何より目の不自由な方が音声読み上げソフトを使ってサイトを見てる場合に代替テキストも読み上げるので、そこに何があるか分かりやすいという事です。

HTMLがすっきり
HTMLから何回も入れ子になったようなレイアウト用のテーブルや、デザイン等の記載を省けます。
ページの容量も軽くなり、表示が速くなります。
必要最低限の内容でSEO対策にも効果的!(なはず…)

SEO対策
まぁ、そんなこんなでデザインやレイアウトなど見栄えの部分を外に出してすっきりさせておけば、検索エンジンのクローラーにも、すんなりと内容を見てもらいやすいという事です。
タイトルや見出しなどは重要視されるようなので、見出しはしっかり使って見栄えはCSSで!って事でいいはず(;´∀`A)


だんだん何書いてるのか分からなくなってきました…(-ω-lll)
字ばっかり&分かりにくくてごめんんさい。

やった事ないですが、XHTMLではスタイルを中に書いてるとチェックをかけたときに、「外部にしなさい」と言われると思います。
まぁ、とにかくスタイルシートは外部リンクで!(強引に締め


いやぁ、こんな内容でアップしても良いのか…。


スタイルシート

ホームページを作るからには使ってみたい、いや使うべき…むしろ使わざるを得ないスタイルシート。(ぇ…

CSSは「Cascading Style Sheet (カスケーディング・スタイルシート)」の略で、HTMLで記述された文書にレイアウトスタイルを定義するためのマークアップ言語です。

つまり、CSSを使うとホームページの見栄えを細かく指定することができるよ!って事です。

【スタイルシートの主な種類】
・インラインスタイル
・埋め込みスタイルシート
・外部スタイルシート

の3つです。
もし、全部をパターンを使ってる場合(そんな事あるのか??)この順番で優先されます。

■インラインスタイル
要素に直接、スタイル属性を書いて指定します。
(記述) この部分だけ <SPAN style="color:red;">赤色</SPAN> にしたい

(表示) この部分だけ 赤色 にしたい

■埋め込みスタイルシート
HEAD内に <STYLE> を使って要素名やクラス名にスタイルをまとめて定義します。
未対応ブラウザの為に、<!-- -->コメントアウトしておきます。

■外部スタイルシート
スタイルシートを外部ファイルで定義します。(拡張子は.css)
メモ帳などにスタイルの定義を書き込み、拡張子を「.css」にして保存します。
適応させたいページのHEAD内に「<link rel="stylesheet" type="text/css" href="○○.css" />」と記述し、そのファイルにリンクします。


という訳ですが、これからCSSを使ってサイト作りに挑戦しようと思っている方、「どの方法にしよう?」などと迷う事なく外部スタイルシートで作成する事をお勧めします。
外部スタイルシートのメリットについてはまた今度…。


(X)HTMLやらCSS

「(X)HTMLやらCSS」というカテゴリーを追加してみました。
時々、こちらの方に備忘録を残していこうと思います。

詳しいから書いているのではなく、忘れた時のために書いてるものなので、「たぶん…」とか「そんな気がする」って言葉が多用される予感です…(;´∀`A)

なので、間違いもあるかと思います。もちろん間違いは気づき次第、修正します。
みなさんのお役に立てるような事は書けません。期待しないでね!(;´∀`A)