スポンサーサイト

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

テンプレートをカスタマイズする際、どこで何を設定しているか? (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が入ったので、自分のブログに移しました。 >ゲストさんのような意見の方もいる  同じ投稿に対して、別のご意見の方もいらっしゃったのですけどね……。
スポンサーサイト

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

コメントの投稿

魔法じゃないんですよね

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


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

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

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

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

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

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

共有テンプレート
ご質問は、できる限りサポートします。(違法ブログを除く)/

BROWSIZE.ORG - 無料アクセス解析

Tree-Recent
Tree-Comment
Tree-TB
カテゴリ
Tree-Arcive
CalendArchive
ブログ管理メニュー(新)
タグリスト(旧

テンプレート デザインテーマ 画像向き  Plant 新管理画面 新管理 高速表示設定時広告(アカマイ広告) sky 草木 プラグイン セッション切れ セッション時間切れ ぶらぼー 

ユーザータグ

テンプレート
デザインテーマ
画像向き

Plant
新管理画面
新管理
高速表示設定時広告(アカマイ広告)
sky
草木
プラグイン
セッション切れ
セッション時間切れ
ぶらぼー

テンプレート構造解析
↓のタブ名をクリックすると、枠が表示されます。
div
table
th
td
フォーラムリンク
[F][C]
FAQ・よくある質問 [F][C]
質問・疑問 [F][C]
おかしいと思ったら [F][C]
テンプレート・プラグイン [F][C]
その他ブログパーツ [F][C]
雑談 [F][C]
ブログ宣伝コーナー [F][C]
[過去ログ](~2009.7)
最新コメント
リンク
バナー貼
カテゴリ
画像一覧(月別)
ブログ内検索
プロフィール

manannan

Author:manannan

Icon:Aon Celtic Art

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