fc2ブログのテンプレをいじる話

 折角fc2ブログのテンプレいじったんだし、そんな話で記事も書いておこうかと。
 内容としては初歩っぽいけど、何かの参考になれば。
 本当なら画像貼って説明分かりやすくしろって話だけど、面倒なので勘弁してください(


 今使っているテンプレが「sky_cube」というテンプレ
 最初に気に入って、それからずっと使っている。
 テンプレの設定は、fc2ブログの管理ページの「設定」→「テンプレートの設定」から確認・変更できる
 ここで、「公式テンプレート追加」から探せば見つかるはず。

 で、テンプレを持ってきたところで、いじってみる。
 テンプレをいじると、見た目を変えたり配置を変えたり画像を差し替えたり、とおおよそWebページの編集みたいなことができるはず。
 こういうの詳しい人はたくさんいるので、分からないことは適当に検索するが吉。

 テンプレの編集をするため、「HTML編集」「スタイルシート編集」を書き換えていく
 書き換える前に、中身をテキストエディタ(メモ帳とか)にコピーしてバックアップを取っておくのがいいかと

 今回の目的は、「ブログ名が書いてあるエリアに画像を貼り付けること」。
 そのため、その辺のコードを書き換えていく。

 先に「スタイルシートの編集」から。
 まずは画像を張るために、画像のリンクを書き換える

 変更する場所は
/* Layout
------------------------------------------------------------ */
 と書いている辺りの下

***** 変更前
133: border-left-color: #5F768D;
134: background-image: url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_header.jpg);
135: padding-top: 25px;

***** 変更後
133: border-left-color: #5F768D;
134: background-image: url(http://card.psnprofiles.com/1/ptomo_otsgod.png), url(http://templates.blog.fc2.com/template/sky_cube/sky_cube_header.jpg);
136: background-position: right;
137: background-repeat: no-repeat;

138: padding-top: 25px;

*****

 (数字は行数なので、編集時には気にしなくていい)
 background-image: url(~~)で、画像のリンクを貼ってくる。
 ここで、2つ以上の画像を張るときは、「,」で区切ると上から順番に重ねて表示される
 background-position: rightで、右寄せにする
 background-repeat: no-repeatで、表示を1つにする
 no-repeatをかけないと画像を貼る枠に対して繰り返し表示される(デスクトップの並べて表示みたいな)ので、必要かと。

 すると、画像は貼れるが、枠の大きさに合っていないはず
 そこで、枠の大きさを調整する

***** 変更前
119: margin-bottom: 7px;
120: height: 40px;
121: background-color: #FFFFFF;

***** 変更後
119: margin-bottom: 7px;
120: height: 85px;
121: background-color: #FFFFFF;

*****

 何のことは無い、heightを大きくして収まるように調整すればいい
 background-colorをいじれば、謎の空白の色も変えられるはず。
 謎の空白が出来ていること自体、見栄えが悪いといえば悪いけど(


 ……あれ、これで終わりじゃね!? すごい楽じゃん!?
 多分、これで上にWeb上の画像が貼れるので、改造おしまい。



 これで上部の枠が大きくなったので、それに合わせてブログのタイトルとかもいじってみる

***** 変更前
207: #header h1 a {
208: color: #555555;
209: line-height: 16px;
210: }

***** 変更後
210: #header h1 a {
211: color: #111111;
212: line-height: 30px;
213: font-size: 30px;

214: }

*****

 colorで色を変え、font-sizeで文字の大きさを変更。
 合わせて、line-heightで見栄えを調整。この辺は適当に。

***** 変更前
217: div#header p {
218: color: #CA9751;
219: }

***** 変更後
221: div#header p {
222: color: #33cc66;
223: line-height: 18px;
224: font-size: 18px;

225: }

*****

 colorで色を変え、font-sizeで文字の大きさを指定する。
 これだけで変更できるからcssはちょろい(慢心)。


 ついでに、ブログタイトル以下の紹介文を書き換える
 ブログ説明自体は管理ページの「環境設定」で「ブログの説明」を書き換えればいいのだが、改行が出来ない
 そこで、先ほど話に出した「HTML編集」で該当する部分を直接書き換える

***** 変更前
<p><%introduction></p>
***** 変更後
<p><%introduction>「ここに紹介文」</p>
*****

 このintroductionタグの中に書くだけ。brタグで改行し放題。
 せっかくスペース大きくなったし、有効活用できたかな。



 というわけで、改造おしまい。
 自分はFirefoxを使って、変更したい部分で右クリックして「要素を調査」でどの辺りを書き換えればいいか調べて作業した。
 この辺も、詳しい人とか色々やり方を知っているのではなかろうか。




 普段ゲームの話ばっかりしてるから、こんな内容でいいのか気になってしょうがないw。
スポンサーサイト

コメント

非公開コメント

プロフィール

PTOMO

Author:PTOMO
とにかくゲームが好きな人。
特に好きなゲーム:
beatmaniaIIDX
DJMAX TECHNIKA等々
好きなマンガ:
神のみぞ知るセカイ

IIDX
DJNAME:OTSGOD
ID:0344-7671
段位(tri):SP十段82%
クリア表はこちら。

TECHNIKA2
スコア表はこちら。D2むずい。

ゲームメーターはこちら。
プレイ済ゲーム一覧ですね。

PSN Profilesはこちら。
積極的にトロフィーを取るぞ。

最新記事
最新コメント
最新トラックバック
カテゴリ
月別アーカイブ
FC2カウンター
リンク
twitter
やり込み記事
・【jubeat】凛として咲く花の如く(EXT)攻略
・【CSEMP+BEST】Bad Maniacs出現RTA
・パワポケ13海洋冒険編RTA(1)
・パワポケ13海洋冒険編RTA(2)
・ブロッククラッシュ123!!RTA@2011五月祭
・ブロッククラッシュ123!!RTA@2012
・ブロッククラッシュV RTA
・ブロックラッシュV タイム表
・ブロックラッシュZ タイム表
・テイルズオブシリーズ連続RTA(13作品)
・テイルズオブエクシリア ミラ編RTA
・【TOGf】アスベルソロカオス Part1(全7回)
・ラブプラス3人同時攻略RTA
・フォトカノKiss 6人同時攻略
・ペルソナ4 ザ・ゴールデンRTA
検索フォーム
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
RSSリンクの表示