ブログ初心者です

質問

ブログ初心者ですが、なんとか勉強したいと思っています。
利用しているブログはＦＣ２ブログのものです。
　現在、ＦＣ２の公式テンプレートを設定していますが、ブログのタイトルの背景に自分で撮影した写真を貼り付けたいのです。

ＨＴＭＬの編集やスタイルシートの編集のどの部分をいじったらできるのでしょう？
　あと、タイトルの文字の大きさも大きく変えたいです。マニュアルを読んでも全くわかりません。

回答No.8

noname#57571 · ベストアンサー

> 今度はサブタイトルの文字色を白色に変えたいのですが・・・

う～ん、このテンプレートには困った‥ （ー"ー ）
今度は116行目以降の「.site_intro」のクラス指定ですが、この中の「color」プロパティの記述に誤りがあります。
color: ffffff; → color: #ffffff;
と変更します。色を16進数で記述する場合は先頭にシャープを付けます。

【以下余談】
カラーコードは6桁ですが、スタイルシートでは3桁で表記する独自の表記方法があります。色々なテンプレートを使ってみると分りますが、この書き方を採用しているテンプレは結構多いです。
例
白： color: #fff;
黒： color: #000;
赤： color: #f00;

また、下記のように色名で指定することも出来ます（この場合はシャープは書きません）。
白： color: white;
黒： color: black;
赤： color: red;

参考
『TAG index』
・スタイルシートの基本-色の指定
http://www.tagindex.com/stylesheet/basic/color.html
・カラーネーム 147色
http://www.tagindex.com/color/color_name.html

お礼

回答ありがとうございます。
文字の色、うまくいきました。
大変感謝しています。

回答No.7

noname#56882

#3、#5です。ANo.6様でなく差し出がましいことを失礼致します。

サブタイトルの色指定が公式では間違っていますね。
#ffffffにしないといけないのに「ffffff」になっていますし。

/*サイト説明文*/
.site_intro {
padding-left: 130px;
font-size: 12px;
font-weight: normal;
color: #ffffff;　　　（←これに変えてください）
padding-right:50%;
}

これでうまく行きませんでしょうか？

お礼

回答ありがとうございます。
文字の色、うまくいきました。
すごく感謝しています。

回答No.6

noname#57571

デジカメ画像の縦横比は４：３ですから、この比率を維持したまま横幅を770pxに縮めた場合、高さは578pxになります（比率を変えてしまうと画像は当然歪みます）。
先述の「#header」の中のheightプロパティを
height : 205px; → height : 578px;
と変更すればピッタリ収めることは出来ますが、これだとブログにアクセスした時画面の大半がタイトル画像で占められることになってしまい、訪問者がイラつくことは必定です (笑)
ANo.5でNymphLunaさんが説明していらっしゃるように部分的にカットして使う他ありませんね。ちなみに私のブログではトップの写真を800×300pxで表示させていますが、この高さでも訪問者の皆さんは結構鬱陶しいと感じているんじゃないかと思います （ ^^；

お礼

何度もありがとうございます。

文字の大きさも背景画像も貼り付けることができました。
でも、写真を貼り付けたらサブタイトルの黒文字が見づらくなってしまったので、今度はサブタイトルの文字色を白色に変えたいのですが・・・colorを書き換えただけじゃ変わってくれず、苦労しています。

回答No.5

noname#56882

文字サイズに関しては当方も何度やり直しても変化がありませんでした。
No.4様が仰っているように、テンプレート自体に問題があるみたいです。
（普通にhtmlを書くと23pxですとかなり大きくなるのですが…）
他のフォントサイズも反映されていないようです。
お力になれなくて申し訳ありません。

さて画像のリサイズですが、なかなかこのサイズに合う写真は無いと思われますので
ご自身で作り直す必要があります。
「1280×1024」の大きさの写真があったとしましたら、横幅を「770」に縮小し
その後で上下を「205」の高さにして切り抜くという方法が綺麗になると思います。
「JTrim」というソフトがリサイズや加工が出来ますので一度お試しください。
http://www.woodybells.com/jtrim.html

お礼

ありがとうございます。

ちゃんと写真を貼り付けられるようになりました。

回答No.4

noname#57571

> 文字サイズの変更ですが、どうもうまくいきません。

最初見た時、タイトルがこんなに小さいなんてどうも変だなと思ってたんです。このテンプレートは欠陥ですね。公式テンプレでも結構あるんですよ、そういうの‥ （ ^^；
直し方は下記の通りです。

スタイルシートの105行目以下に次の記述があります。

.site_title a:link { color:#ffffff; text-decoration: none;}
.site_title a:active { color: #ffffff; text-decoration: none}
.site_title a:visited { color: #ffffff; text-decoration: none}
.site_title a:hover { color: #dadada; text-decoration: none;}

それを下記の通りそっくり上書きしてください。

.site_title a:link { color:#ffffff; text-decoration: none; font-size: 23px;}
.site_title a:active { color: #ffffff; text-decoration: none; font-size: 23px;}
.site_title a:visited { color: #ffffff; text-decoration: none; font-size: 23px;}
.site_title a:hover { color: #dadada; text-decoration: none; font-size: 23px;}

お礼

ありがとうございます。

ちゃんと大きな文字になりました。

回答No.3

noname#56882

テンプレートはhappy_familyとのことですので
タイトル部分に入れる写真の画像の大きさは「770×205」にリサイズしアップロードします。

次に「環境設定」から「テンプレートの設定」を選択し「PCテンプレート」の中にある
「happy_family」の右側に「編集」とありますのでそれをクリック。
「happy_familyのスタイルシート編集」の中の一番上に下記のような記述があります。

#header {
width : 770px;
height : 205px;
margin-top: 0px;
padding-top: 0px;
text-align: left;
background-image: url();
}

以下を変更してください。
background-image: url();
の()の中にアップロードしたタイトル写真のアドレスを記入します。
http://blog00.fc2.com/template/happy_family/image/sample.jpg（あくまで例です）

タイトルの文字の大きさを変更したい場合は

/*サイトタイトル*/
.site_title{
padding-top: 35px;
padding-left: 130px;
font-size : 23px ;
font-weight : bolder;
font-family : \FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF ;
color : #ffffff;
line-height : 170% ;
}

font-size : 23px ;のpxの前の数字を大きくすれば文字が大きくなります。
逆に小さくすれば文字も小さくなります。

お礼

回答ありがとうございます。

貼り付ける箇所はわかりました。
が、なかなか770×205サイズの画像がなく、リサイズできずにいます。デジカメの設定にも撮影サイズを指定できる機能が無いようです。
　今ある画像のサイズを770×205に変更したところ、写真が横に引き伸ばされたカンジになって使えませんでした。
どのサイズで撮影し、リサイズすれば見られる画像になるのかが途方にくれています。

文字のサイズですが、font-size : 23pxのところを３０にしてみたり、４０にしてみたのですが、全く変わってくれません。文字の大きさよではなくだんだんサブタイトルが下にずれていくようです。

回答No.2

noname#57571

タイトル部背景画像の変更
スタイルシートの「#header（27行目～）」の中に background-imageプロパティの指定があるので、このURLをご自分でアップした画像のものに書き換えます。画像のサイズが同じならそれだけでＯＫです。

サイト・タイトルの文字サイズ変更
同じく「.site_title（96行目～）」でfont-sizeプロパティの数値を変更します。

お礼

再度、回答ありがとうございます。

なかなか貼り付ける画像サイズがありませんが、貼り付けることはできました。あとは画像サイズの問題だけです。

文字サイズの変更ですが、どうもうまくいきません。変更する箇所があっていると思うのですが、数値を変えても大きくなってくれません。

回答No.1

noname#57571

その辺はテンプレートによって色々なので、テンプレート名をお書きにならないと確かな答えは出来ないと思います。

お礼

さっそく回答ありがとうございます。
補足しましたので、よろしくお願いいたします。

補足

テンプレートはhappy_family です。
http://staff.blog1.fc2.com/?style=happy_family

よろしくお願いします。