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で質問しましょう!
似たような質問が見つかりました
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- FC2ブログ どうやるのか、さっぱり分かりません。ブログ引っ越したいと思っています(URLだけを変えたい)。 3 2022/12/01 07:40
- Ameba(アメーバブログ) アメブロ テンプレート 1 2022/06/27 00:54
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- WordPress(ワードプレス) Wordpressの記事URLを自由に決めたい 3 2022/06/02 12:05
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- デスクトップパソコン QRコードの作り方と可能な範囲。 4 2022/11/13 13:46
- FC2ブログ FC2ブログで文字を小さくしたいです。小さくする方法を教えてください。 1 2023/08/26 00:46
- gooブログ gooブログへのコメント投稿について 1 2023/05/21 03:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アメーバのブログ 画像の貼り付け
-
iPhoneで作れる高級感のあるオ...
-
三つ折りのリーフレットを作りたい
-
はてなブログ 設定
-
FC2ブログ テンプレートの文字...
-
FC2ブログで、「続きを読む...
-
[movable type]プラグイン名が...
-
FC2ブログの下書き保存場所...
-
Wordの「キーボードのユーザー...
-
FC2ブログについて
-
fc2ブログの記事が太字にならない
-
工数表のテンプレートってない...
-
fc2ブログでの文字色の変更
-
tableの中のtableの表示と外側...
-
連絡網を作成したい・・・。
-
パソコンで原稿用紙・・・
-
カテゴリで読みたい記事を選ぶ...
-
Seesaaブログ 横幅設定変更に...
-
FC2アクセス解析のが表示されま...
-
ホームページビルダーのナビゲ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログのサイドバー...
-
中央寄せの解除
-
wordpress カスタムフィールド...
-
ライブドアブログにおいて記事...
-
FC2ブログの右サイドバーが落ちた
-
bloggerブログで画像の枠を消す...
-
gooブログのヘッダーに画像
-
エキサイトブログで挿入画像を...
-
FC2ブログ タイトルの文字を...
-
アメブロ。日記から本文がはみ...
-
本文の文字を大きくしたい
-
アメーバブログの両サイドの余...
-
2beeブログで行間と文字の間隔...
-
ブログ記事内に文章を左右2列に...
-
アンドロイドで文字が左に偏る。
-
WordPressのヘッダー上部の余白
-
fc2ブログのブログ説明文の文...
-
W3CのHTML結果とCSS結果の問題...
-
お世話になっております。fc2で...
-
seesaaでテンプレートを変更したい
おすすめ情報