No.8ベストアンサー
- 回答日時:
> 今度はサブタイトルの文字色を白色に変えたいのですが・・・
う~ん、このテンプレートには困った‥ (ー"ー )
今度は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.h …
・カラーネーム 147色
http://www.tagindex.com/color/color_name.html
No.7
- 回答日時:
#3、#5です。
ANo.6様でなく差し出がましいことを失礼致します。サブタイトルの色指定が公式では間違っていますね。
#ffffffにしないといけないのに「ffffff」になっていますし。
/*サイト説明文*/
.site_intro {
padding-left: 130px;
font-size: 12px;
font-weight: normal;
color: #ffffff; (←これに変えてください)
padding-right:50%;
}
これでうまく行きませんでしょうか?
No.6
- 回答日時:
デジカメ画像の縦横比は4:3ですから、この比率を維持したまま横幅を770pxに縮めた場合、高さは578pxになります(比率を変えてしまうと画像は当然歪みます)。
先述の「#header」の中のheightプロパティを
height : 205px; → height : 578px;
と変更すればピッタリ収めることは出来ますが、これだとブログにアクセスした時画面の大半がタイトル画像で占められることになってしまい、訪問者がイラつくことは必定です (笑)
ANo.5でNymphLunaさんが説明していらっしゃるように部分的にカットして使う他ありませんね。ちなみに私のブログではトップの写真を800×300pxで表示させていますが、この高さでも訪問者の皆さんは結構鬱陶しいと感じているんじゃないかと思います ( ^^;
何度もありがとうございます。
文字の大きさも背景画像も貼り付けることができました。
でも、写真を貼り付けたらサブタイトルの黒文字が見づらくなってしまったので、今度はサブタイトルの文字色を白色に変えたいのですが・・・colorを書き換えただけじゃ変わってくれず、苦労しています。
No.5
- 回答日時:
文字サイズに関しては当方も何度やり直しても変化がありませんでした。
No.4様が仰っているように、テンプレート自体に問題があるみたいです。
(普通にhtmlを書くと23pxですとかなり大きくなるのですが…)
他のフォントサイズも反映されていないようです。
お力になれなくて申し訳ありません。
さて画像のリサイズですが、なかなかこのサイズに合う写真は無いと思われますので
ご自身で作り直す必要があります。
「1280×1024」の大きさの写真があったとしましたら、横幅を「770」に縮小し
その後で上下を「205」の高さにして切り抜くという方法が綺麗になると思います。
「JTrim」というソフトがリサイズや加工が出来ますので一度お試しください。
http://www.woodybells.com/jtrim.html
No.4
- 回答日時:
> 文字サイズの変更ですが、どうもうまくいきません。
最初見た時、タイトルがこんなに小さいなんてどうも変だなと思ってたんです。このテンプレートは欠陥ですね。公式テンプレでも結構あるんですよ、そういうの‥ ( ^^;
直し方は下記の通りです。
スタイルシートの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
- 回答日時:
テンプレートは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/imag …(あくまで例です)
タイトルの文字の大きさを変更したい場合は
/*サイトタイトル*/
.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のところを30にしてみたり、40にしてみたのですが、全く変わってくれません。文字の大きさよではなくだんだんサブタイトルが下にずれていくようです。
No.2
- 回答日時:
タイトル部背景画像の変更
スタイルシートの「#header(27行目~)」の中に background-imageプロパティの指定があるので、このURLをご自分でアップした画像のものに書き換えます。画像のサイズが同じならそれだけでOKです。
サイト・タイトルの文字サイズ変更
同じく「.site_title(96行目~)」でfont-sizeプロパティの数値を変更します。
再度、回答ありがとうございます。
なかなか貼り付ける画像サイズがありませんが、貼り付けることはできました。あとは画像サイズの問題だけです。
文字サイズの変更ですが、どうもうまくいきません。変更する箇所があっていると思うのですが、数値を変えても大きくなってくれません。
No.1
- 回答日時:
その辺はテンプレートによって色々なので、テンプレート名をお書きにならないと確かな答えは出来ないと思います。
この回答への補足
テンプレートはhappy_family です。
http://staff.blog1.fc2.com/?style=happy_family
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FC2は信用度は大丈夫ですか?
-
Fc.2動画って有料ですか、無料...
-
FC2ブログでプロフィールが2つ...
-
承認制のコメントについて
-
ブログ記事はブログ記事の作者...
-
ブログの記事を勝手に消された...
-
FC2ブログに登録をしていない人...
-
fc2ブログで書ける文字数、何文...
-
FC2ブログ 写真の大きさを縮小...
-
fc2ブログに表を載せたいのです...
-
一般人の目立たないブログでも...
-
アベマブログでこちらの設定が...
-
FC2の掲示板を利用しています。
-
洗濯タグの画像
-
ブログでランキング、順位が上...
-
FC2ブログで文字を小さくしたい...
-
「教えてgoo」と、中古車販売の...
-
比較のしようがありませんが、...
-
mbti教えてください
-
元カレが自分の写真を
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログにおいて記事...
-
中央寄せの解除
-
エキサイトブログで挿入画像を...
-
ライブドアブログのサイドバー...
-
アメブロ。日記から本文がはみ...
-
アメブロでブログタイトル上部...
-
tumblrをやっている方、jsやcss...
-
スタイルシートの使い方について
-
HEAD・HTMLの行間改行が上手く...
-
bloggerブログで画像の枠を消す...
-
FC2ブログで引用に背景色をつける
-
MT4のタイトルを一枚画像(バナ...
-
wordpress カスタムフィールド...
-
ブログ記事内に文章を左右2列に...
-
右サイドバーが下に落ちてしまう
-
お世話になっております。fc2で...
-
FC2 HTML編集について
-
FC2ブログ タイトルの文字を...
-
fc2ブログで記事とサイドバーに...
-
2beeブログで行間と文字の間隔...
おすすめ情報