| テンプレート講座第八回 |
|
◆ テンプレート講座 ◆ Comment 3 ◆ Trackback 0 ◆ edit.
今回は、細かな作業に便利な下準備という事で、私自身がいつもやっているカスタマイズやスタイルシート設定の小技的なものをご紹介しましょう。
まず必要なもの。
１，Terapad（じゃなくても良いですが、置換機能と文字コードに対応したモノ）
２，色見本（私の所に有るものでも参考に）
３，カスタマイズするためのテンプレート使用時のページ。
こんな感じでしょうか。
では詳しく見ていきましょう。
まず必要なもの。
１，Terapad（じゃなくても良いですが、置換機能と文字コードに対応したモノ）
２，色見本（私の所に有るものでも参考に）
３，カスタマイズするためのテンプレート使用時のページ。
こんな感じでしょうか。
では詳しく見ていきましょう。
一応、最低限の準備は出来ました。
ここでタグやスタイルシートの属性がよく分からないと言う方は「TAG index-スタイルシート - ホームページ制作情報」と言うとても親切な解説ページが有りますのでそれを見ながら作業をします。
しかしここで忘れてならないのが、カスタマイズしようとするテンプレートです。
これは一度、自分のブログをカスタマイズするために適用して下さい。
適用したら必要なページ（トップページ、記事一覧ページ、個別記事ページ、フォームページなど）
これらの｢ソース｣が必要ですので《右クリック→ソースの表示》でメモ帳が開きソースが表示されますのでそれを《すべて選択》でコピーして下さい。
次にそのコピーしたソースをtop.htmlなどと言う名前のテキストファイルを作りそこへペースとします。
これを各ページ事にファイルを作り、スタイルシートのアドレス部分が有りますのでそれを《./style.css》と変更します。
ついでにFC2のブログは<meta http-equiv="content-type" content="text/html; charset=euc-jp">と言う文字設定がされてますのでこの部分も削除して下さい。
このままでも良いのですが、パソコンに保存したHTMLファイルはshift-jisで読み込まれるため文字化けが生じます。
それを回避するためにこの部分を削除する訳です。
これで一応、下準備は終わりました。
次は、HTMLファイル（各ページ）と同じフォルダに《style.css》と言うファイルを用意します。
このファイルも只のテキストファイルなので《右クリック→新規作成→テキストドキュメント》で「新規テキスト ドキュメント.txt」と言うファイルが出来ますのでそれを《style.css》と言うファイル名に変更するだけです。
それではこのstyle.cssをTerapadなどで開いてみましょう。
勿論、何も書かれてません（笑）
ここにFC2ブログの管理画面→テンプレートの設定でスタイルシート部分をすぺて選択してコピーし、それを開いたstyle.cssに貼り付けます。
まぁ〜本来は普通にメモ帳でスタイルシートを作っても良いのですが、文字コードが違うと文字化けする事も有りますので《文字コード対応》のテキストエディタを使う事を心がけて下さい。
ちなみに多少の編集で一々Terapadを開くのも面倒なので、そう言った作業の場合は、AreaEditorをインストールしておくと便利です。
これは管理画面などのフォームをテキストエディタで開けるようにするツールです。
管理画面のスタイルシートが書かれている部分で《右クリック→メモ帳で編集》を選ぶとメモ帳が起動しますのでそれで編集しても良いでしょう。（意外と知らない方も居ます）
あの小さなフォームで文字を打つよりメモ帳で開いて編集の方が作業しやすいです。
編集が終わったら必ず《上書き保存》を行って下さい。
そうしないと、編集が反映されませんので。
後は、スタイルシートの編集作業になる訳ですが、｢テンプレート講座第六回 ｣で述べたように基本となる属性の名前は英語なので有る程度分かるでしょう。
細かい設定法などは、「TAG index-スタイルシート - ホームページ制作情報」に詳しく解説されてますのでその使い方を真似して変更していきます。
ただ、慣れていないと｢どこを直したらいいの？｣と、戸惑う事も有りますのでそう言った時は、最初の保存したページ（トップページや記事ページ）を開き、自分が変更したい部分の文字などを覚えておいて、ソースを開きその部分を探します。
始めは慣れないでしょうが、そのうちに慣れてそれほど苦にはならなくなります。
変更したい部分を見つけたらそこのタグにID="○●”とかclass="○○”などと書かれた所が有りますので、同じ名前をスタイルシートの方で探して下さい。
つまりここで使われているID名やclass名がスタイルシートの変更場所で有るという事です。
｢リンクや同じ様な文字色や色を変更したい｣という場合は、テキストエディタの《置換機能》が役立ちます。
変更したい文字色設定を選択（＃FFF000などを反転選択）しテキストエディタのメニューから《置換》を選ぶとダイアログが現れます。
そうするとすでに自分が選択した色が《検索する文字列》の中に入ってますね。
下のダイアログの《置換後の文字列》という部分に変更したい文字色を入れます。
後は、《連続置換》ボタンを押すと、次々に置換候補が出てきますので随時変更を行って行きます。
《すべて置換》でも良いのですが、変えたくない部分も変更されてしまいますので気をつけて下さい。
変換が終わったら《上書き保存》を行います。
これで新しいスタイルシートが適用出来ますので、開いてあったトップページや個別記事のHTMLを《更新》してみて下さい。
どうですか？変更されてますか？
スタイルシートの編集と言うのはこれが基本になります。
勿論、この方法は私自身が勝手に楽な方法として使って居るので自分に馴染む方法をすれば良いでしょう。
後、｢どうしてもここだけ違うようにしたい｣という場合は、自分で好きなclass名を使ってスタイルシートに設定しておきます。
勿論、HTMLファイルにも同じくclass名を追加します。
ここで確認作業を行い《自分が設定したとおりになっているか》を確認後、追加したclass名をFC2管理画面のテンプレート編集で実際にclass名を同じ場所に追加します。
（ただしこういった追加は、タグも理解していないと出来ませんし、テンプレートの構造次第ではHT|MLと違う構造をしていて理解出来ない場合はあまりお勧めしません。）
こういった作業の繰り返しで、自分なりのスタイルシートが出来上がったら最終的に、これを管理画面→スタイルシートの編集で《すべて入れ替え》を行います。
後は、本当に変更が出来ているか実際のブログで確かめてみる事です。
細かな編集が必要な所が出てきたらその時は、AreaEditorを使っている場合はメモ帳で開き再編集をします。
以上が私自身が行っているカスタマイズ及びテンプレート制作の方法です。
まぁ〜テンプレートに関しては、実際にタグでページを組んでデザインを終えてからFC2の変数に置き換える部分を考えながら組み立てていく訳です。
こうした作業も基本となるテンプレートなどが有ると意外と時間はかかりませんし画像などの入れ替えなどにも、一々自分のブログを見ながら確認していては面倒なので、画像ファイルのアドレスも《./画像ファイル》という風に変更して、同じフォルダに保存して組み立てています。
後は、スタイルシートの《./画像ファイル》を《http://bureaktim･･･/画像ファイル》と言うように《置換》してから管理画面で入れ替えてます。
この方が、バックアップも考えなくても良いと言うか、作業自体がバックアップも兼ねてますので意外と楽です。
後は、ある程度の所で一度適応させて、上手く行ったらそれを別のファイルに保存しておきます。
そしてまた続きをする訳です。
くれぐれも一度に行おうとしない。（転送作業の時、エラーが起きてせっかくの作業が水の泡とならないためにも）
と、こんな感じですね。
まぁ〜初心者のうちからこれをやれと言っても無理ですので、《編集はテキストエディタで》を心がける事から始めて下さい。
ここでタグやスタイルシートの属性がよく分からないと言う方は「TAG index-スタイルシート - ホームページ制作情報」と言うとても親切な解説ページが有りますのでそれを見ながら作業をします。
しかしここで忘れてならないのが、カスタマイズしようとするテンプレートです。
これは一度、自分のブログをカスタマイズするために適用して下さい。
適用したら必要なページ（トップページ、記事一覧ページ、個別記事ページ、フォームページなど）
これらの｢ソース｣が必要ですので《右クリック→ソースの表示》でメモ帳が開きソースが表示されますのでそれを《すべて選択》でコピーして下さい。
次にそのコピーしたソースをtop.htmlなどと言う名前のテキストファイルを作りそこへペースとします。
これを各ページ事にファイルを作り、スタイルシートのアドレス部分が有りますのでそれを《./style.css》と変更します。
ついでにFC2のブログは<meta http-equiv="content-type" content="text/html; charset=euc-jp">と言う文字設定がされてますのでこの部分も削除して下さい。
このままでも良いのですが、パソコンに保存したHTMLファイルはshift-jisで読み込まれるため文字化けが生じます。
それを回避するためにこの部分を削除する訳です。
これで一応、下準備は終わりました。
次は、HTMLファイル（各ページ）と同じフォルダに《style.css》と言うファイルを用意します。
このファイルも只のテキストファイルなので《右クリック→新規作成→テキストドキュメント》で「新規テキスト ドキュメント.txt」と言うファイルが出来ますのでそれを《style.css》と言うファイル名に変更するだけです。
それではこのstyle.cssをTerapadなどで開いてみましょう。
勿論、何も書かれてません（笑）
ここにFC2ブログの管理画面→テンプレートの設定でスタイルシート部分をすぺて選択してコピーし、それを開いたstyle.cssに貼り付けます。
まぁ〜本来は普通にメモ帳でスタイルシートを作っても良いのですが、文字コードが違うと文字化けする事も有りますので《文字コード対応》のテキストエディタを使う事を心がけて下さい。
ちなみに多少の編集で一々Terapadを開くのも面倒なので、そう言った作業の場合は、AreaEditorをインストールしておくと便利です。
これは管理画面などのフォームをテキストエディタで開けるようにするツールです。
管理画面のスタイルシートが書かれている部分で《右クリック→メモ帳で編集》を選ぶとメモ帳が起動しますのでそれで編集しても良いでしょう。（意外と知らない方も居ます）
あの小さなフォームで文字を打つよりメモ帳で開いて編集の方が作業しやすいです。
編集が終わったら必ず《上書き保存》を行って下さい。
そうしないと、編集が反映されませんので。
後は、スタイルシートの編集作業になる訳ですが、｢テンプレート講座第六回 ｣で述べたように基本となる属性の名前は英語なので有る程度分かるでしょう。
細かい設定法などは、「TAG index-スタイルシート - ホームページ制作情報」に詳しく解説されてますのでその使い方を真似して変更していきます。
ただ、慣れていないと｢どこを直したらいいの？｣と、戸惑う事も有りますのでそう言った時は、最初の保存したページ（トップページや記事ページ）を開き、自分が変更したい部分の文字などを覚えておいて、ソースを開きその部分を探します。
始めは慣れないでしょうが、そのうちに慣れてそれほど苦にはならなくなります。
変更したい部分を見つけたらそこのタグにID="○●”とかclass="○○”などと書かれた所が有りますので、同じ名前をスタイルシートの方で探して下さい。
つまりここで使われているID名やclass名がスタイルシートの変更場所で有るという事です。
｢リンクや同じ様な文字色や色を変更したい｣という場合は、テキストエディタの《置換機能》が役立ちます。
変更したい文字色設定を選択（＃FFF000などを反転選択）しテキストエディタのメニューから《置換》を選ぶとダイアログが現れます。
そうするとすでに自分が選択した色が《検索する文字列》の中に入ってますね。
下のダイアログの《置換後の文字列》という部分に変更したい文字色を入れます。
後は、《連続置換》ボタンを押すと、次々に置換候補が出てきますので随時変更を行って行きます。
《すべて置換》でも良いのですが、変えたくない部分も変更されてしまいますので気をつけて下さい。
変換が終わったら《上書き保存》を行います。
これで新しいスタイルシートが適用出来ますので、開いてあったトップページや個別記事のHTMLを《更新》してみて下さい。
どうですか？変更されてますか？
スタイルシートの編集と言うのはこれが基本になります。
勿論、この方法は私自身が勝手に楽な方法として使って居るので自分に馴染む方法をすれば良いでしょう。
後、｢どうしてもここだけ違うようにしたい｣という場合は、自分で好きなclass名を使ってスタイルシートに設定しておきます。
勿論、HTMLファイルにも同じくclass名を追加します。
ここで確認作業を行い《自分が設定したとおりになっているか》を確認後、追加したclass名をFC2管理画面のテンプレート編集で実際にclass名を同じ場所に追加します。
（ただしこういった追加は、タグも理解していないと出来ませんし、テンプレートの構造次第ではHT|MLと違う構造をしていて理解出来ない場合はあまりお勧めしません。）
こういった作業の繰り返しで、自分なりのスタイルシートが出来上がったら最終的に、これを管理画面→スタイルシートの編集で《すべて入れ替え》を行います。
後は、本当に変更が出来ているか実際のブログで確かめてみる事です。
細かな編集が必要な所が出てきたらその時は、AreaEditorを使っている場合はメモ帳で開き再編集をします。
以上が私自身が行っているカスタマイズ及びテンプレート制作の方法です。
まぁ〜テンプレートに関しては、実際にタグでページを組んでデザインを終えてからFC2の変数に置き換える部分を考えながら組み立てていく訳です。
こうした作業も基本となるテンプレートなどが有ると意外と時間はかかりませんし画像などの入れ替えなどにも、一々自分のブログを見ながら確認していては面倒なので、画像ファイルのアドレスも《./画像ファイル》という風に変更して、同じフォルダに保存して組み立てています。
後は、スタイルシートの《./画像ファイル》を《http://bureaktim･･･/画像ファイル》と言うように《置換》してから管理画面で入れ替えてます。
この方が、バックアップも考えなくても良いと言うか、作業自体がバックアップも兼ねてますので意外と楽です。
後は、ある程度の所で一度適応させて、上手く行ったらそれを別のファイルに保存しておきます。
そしてまた続きをする訳です。
くれぐれも一度に行おうとしない。（転送作業の時、エラーが起きてせっかくの作業が水の泡とならないためにも）
と、こんな感じですね。
まぁ〜初心者のうちからこれをやれと言っても無理ですので、《編集はテキストエディタで》を心がける事から始めて下さい。
◆ Re comments.
◆｢ありがとうございます｣
はじめまして。
simple_starのテンプレートとてもすてきですね。
お借りして使わせていただきました。
ありがとうございます。
記事の右側に表示される記事のナンバーなのですが
ときどき数え違いがあります。
今の記事数が１７５くらいなのですが�癸隠牽海箸いΔ佞Δ�
表示されてしまいます。
直す方法がありますでしょうか？
よろしくお願いします。
simple_starのテンプレートとてもすてきですね。
お借りして使わせていただきました。
ありがとうございます。
記事の右側に表示される記事のナンバーなのですが
ときどき数え違いがあります。
今の記事数が１７５くらいなのですが�癸隠牽海箸いΔ佞Δ�
表示されてしまいます。
直す方法がありますでしょうか？
よろしくお願いします。
◆｢hikariさんへ｣
どうもはじめまして。
え〜と、記事のナンバーなんですが、これはFC2の変数を使って自動的に読み込んでいる番号で、hikariさんの記事に元々付いて居たものを呼び出している事になるんですよね。
ですので記事番号を変更と言う事は、FC2に保存されているログを変更しないと無理なんです。
私やユーザーには不可能な事なんですよ。
記事数と番号が合わないと言うのは、多分hikariさんのサーバーのエラーか、一度書いて消した事のある記事はその番号が残りますので多分、今の番号で合っていると思いますが。
え〜と、記事のナンバーなんですが、これはFC2の変数を使って自動的に読み込んでいる番号で、hikariさんの記事に元々付いて居たものを呼び出している事になるんですよね。
ですので記事番号を変更と言う事は、FC2に保存されているログを変更しないと無理なんです。
私やユーザーには不可能な事なんですよ。
記事数と番号が合わないと言うのは、多分hikariさんのサーバーのエラーか、一度書いて消した事のある記事はその番号が残りますので多分、今の番号で合っていると思いますが。
◆ Trackbacks.
- テンプレート講座第八回のトラックバックURLはこちら
- http://breaktime.blog8.fc2.com/tb.php/260-9ef6d30b
