川蜻蛉の舞う渓にて:ブログ改造計画Ⅲ「記事の背景に写真を！」

2008年01月06日

ブログ改造計画Ⅲ「記事の背景に写真を！」

トップ画像が、上手に出来るようになると
次にやりたくなるのが、各記事の下のほうについている背景写真！！

こんな、グラデーションのついた写真を入れている方、多いですね♪
写真の作り方は、「Excelで写真編集」
大きさは、普段アップしてる写真の大きさを参照にしてください！
（200×150くらいが、妥当でしょうか・・・）

今回の変更箇所は・・・

.blogbody{
background:#6E8459 url(//img01.naturum.ne.jp/usr/kawatombo/haikei1.jpg);
background-repeat:no-repeat;
background-position:bottom right;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;

}
また、ピンクの文字を目印に、探してみてくださいね♪

グリーンの部分が、写真のURLを挿入した場所！
ちなみにオレンジの部分が、記事の背景色ではないかと・・・

シンプルスタイルのテンプレートなどは
.blogbody{
background:#fff;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #8c0000;
border-right:1px solid #8c0000;
border-bottom:1px solid #8c0000;
}
ってなってますよね♪
#fffの後に、url(http://・・・・）を、
その下に、青い文章二つを入れてしまいましょう！！
ちなみに
background-repeat:no-repeat;　画像を繰り返さない、と言う設定（付けないと・・・面白いことが！）
background-position:bottom right;　下の右側に表示、と言う設定（left 左、center 中央）

ブログ改造はまだまだ続きます・・・（汗）

Kawatombo Ken

この記事が役に立ったと思ったら・・・
ぜひご協力くださいm(__)m

にほんブログ村のランキングに参加中です！
一日一回ワンクリックお願いします♪

同じカテゴリー（カスタマイズ基本編）の記事画像

同じカテゴリー（カスタマイズ基本編）の記事

ブログ改造計画Ⅶ「ブログ背景を変更」
ブログ改造計画Ⅵ「日付部分のカスタマイズ」
ブログ改造計画Ⅴ「サイドバーをオリジナルに」
ブログ改造計画Ⅳ「シンボルマークを入れよう！」
ブログ改造計画Ⅱ「ブログタイトルの文字変更」
ブログ改造計画Ⅰ「トップ画像をオリジナルに」

Posted by Kawatombo Ken at 23:50│Comments(20) │カスタマイズ基本編

この記事へのコメント

す・凄えぇぇ～！

　オイラなんか、トップ画像替えるだけで
　１時間も四苦八苦して、泣きそうでしたよ（３５歳ですが何か？）
　写真のサイズ変えるだけでも大変なのにぃ・・・
　尊敬いたします！

Posted by ｙｏｇｏｒｅのｍａｋｏｔｏ。

at 2008年01月07日 10:20

Kenさん

もし、Photoshopを持っているなら比較的簡単にできると
思います。

この例だと
１）緑のバックグランドの右下に写真を貼り付けておく
２）グラデーションツールで描画色から透明に変化して
　いくグラデーションを設定しておく
３）左から右、上から下へとグラデーションをかける

そうすれば、だいたいこんな絵ができるでしょう。

思うように行かなかったら、グラデーションの設定を色々と
いじってみてください。

Posted by jbopper at 2008年01月07日 14:18

こんばんわ、
　　
画像処理（透明処理）などは、
フリーソフト　“ＧＩＭＰ”　が便利ですよ！
　　　　　
マニュアルが無いのが、たまにきずですが
ＶＥＣＴＯＲ　のサイトから　ダウンロード出来ます、
　　　
http://www.vector.co.jp/　から、“ＧＩＭＰ”で検索して見て下さい
使い方は、分からない所をメール下されば、
　　
お返事致します（時間掛かりそうですが・・・・）

Posted by メタボおやじ at 2008年01月07日 19:19

こんばんは

どひゃぁ～！
エクセルでココまでやられるとは！！！本当にお疲れ様でした。
もう、Kawatombo Kenさんには、頭が上がりません。（笑）
私もPhotoshopで、加工に30秒ぐらいです。

Posted by hajihadu at 2008年01月07日 22:14

makotoさん、こんばんは！
難しいのは、写真の編集です(TдT)
それさえ出来てしまえば、ブログに組み込むのは表紙を替えるのと大して変わりませんよ♪
気を付けるのは「http://」から打ち込むこと、それと元々記事の下に何らかの写真・イラストが入っているテンプレートを選んだ方がやりやすいでしょうね！

jbopperさん、こんばんは！
毎度毎度ありがとうございます。
先ほどフォトショップで、写真を編集してみましたが、腹が立つくらい簡単に出来ましたよ！
私は何でこんな手間を掛けてしまったんだろう・・・（；＾＾Ａ
また宜しくお願いしますね！！

メタボおやじさん、どうもです！
なるほど「GIMP」ですか！？
最近少々写真の編集に目覚めてきたんで、使ってみることにします（＾＾）ｂ
判らなかったらメールしますんで（本気！）
どうか宜しくお願いしますm(_ _)m

hajihaduさん、こんばんは！
エクセルは、職場に異常なほど詳しい方がいるんで、教えてもらってます（；＾＾Ａ
私も普段から仕事で使ってるんで、馴染みもありますしね♪
フォトショップは「とある事情で」マニュアルが無いもので・・・ﾍ(ﾟ∀ﾟﾍ)

Posted by Kawatombo Ken at 2008年01月07日 23:50

こんばんは！！

以前、「教えてブログ＠ナチュラム」で質問し

Kawatombo Kenさんに答えを頂いた犬山です。

その後、タイトル画像の変更はなんとか理解できました（＾＾有難うございます!!
（お気に入りの画像がないので変更してませんが。）

次に、
「記事の右下に写真を入れる」に挑戦したいのですが
解説の通り緑の部分に画像を入れると
記事全体に画像が並んで配置されてしまいます（汗
画像のサイズに問題があるんでしょうか？

テンプレートは「3カラム　シンプルブルー(幅100%)」を使用しています。

お時間ある時で構いませんので
ご説明して頂ければと思います。
宜しくお願いします。

Posted by 犬山

at 2008年06月06日 18:21

犬山さん、どうもです！
やってみましたが、確かになっちゃいますね・・・（；＾＾Ａ
background-repeat:no-repeat;
background-position:bottom right;
この二つの文章を、写真を入れた文章のすぐ下に入れてみてください！

私の場合は上手くいきました！
メールも送りますね♪

Posted by Kawatombo Ken

at 2008年06月06日 21:21

Kawatombo Kenさん・・・・

ありがとうございます（T T
迅速丁寧な対応にどう感謝していいやら（泣

少しずついじって自分のテンプレートを完成させたいです（＾＾

本当にありがとうございます！！

またお邪魔します！！

Posted by 犬山

at 2008年06月06日 22:19

犬山さん、こんにちは！

チョット見てきましたよ（＾＾）ｂ
イカ・・・美味いしそうですね（笑）

全てのテンプレートで試した訳ではないので
他の改造場所にも、うまくいかない所があるかもしれません
改訂版を出す予定もあるので、
何かありましたらメールでもコメントでも構いません！
いつでも聞いてきてくださいね♪

Posted by Kawatombo Ken at 2008年06月07日 11:34

できましたよぉ

FAQでおしえていただき、

カスタマイズ改造計画

見ながら

やっとこさ、記事の背景できました

グラデーションで不透明度５０でjtrimでしあげてみました

Posted by kshunsuke at 2008年07月11日 15:30

kshunsukeさん、こんばんは！

あら？
ブログタイトルの色変更では無かったんですか？
まぁ、何にせよ良かったです（＾＾）ｂ

一つ気になったんですが
私は、こうしてワザワザ、ブログを訪ねてきてくれたのですから良いんですが
FAQでの他の質問、回答してくれた方へ
お礼のメッセージくらい入れた方が良いと思いますよ

Posted by Kawatombo Ken at 2008年07月11日 20:47

こんばんわ。気がつかずにごめんなさい。質問して回答してくれた方へただ今お礼のコメを入れておきました。今後も気をつけたいと思います。

ブログタイトルの色変更を試みたのですが、背景画像とどの色をとっても見やすい色にたどり着けずに、別の記事の背景画像に目が移り、こっちのほうをkawatomboさんの示してあるタグどおり試みたのでした。

なんだか、オリジナルってやっぱりいいものですね。

凝り性なもんで・・・・。

さて、今日は記事タイトルの前にシンボルマークを入れてみることに挑戦してみました。

勉強になりました。ありがとうございます。

Posted by kshunsuke at 2008年07月12日 23:34

はじめまして

なんだか頭が・・・・・目が・・・・・。
ほんと目が回りそうです。

皆さんオリジナルの背景見てるといいなぁと思い
自分もやってみよぅ　と息巻いたけど・・・・。

気分悪くなってきた。
また体調整えてお邪魔しますぅ。

Posted by ittoQ ittoQ

at 2008年08月21日 14:23

ittoQさん、こんにちは！

ハハハ・・・
慣れてない時は、そんなものですよ！
私だって、最初はそうでしたよ( ´∀`)ﾉ

ここにコメントをしてくださったと言う事は、いきなり改造計画Ⅲから始めようとしたんですね（；＾＾Ａ
ブログ改造の関連記事は、順番に読むことを前提に編集して有りますので、最も基本的なことは、改造計画Ⅰで説明しているんですよ！

カテゴリー「テンプレートのカスタマイズ目次」より
ブログ改造計画Ⅰ「トップ画像をオリジナルに」
ここから読んでみてください（＾＾）ｂ

自分では「これ以上簡単に説明できない！」と言うくらい、気を使って記事を書いたつもりです
それが出来たら、次は改造計画Ⅱ
その上で、ここの記事を読んでみてください
きっと判りますよ♪

それでも判らないようであれば、メールをください
出来る限りのアドバイスをしましょう！！

Posted by Kawatombo Ken

at 2008年08月21日 15:05

ありがとうございます。

てまえは、とんとアナログ人なのでいきなり突飛な質問するかも～

よろしくお願いしますね。

改造計画Ⅰから突入してみます。
失礼しました♪

Posted by ittoQ ittoQ

at 2008年08月21日 17:11

こんばんわ　　 Kawatombo Ken

いやぁ～　いろいろ　突いてると夢中になって
愉しいですぅ。

ブログの背景がちょっとづつですが、変わっていくのが
愉しくてドップリ浸かってます。ちょっと抜け出せなくて
ブログＵＰするのも忘れて・・・・。

改造計画参考になります。ありがとうございました（笑）
またお邪魔します。

Posted by ittoQ ittoQ

at 2008年08月24日 00:23

ittoQさん、こんにちは！

色々頑張ってるみたいですね（＾＾）ｂ

改造は、少しづつ気長にやる方が良いですよ♪
手を加えること以上に、バランスが大事ですから！

何か有りましたら、またいつでもどうぞ！！

Posted by Kawatombo Ken

at 2008年08月24日 10:26

こんばんは～

凄すぎです！！

大変参考になりました。
早速改造して、ブログをパワーＵＰします。

又、お邪魔させて頂きます！
ありがとう御座いました。

Posted by bakabon at 2009年05月25日 22:39

bakabonさん、こんばんは！

早速見に行きましたよぉ～♪
バカボンのパパマークが素敵です（＾＾）ｂ
ブログに自分のカラーを持たせられるのも、カスタマイズの魅力ですよね！

何か有りましたらまたどうぞ

Posted by Kawatombo Ken at 2009年05月28日 19:35

ナチュログカスタマイズで検索したらこちらにたどりつきました。

Ｈ．Ｄと申します。

いろいろいじったのですが、最後のカスタムが上手くいきません。

記事やブログパーツが乗っかっている背景の色を黒くしたいのですが白のままです。

どうしたらこの背景の色を変更することができるのでしょうか???

ご教授宜しくお願いします。

Posted by ''H.D.''a.k.a.シャクリマフィア

at 2012年05月03日 23:46

※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

名前:
メール:
URL:
情報を記憶:
コメント:	上の画像に書かれている文字を入力して下さい
	＜ご注意＞書き込まれた内容は公開され、ブログの持ち主だけが削除できます。確認せずに書込

このページの上へ▲