ＣＳＳ オフラインでスキンをテスト4
[オフラインで動かす]
普段・・何気なく行なっていることなのですが・・
わかるように説明するって・・難しいです！
でも・・この記事まで読めば自分のパソコンの中でCSSのテストが出来るようになります
自分のパソコンの中だけだから自由に思い切っていろんなことが出来ちゃいます
で・・表示がうまく行ってからアメブロのＣＳＳの編集に貼り付ければOK
関連付けってわかりますか？
ファイル名をダブルクリックすると関連付けされているソフトが自動で立ち上がるようになっています
今回・・htmlとcssファイルを扱っていますが・・・
みなさまのパソコンによってどのソフトに関連付けされているのかはバラバラです
例えばhtmlファイルをダブルクリックしたときにブラウザーが立ち上がる方とソースが表示されたエディタが立ち上がる方がおられるはずです
また・・ブラウザーでもIEが立ち上がる場合Firefoxが立ち上がる場合それ以外のブラウザーだったりする場合もあります
エディタでもメモ帳だったり前の記事で紹介したNoEditorだったりと・・
パソコンの設定によってバラバラです
どれが正しくてどれが便利ということはありません
なのでこの記事の説明では関連付けに関係なく使えるように説明しています
ファイルをダブルクリックしたときに何が立ち上がるのかは再度確認して置いてください
そして・・自分の場合はここでは説明通りしないでダブルクリックで良いじゃん・・ってね
ココまでの記事で 同じフォルダーの中にCSSファイルとhtml(htm)ファイルが出来ましたか？
では・・・・本番です
まずはNoEditorを立ち上げます
ファイル → 開く で・・作ったhtml(htm)ファイルを開きます
（↓画面がおかしくなるバグがあるかもですが・・気にしないでファイルを開きます）
html(htm)ファイルを開いたら・・・最初の方にある 数字.css の部分を探します
<link rel="stylesheet" media="screen,print" type="text/css" href="http://usrcss.ameblo.jp/skin/templates/f2/d5/10003267166.css" charset="UTF-8" />
↑これは・・わたしのですからみなさまとはファイル名が違います・・数字.css のあるURLを探して URLを選択します（↑の赤字部分だけを選択します）
ＣＳＳファイルのURLを選択（反転）したら htmlバーの ファイルを指定して相対パス取得 アイコンをクリック
html(htm)ファイルと同じフォルダにあるCSSファイルを指定します
すると・・選択してあったＣＳＳファイルのURLがＣＳＳファイル名に変ります
そしたらファイルを上書き保存します
これで準備は完了です
あとはhtml(htm)ファイルを開けばパソコン上だけでで開くことが出来ます
実際にはパソコン上で動作しているのはhtmk(htm)ファイルとCSSファイルだけです
画像や他のCSSファイルやJSファイルなどはアメブロから呼び込んでいますが・・
目的はCSSだけなのでこれで充分です
アメブロがメンテナンス中の場合・・
画像とか他のCSSなどが読み込めないために表示がおかしくなる場合があります・・
htmlファイルの上で右クリック → プログラムから開く → 開くブラウザーを選択します
（ファイルをダブルクリックでブラウザーが立ち上がるように関連付けされている場合もあります）
または・・NoEditorで・・htmlファイルを開いている状態で・・
ツール → 他のソフトで開く → 希望するブラウザーを選んで開きます
ＣＳＳ オフラインでスキンをテスト1
を参考に 他のソフトで開くメニューの設定 をして下さい
指定されたブラウザーが立ち上がって表示されます
アドレスを見ればわかるのですが・・ 大抵は C: パソコンのＣディスクで動作していると思います
※IEの場合・・・こんなメッセージがでる場合があります
（ブラウザーで表示できればhtmlファイルは閉じちゃってかまいません・・・）
では・・NoEditorでＣＳＳファイルを開いてください
ＣＳＳファイルを開いたら・・ ＣＳＳの一番最後に
/* ■■■■■■■■ ココから ■■■■■■■■ */
このように入れておいて・・ここから下がＣＳＳをさわっていますよってわかるようにしておきます
最後にうまく表示が出来たとき・・
ココから最後までをアメブロのＣＳＳの編集で一番最後にコピペすればアメブロでも同じ表示になります
どこからさわっているのかわかればいいのでどんなんだってかまいません・・・
また・・出来るだけ途中をさわらないで最後に付け加えていくようにしてください
もし・・途中をさわってわからなくなったときは・・
表示がチャント出来ていることを確認してから・・
このファイル全部をコピーしてＣＳＳの編集に上書きします
（またはＣＳＳの編集の枠内を全部削除してからコレを貼り付けます）
↑一番最後に 目印を入れて保存しておきます
試しに・・・ブログタイトル文字を小さくして文字色もピンクにしてみます
/* ■■■■■■■■ ココから ■■■■■■■■ */より下に・・・
#header h1{/*タイトル文字サイズ*/
font-size: 1.5em;
}
#header h1 a{/*タイトル文字色*/
color:#ff00ff;
}
書き終わったら保存します（上書き保存）
でも・・ブラウザー上では何の変化もありません・・・・？
ブラウザーを更新します
ブラウザーの更新ボタン、再読み込みボタンをクリック またはキーボードの F5 キーを押します
ブラウザーが再読み込みして変更したＣＳＳファイルを読み込むことで表示が変わります
ブラウザーで確認して ＣＳＳがうまく行ったら・・・
追加した部分をコピーします
前にも説明していますが・・・
パソコン上で編集できるのはソースをとったページだけです・・
たとえば次のページをクリックしても・・表示されないか・・ネット上のアメブロでのページが表示されます
なので・・ チェックしたい部分が表示されているページのソースを保存してください
ここでやっていることはアメブロには何の影響も与えません
思い切ってＣＳＳを試してください
何度もやり方を変えたり書き直したりで・・
わたしの頭の中でゴチャゴチャになっています
これまでの記事でうまく伝わっているのかがものすごく不安です・・・
て～ことで・・しばらくコメントをあけておくことにします
今回は・・
この記事（ＣＳＳ オフラインでスキンをテスト1～4）と
カラム落ち等でブログの表示がおかしくなっている場合のみ受け付けます
特にコメントも記事を補足する重要なものですので
この記事には上記で説明した以外のコメントは書かないでください
申し訳ありませんが今回は・・・
そのような質問コメントがこの記事に付いた場合は削除させていただきますm(_ _)m
また・・この記事自体も補足や修正する場合もあります
よろしくお願いします
ごめんなさい
ＣＳＳ オフラインでスキンをテスト3 この方法ではCSSが成型されてしまうことがわかりました
わたしが普段やっている方法のほうがいいのかな？
どうしたらわかりやすく説明できるのかを検証してから
再度・・記事の書き直しになりますのでもう少しお待ち下さい m(_ _)m
あと・・やっているうちにNoEditorの設定方法がわかりましたので・・
ダイアログの設定方法を訂正しました ..6/2
ツールバーのカスタマイズ方法を追記しました・・6/1
5/30あたりから画像のタグにcomplete="true"が付くようになりましたが・・
これって・・・なに？ わたし・・わかりません？
教えてください m(_ _)m ってじゃ～コメントあけろよ・・って～話になっちゃうんですが
追記・・・・
Caetla*さえら* ピグ初心者講座・スキン・画像作成講座 さまに説明記事を書いていただきました
気になった方は・・・ IMGタグ要素「complete="true"」とは
ありがとうございました
・・・ 6/3
この記事をソースだけ保存する方法に修正しました
ＣＳＳ オフラインでスキンをテスト3
[ソースを保存]
NoEditorは使ってみましたか？
少なくともwin付属のメモ帳よりはずっと使えると思います
オフラインでスキンのＣＳＳをチェックするため（ネットにつながずに自分のパソコンの中だけでチェック）・・
ソースを保存します・・・
ソース（ＨＴＭＬソース）って？
じつは・・わたしもこの答えを書いたことがなくって・・
知っていて当たり前・・みたいな・・
ので・・どうやったらわかっていただけるのか？よくわかっていません・・
ブラウザー（インターネットエクスプローラなど）にわかるようにHTML言語で書かれたプログラムみたいなもの・・
ブラウザーはそれを翻訳して画面に表示してくれます・・
文書の構造（設計図？）が書かれています
で・・
CSSはそれを装飾する役目です
なので・・以前からCSSではブログは壊れませんっていっているとおりなんです
CSSがおかしくなってもHTML（文章の構造）は影響ないのでブログがなくなることはありません
安心してCSSを楽しんでください
別に・・わかんなくてもかまいません
まずはブログでチェックしたいページを開きます
オフライン（ネットにつながない状態であなたのパソコンの中）でチェックしますので保存したページ以外はチェックできません
なのでチェックしたい部分を表示してからそのページのソースを保存します
たとえばコメント部分をチェックしたいのにコメント部分が表示されていないページのソースではコメント部分はチェックできません
↑このページのソースを保存してもコメント部分のチェックは出来ません
コメント部分のチェックが目的ならコメントが表示されている
↓このページのソースを保存します
では・・目的のページを表示してから・・
Internet Explorer、Firefoxの場合・・・
メニュの ファイル → 名前をつけて保存
Firefox、Google Chromeの場合・・
（Firefoxはどちらの方法でもできます）
画面上で右クリック → 名前をつけてページを保存 （名前をつけて保存）
前の記事でＣＳＳを保存したフォルダーへ保存します
ファイル名も拡張子もさわらないでそのままで大丈夫です・・・
昔・・拡張子は3文字までしかつけられませんでした
そのため .htm 3文字の拡張子と .html とHTMLをそのまま拡張子にした4文字の拡張子の両方が存在します
どちらも同じと思ってください
JPEG画像も.jpg と.jpegがあるのと同じです
今回は自分のパソコンの中だけで動かしますので拡張子はどちらでもかまいません
ついでに言うと・・ファイル名も何でもかまいません
実験委員.htm なんて漢字でもOKです
（サーバーにアップするのでしたらNGですが・・自分のパソコン上だけですから・・）
ＣＳＳファイルとhtml(htm)ファイルが同じフォルダーにできればOKです
別の方法でソースの表示から名前をつけて保存でも可能です・・・
では・・次回をお楽しみに・・・
Windowsでは・・何もしないと拡張子を表示してくれません
今回の一連の記事では拡張子が表示されていないことには始まりません
説明をしたいのですが・・わたしの手元には VISTA も Windows7 もありません・・ (T_T)
yahooとかgoogleで「vista 拡張子 表示」とか「Windows 7 拡張子 表示」とかで検索下さい
図付きで説明されているサイトがたくさん見つかると思います
基本的には［フォルダー オプション］で ［登録されている拡張子は表示しない］のチェックを外せばいいのですが・・・