--
--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009
07
23

テンプレートをカスタマイズする際、どこで何を設定しているか? (Google ChromeでFC2テンプレートカスタマイズ)

この記事を幅の広いテンプレートで見る。


着手する前に

●カスタマイズ、やっぞ!(sugarさんの記事)
http://bittersweetdreams.blog9.fc2.com/blog-entry-567.html
●自分のテンプレートを作成するには?(旧フォーラムの良トピック)
http://blog.fc2.com/forum/viewtopic.php?t=12539

カスタマイズ基本リンク

●公式マニュアル「テンプレートの編集」
http://fc2blogmanual.blog60.fc2.com/blog-entry-84.html
●公式マニュアル「テンプレート用 変数一覧」
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html
●はじめてのFC2ブログカスタマイズ
http://blog.fc2.com/custom_manual/
●カスタマイズしやすいテンプレート
viewtopic.php?f=7&t=10752

どこで何を設定しているか調べる

基本の方法[例]記事タイトルの色を変えたい。
「テンプレート用 変数一覧」で変数を調べる。記事タイトル……<%topentry_title>
テンプレートHTMLで、該当箇所を調べる。(下記の記述は、テンプレートによって異なります)
<h2 id="e<%topentry_no>" class="entry_header"><%topentry_title></h2>
テンプレートスタイルシートで、該当箇所の設定を変更する。(下記の記述は、テンプレートによって異なります)
h2.entry_header{(略)color:#FFFFCC;}←ここを変える。

上の表では「該当箇所」と曖昧に書いていますが、ピリオド、シャープ、何もなしで、下記のように意味が変わります。
HTML中 スタイルシート
<body><div><li>などの要素 要素{プロパティ:値} なにもつかない。
<[要素] class="[クラス名]" .クラス名{プロパティ:値}  クラス名にピリオドをつける。
<[要素] id="[ID名]"> #ID名{プロパティ:値} id名にシャープをつける。

HTML/スタイルシート解説サイト

Googleで「スタイルシート」を検索して、1ページ目にあった解説サイトを、検索順に拾いました。
●HTMLクイックリファレンス:http://www.htmq.com/index.htm
●とほほのWWW入門:http://www.tohoho-web.com/www.htm
●The Web Kanzaki:http://www.kanzaki.com/docs/htminfo.html
●イーウェブ:http://www.eweb-design.com/
●TAG<INDEX>:http://www.tagindex.com/index.html
カラーコード:Mike's Computer Service

画像を変更する

 画像を変えたい、という要望をよく見ます。
●画像がスタイルシートにある場合
スタイルシート中を、「url(」で検索(ctrl+f)して、urlをブラウザ(Microsoft Internet Expolorerなど)のアドレス欄にコピー&ペーストし、Enterを押します。
画像が表示されますので、変更したい画像が出てくるまで繰り返してください。
●画像がHTMLにある場合
上記の「スタイルシートにある場合」を全部試しても見つからない場合、HTMLのなかを「<img」で検索し、同様に探していきます。

Google Chromeで、入れ子関係などを視覚的に確認する

基本の方法で探すのが難しい場合、ブラウザーソフト「Google Chrome」の「要素の検証」機能が使えそうなので、ご紹介しておきます。これを使うと、自分が変えたい場所がなんというクラス名を付与されているか、どんな画像が背景指定されているか、視覚的に確認していくことができます。

●準備
Google Chromeをインストールし、Google Chromeでカスタマイズしたいテンプレートをあてた状態の自ブログを開きます。

●要素の検証:スタイルシート
マウス右クリック「要素の検証」を開きます。
画像
「要素の検証」窓・左カラム、右向き三角をクリックすると、表示が変化して、その要素のなかに含まれる入れ子要素が表示されます。
要素にマウスカーソルを当てると(マウスオン)、ブログ画面に色がつきます。
要素をクリックすると、「要素の検証」窓・右カラムに、スタイルシートが表示されます。
色はコードだけではなく、その「色」の■も表示してくれます。

●要素の検証:画像
画像は、「要素の検証」窓・右カラムに出たURLをクリックすると、見ることができます。
画像

いったんフォーラムのFAQに投稿したものですが、モデレータの方からNGが入ったので、自分のブログに移しました。 >ゲストさんのような意見の方もいる  同じ投稿に対して、別のご意見の方もいらっしゃったのですけどね……。
スポンサーサイト
Comment
 


管理者にだけ表示を許可する

[345] 魔法じゃないんですよね

こんにちは。
ぼくとしては、「自分のブログでやってね」では、露出が足りないと思ったからあえてフォーラムに投稿したんですけどね。
あの頃、ぼくは、ずっとフォーラムに張り付いてましたし、間違ったレスをしたこともあって、一部にアンチファンが居ました。
でも、manannanさんは大丈夫じゃないかなぁと思いますよ。ぼくとは人徳が違いますから(^^)


このような記事は直接的なアドバイス以上に重要ですよね。

一般の方は、カスタマイズに慣れるまで、アドバイスを魔法の呪文のように感じていると思います。

今は便利なツールがありますので、興味や疑問、要望をきっかけに、そのパッションで挑戦してほしいですね。
#丸投げ希望者には、テンプレート変更(も カスタマイズの一つと)を勧めますが...

[346] hassakuさん、いらっしゃいませ。

>間違ったレスをしたこともあって、
hassakuさん、ぼくよりずっとレベルが高いじゃないですか。
ぼくはスクリプト判ってないですし、CSSもまだまだです(ーωー)。

>魔法の呪文
そうですね……。「呪文楽しい」と思う人と、「イヤーッ´Д`」って思う人が、いそうです。

Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。