スポンサー広告

スポンサーサイト

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

《FC2》(マルチカテゴリー)《FC2》テンプレ改造etc.

“改造手順”の共通項

テンプレートを改造したい、と思うとき、最低限、共通する事項ってあると思う。ここでは、私自身がどうやっているか、順を追って書いてみる。
(ヘッダ画像の替え方は、このとき書いたのがマシかも…>『テンプレートcfdn_132でのトップ絵の変更のしかた』inFC2Forum)

ソースを見る
まず、変更したい部分を、どんなタグ(<div>とか<h1>とか<img>)が設定しているかを把握するために、ソースを見る。Windowsでは、マウスの右ボタンをクリックして、「ソースの表示」を選ぶ。(MACのことは、忘れた。……マウスのボタンが1つしかなかったことしか憶えてないやい)

WINDOWS版IEの場合、日本語部分は文字化けする。FireFoxを使えば、EUコードのFC2ブログでも、文字化けなしにソースを見ることができる。

ソースのなかで、たとえばタイトル部分に
<H2 class="なんとか">
とあれば、その「なんとか」の部分が、タイトルの「class」になるのだし。

本文部分の直前あたりに
<div class="なんとか">
とあれば、その「class」が、本文の指定をしている可能性が高い。

何がなんだか判らない方も、実際、スタイルシートをあちこち変えてみれば判ってくるから大丈夫。

スタイルシート窓とHTML窓
[テンプレートの設定]→(使用テンプレート名の)[修正]で、画面の下のほうに現れる2つの窓のうち、上の窓が「HTML」下の窓が「スタイルシート」だ。

テンプレにもよるけど、「HTML」は、要素(タイトルとか本文とかコメントとか)の「有無」や「順番」を、「スタイルシート」は、大きさ/位置/色/背景/枠線などの設定を決めている

[修正]画面のHTML窓の中身を、おぼろげにでも理解しようとするなら、テンプレート中で使える変数一覧を参照する。全部見る必要はない。タイトル/エントリー(記事のこと)/コメント/トラックバック/カテゴリー/アーカイブ(月別)、自分が変えたい目的別に、言葉を検索してその部分だけじっくりめに読むのが吉。

だが、色だの画像だの変えるだけなら、最初に書いたとおり、「文字化けのない状態で、自ブログのソースを見る」という手段のほうが、たぶん、解りやすい。ソースを見たら、HTML窓は無視して、スタイルシートを見てしまうのだ。


スタイルシートを変えてみる
スタイルシートは、大原則として、
img{設定いろいろ}
とあったら、<img>タグに関して設定している。
.img{設定いろいろ}
とあったら、「class="img"」に関して設定している。
#img{設定いろいろ}
とあったら、「id="img"」に関して設定している。

ここまで判ったら、後は変えてみるだけww

(……正確な説明としては不足だけど、大抵のコトはこれで間に合ったりする。ちゃんと知りたい方は、「はじめてのFC2ブログカスタマイズ」の『基本となるセレクタ』以下を熟読♪)

スタイルシートをメモ帳にコピーするか(だからMACのことは知らないってば)、スタイルシート窓のなかで検索(ctrl+f)で探せば、目的の部分にたどり着きやすい。

backgroundといったら背景のことだし、borderは囲み線のことだ。中学生レベルの英語で、かなり見当はつくと思う。

あー。一つだけ、付けくわえ。
文字の色は、
{font-color:#000000;}
でも
{text-color:#000000;}
なく、
{color:[色コード];}
っす。。。。何度間違えたことかwww


「変えるだけ」ではなく、「設定の追加」が必要な場合の資料としては……
(FC2&テンプレ改造関連リンクと重複)
はじめてのFC2ブログカスタマイズ
アルキカタ版FC2Blog Q&A「ブログの見栄え」
HTMLクイックリファレンススタイルシートリファレンス(目的別)


「個別」ではなく「かたまり」で変える
左カラム全部のリンクの色、記事と記事タイトルとコメントとトラックバックまとめて、のように「個別の要素」ではなく「かたまり」で何かを変えたい場合には、(テンプレートによりますが)どこかの<DIV>にまとめて支配されていることが非常に多い。
<DIV>は入れ子構造になっていることが多く、どの<DIV>がどの部分を支配しているかは、意外に判りにくいのが実情、ではありますが。
(1)HTMLをみて、DIVのID,classを調べる。
(2)スタイルシートを開く。
 HTMLからあやしいと判断したIDやclassに、「background-color:red;(赤)」とか「background-color:blue;(青)」とか、背景色指定を、cut&pasteしていく(笑)
 テンプレ内で目立つ色で、作業中に確実に検索できる指定を使うと、楽。
 で、変えたい部分の色がちょうど変わったところが、「当たり」
 その部分のスタイルシートを、自分の目的に合わせて変えてやればいい。
……こんなツマラン工夫で、案外、いろんなことができてきたりするwww


バックアップ
大体動いたら(完璧でなくても)、そのスタイルシートなりHTMLなりを一度保存しておく。次の操作で全てがおじゃんになっても、戻ってやり直せるから。

ただし。全部おじゃんになっても、同じテンプレをダウンロードしなおせば、記事は正常に表示される。HTMLやスタイルシートがどんなにぶっこわれても、記事のデータが損なわれることはない。


この記事にいただいたsugarさんのコメントにあるURLも、テンプレ選びの優先順位やなにやが触れられていて、テンプレの改造前に読むのにオススメ。

[注]この記事はsugarさんのコメントをいただいた「後」で、若干書き換えました。タイトルも変更しております。
関連記事
スポンサーサイト

tag : ユーザーフォーラム

こちらの記事に触発されて、うちでも書いてみました。
http://bittersweetdreams.blog9.fc2.com/blog-entry-567.html

sugarさん、いらっしゃいませ。
>こちらの記事に触発されて、
えっ。そうだったのですか?? 同じところに出入りしていると、同じこと考えますよねー、と思って拝読をしておりました。。。。私のほうが百万倍ばかり性格が悪いですがっw

カスタマイズの前にやることが沢山ありますよと言いたかったのです。つい、すぐに変えちゃえ!って思うのですが、変えないで済むならそれに越したことはないんですよね。
私はけっして表に出さない腹黒です(笑

sugarさんが腹黒だったら、アタシなんてもうwww

この記事、ちょいと書き換えましたww>http://adankadan.blog47.fc2.com/blog-entry-38.html

再度書き換え。URL先ではなく、この記事自体をちょっと書き換えました。

コメントの投稿

非公開コメント

プロフィール

麻生(阿檀) Author:麻生(阿檀)

【このブログについて】
ブログで小説を手軽に連載したい方のための、
ブログ紹介/FC2テンプレート紹介が、メインだったはずなのですが。

ミ^。^彡っ。oO○(いつのまにやら、かなりとんでもなくごった煮ブログになっております。)

MyToyBox

Clock!
doodel ?publish
?style3=10084&index



3601 02 03 04
カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
検索フォーム
タグリスト
                                                 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。