ありのごとくあつまりてFC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。 迷子にならないブログ作りを目指し．．． 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ （Keyword） :
テンプレート  画像  

テンプレート（CSS内） 背景画像を抽出

2009/10/18 (日)  カテゴリー： FC2共有テンプレート

スタイルシート（CSS） で設定している画像を 一発で抽出し、以下のようなファイルが簡単に作れたらいいのに・・・。 とか思いながら、手持ちのフリーソフトなどを駆使して 暇人なことをしてみました。

共有テンプレート ari_seo1 で使ってる 背景画像の一覧 です。 画像を差し替えて使いたい方のサイズ確認 や カスタマイズの参考にどうぞ。 ※以下の素材は FC2ブログの共有テンプレート ari_seo1 及び ari_seo2L , ari_seo2M で使用している画像です。 テンプレート利用者以外の持ち帰り（ダウンロード） は禁止させていただきます。

FC2ブログ共有テンプレート　ari_seo1
ari_seo1
Large font , cute version?
2009/09/11～ FC2ブログ共有テンプレート　ari_seo2L
ari_seo2L
Large font , for Lady's
2009/10/13～ FC2ブログ共有テンプレート　ari_seo2M
ari_seo2M
Medium font , for Men's
2009/10/14～
body {
background:#ccc url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/waku_middle.png) repeat-y center top;
background-attachment:fixed;
}
CSS 設定画像
waku_middle.png　(148 byte　1KB)　928×13


/* Structure （構造）
------------------------------------- */
#wrapper {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/waku_bottom.png) no-repeat center bottom;
}
CSS 設定画像
waku_bottom.png　(1071 byte　2KB)　928×47

#top {
background:#ccc url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/waku_top.png) no-repeat center top;
}
CSS 設定画像
waku_top.png　(1063 byte　2KB)　928×66

#header {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_img_r.png) no-repeat;
}
CSS 設定画像
t_img_r.png　(11219 byte　11KB)　900×166

/* Navigation
------------------------------------- */
#nav {
background:#000 url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_menu.png) repeat-x;
background:#000 url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/t_menu2.png) repeat-x;
}
CSS 設定画像
t_menu2.png　(267 byte　1KB)　70×35

#nav a.this {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_menu_this2.png) no-repeat center bottom;
}
CSS 設定画像
t_menu_this2.png　(509 byte　1KB)　70×35

#nav li .navitop:hover, #nav li:hover .navitop {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_menu_this2.png) no-repeat center bottom;
}
CSS 設定画像
t_menu_this2.png　(509 byte　1KB)　70×35

/* Feed */
#feed {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_feed1.png) no-repeat;
}
CSS 設定画像
t_feed1.png　(775 byte　1KB)　152×25

a.feed-button {
background:url("http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_feed_button.png") no-repeat 0 0;
}
CSS 設定画像
t_feed_button.png　(3494 byte　4KB)　100×50

a:hover.feed-button {
background-position:0 -25px;
}

/* Entries
------------------------------------- */
.entry_title {
background:url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_h2_1.png) no-repeat;
}
CSS 設定画像
t_h2_1.png　(5744 byte　6KB)　600×131

/* Comment, Trackback
------------------------------------- */
.cm_title {
background:url("http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_cm_1.png") no-repeat;
}
CSS 設定画像
t_cm_1.png　(2779 byte　3KB)　600×84

.tb_title {
background:url("http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_tb_1.png") no-repeat;
}
CSS 設定画像
t_tb_1.png　(2542 byte　3KB)　600×84


/* 著作権表示部分
------------------------------------- */
#footer .copyright {
background:#5dbec3 url(http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_footer1.png) no-repeat center top;
}
CSS 設定画像
t_footer1.png　(4052 byte　4KB)　800×110

テンプレート ari_seo2L , ari_seo2M の場合は 横×縦 のサイズが異なるもの （上のヒヨコの画像関連） もあるので、ご確認ください。

ちなみに、ヒヨコの画像の作者さん mococo の MOKOさんには 共有テンプレートとして登録する前にメールでコンタクトを取らせていただきました。 画像加工などの報告のみのつもりでしたが、温かいお言葉まで頂き... とても感じのよさそうな方でした♪


関連記事

キーワード検索 ： テンプレート  画像  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-87.html

2009/10/18 ～ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |

CATEGORY : テンプレ・FC2マニア » FC2共有テンプレート
この前の記事 ： 2010年 写真フレーム年賀状用テンプレート
この次の記事 ： 共有テンプレート サポート専用窓口 （1）

4 Comment


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- |  2010/02/16 (火)　 No.301


Aさんへ

はじめまして！
質問の件、今ひとつ理解できなかったので 見当違いな回答でしたらすみませんが．．．
スタイルシートの 赤文字部分 を変更してみると、ご希望の表示になると思います。

/* Structure
------------------------------------- */
#content {
position:relative;
top:-40px;　← これを 0px としてみてください。
float:left;
margin:auto 5px 10px 20px;
padding:0;
width:610px;
min-height:600px;
line-height:1.7;
}

※「トップページで削除した」 という部分は、元に戻しても大丈夫です。

paruparu |  2010/02/16 (火)　[ 編集 ] No.302


だっきゃです三(((o ･`∀･´)ﾉ

paruparuさん、こんにちは三(((o ･`∀･´)ﾉ

メールの件　修正致しました♪・・おそらくｗ
何かあたしの目では違いがよくわからなかったんですけろ
又何か気づいたら教えていただけると助かります♪
ありがと～♪ヾ(＾Д＾*)ノ

ではでは、また遊びに来ま～す。

だっきゃ |  2010/02/18 (木)　 No.303


ちゃんと、直ってました。 細かくてすみません＾＾
多分、殆どの環境でピッタリOKだと思うのですが、過去の経験から念のため。。。

最近、記事ぜんぜん書けていないけど、また遊びに来てくださいね！
（バックグラウンド では地味に色々リニューアル中です。。。）

paruparu |  2010/02/18 (木)　[ 編集 ] No.304

コメントを投稿する　記事: テンプレート（CSS内） 背景画像を抽出


お気軽にコメントをどうぞ。
ソースコード等の < と > は （実態参照に変換されるので） そのまま使ってOKです。 & は 全角 に変えて使ってください。

 　任意 : 後から修正や削除ができます。
 　非公開コメントとして投稿する。（管理人にのみ公開）
　

Trackback


この記事にトラックバックする （FC2ブログユーザー限定）
この前の記事 ： 2010年 写真フレーム年賀状用テンプレート
この次の記事 ： 共有テンプレート サポート専用窓口 （1）