上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 なんとかブログを組み立てるまでに至ったけど右も左も分からない…
 パソコンのこともインターネットのこともよく分からない…
 それでも、FC2のブログテンプレートは、カスタマイズすることが出来ます。テンプレートのバックアップさえとれれば、怖いものは何もありません。


テンプレートのバックアップ


 テンプレートをダウンロードされた方であれば、テンプレートをダウンロードしただけでは使えないことはご存じかと思います。
 最初に「適用」しますよね。
 その表の端っこの「複製」ボタンをクリックすれば、簡単にバックアップがとれます。

テンプレートの複製

 バックアップさえ取っていれば、もう何も心配はいりません。「適用」されていない方のバックアップを使って、自由にカスタマイズを始めてください。



まずは、数値を変えてみる


 「テンプレートの設定」画面、スクロールすると「HTMLの編集」と言うボックスと、「スタイルシートの編集」という、二つのテキストボックスがあります。
 HTMLは、少しだけ理解が必要なので、分かるまではスルーします。

 スタイルシート(以下、CSSと略します)のほう、下の方のボックスは、難易度がぐぐぐっと下がり、こちらは失敗したとしても、デザインが崩れる程度で、ブログの構造が壊れたり、システムエラーなんかが出ることはありません。
 また、何か誤動作を起こしたり、ブログが消えたり(カラムが落ちたり、文字色と背景色を一緒にしてしまって、「表示はされているんだけど見えない」状態になることはあります)、兎に角システム部分に何か問題を起こしたりすることはありません。

HTML編集中でも、例えブログが表示されなくなっても、ブログが消えるわけではありません。結局壊れたテンプレートをやめて、もう一度新しいテンプレートをダウンロード・適応すれば、ブログは正常な表示に戻ります。


テンプレCSSいじり

 まず、数値を変えてみましょう。
 ここでは無難に「font」と書いてある部分をいじってみます。覚えておくと便利なのが

「Ctrl」+「F」

 キーボードの「Ctrl」を押しながらアルファベットの「F」キーを押すと、ページ内検索という検索ボックスが出てきます。
 そこに  と入力して、検索してみてください。


font-family
font-size
font-weight

 などなど、様々なフォントが出てくると思います。

 そう、直感的に分かると思いますが、「font-size」は正にそのもの「フォントサイズ」を制御している命令文です。
 その横の数値、「14px」だとか「120%」だとか「8pt」だとか、それがフォントの大きさを指定しているというわけです。単位は「px」が一番分かりやすいと思います。

 例えば、当サイトの本文、正に今見ている文字サイズは「16px」です。数値を上げれば大きく、下げれば小さくなります。
 色々と触ってみてください。どこのフォントサイズが変わるかというのは、テンプレートによっては

「ヘッダー部」「サイドバー」「左カラム」「コメント部分」……

 などなど、注釈が書いてありますので、それを目安にして、触ってみてください。


 そして、変えてみたら、まず保存する前に、プレビューしてみます。
 変更は保存はされないが、どんな表示になっているかは見える。と言う機能です。
 これで、どんな風にブログの表示が変わっているか、確かめてください。

 良ければ、保存。何も変わっていなければ、トップページには表示されていない部分のアイテムの大きさが変わっています。変になっているかも知れないので注意してください。
 元に戻して、また違う部分でチャレンジしてください。何を変えたか分からなくなったら、「ページ移動」をして、再び同じページに戻ってくれば大丈夫。保存していなければ、変更前の状態に戻せます。


面白そうなタグを検索してみる

 基本的な文字サイズの変え方は、だんだん分かってくると思います。
 そうすると、色々欲が出てきて、「あのウェブサイトで見たアレ、表示したい」なんて興味がわいてくると思います。

例えば、







 こんな感じで、色々検索してみてください。新しい言葉が出てくれば、検索ワードの幅も広がり、より複雑なスタイルシート表現などにたどり着けるようになっていきます。
 HTMLとCSSに関しては、スゴイたくさんの人が勉強しているので、本などなくても必ずインターネット上に答えがあります。

「意味が分からない」

 と思ったら、必ず意味不明な言葉を無意識に読んでいます。それをそのまま検索すれば、答えに近づけます。

 CSSは、理解すると言うより、「定型文を調べる」と言った方が良いほどの言葉。
 色んな表現が用意されていますので、その表現を、そのままコピペ。という感じの言葉なんです。簡単で色々飾れるので、色々調べていってください。

 以下も参考に☆

実用的スタイルシート入門
一番最初に読むところ
このエントリーをはてなブックマークに追加
Sun.08.22.2010
Comment
220
承認待ちコメント
このコメントは管理者の承認待ちです

221
承認待ちコメント
このコメントは管理者の承認待ちです

222
承認待ちコメント
このコメントは管理者の承認待ちです

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。