ありのごとくあつまりて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? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

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 ・`∀・´)ノ

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

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

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


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

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

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

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


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

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

Trackback