HOME
INDEX
LOG IN
SEARCH
よく検索されるキーワード
ブログカード
初心者向け
トラブル対処
RWD
Validation
SEO
Tips
Smartphone
Responsive
Playground
上級者向け
CATEGORY
テンプレート (101)
┣
ブログ内限定配布 (7)
┣
リリーステンプレート早見表(表示タイプ別) (1)
┗
配布終了・旧作 (24)
利用上のお願い (5)
テンプレ不具合・修正など (99)
よくあるご質問「お困りですか?」 (3)
┗
ご質問の前に (2)
FC2不具合情報 (26)
割と重要なお知らせ (53)
カスタマイズ (168)
┗
SNS (5)
FC2ブログのあれこれ (155)
webのあれこれ (101)
雑記 (18)
┗
雑談 (5)
未分類(個人的テスト等) (23)
The other way round
Home
›
コメント編集
> padding-top の数字を小さくしてみてもブログタイトルとの幅が縮まらない〜 こちらはすぐ上にあるブログタイトルにもpaddingが指定されているためです。 今回修正するブログ説明文側のpadding-topを削除すると、自動的にタイトルとの距離は30pxになります。 距離30pxで体裁が取れるのであればpadding-topの一行は不要ですので削除してください。 逆にもっと距離を狭くしたい場合は [太字]#blog-title {[/太字] で検索し、その括りの padding: 30px 0; を以下の通り修正 padding: 30px 0 [斜体][斜体]●●[/斜体][/斜体]px; 30pxが「上」0が「左右」●●が「下」の距離指定です。 #blog-titleの方でpadding調整をする場合には「距離を[下線]近づける[/下線]」作業になります。 ----------- 画像を調整する場合の方法は概ね4通りかと思います。 ① 画像自体を変更する ② 現在の画像のまま、画像編集で暗色系のオーバーレイをかける (画像編集が必要) ③ 現在の画像のまま、画像編集なし、CSSで暗色オーバーレイをかける (CSS追加が必要) ④ 現在の画像のまま、画像編集なし、テキスト(ブログタイトル及び説明文)にCSSシャドウ処理をかけて浮き立たせる ①と②についてはご自身で行って頂くことになります。 ③と④の手順を書いておきますのでご希望に沿う方を採用されると良いと思います。 もちろん以下の方法を利用しなければいけない、ということではありません。 そして ・[下線]ブログタイトルリンク色は「白」である[/下線] ・画像はヘッダー(.header-banner)ではなく[下線]ヘッダー内側の要素(.blog-name-container)[/下線]へ指定する 上記2点、はるさんのカスタマイズ済み内容を尊重し、前提にしています。 ホントは画像はヘッダーに指定した方がスマートですが、既にカスタマイズ済みなのでここは触らずに進めましょう。 ------- 元の画像スクショ http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/original98u2943th.jpg ③ CSSオーバーレイ [太字].blog-name-container {[/太字] で検索。ヒット2箇所。最初のものが対象。 この括りの [太字]color: white;[/太字] の直下に [太字]position: relative;[/太字] を追加。 続きまして検索。 [太字]#blog-title {[/太字] この括りの [太字]text-align: center;[/太字] の直下に [太字]position: relative; z-index: 3;[/太字] を追加。 そして昨日追加した [太字]#site-description[/太字] の括り [太字]color: 文字カラーコード; [/太字] の直下にも同じく [太字]position: relative; z-index: 3;[/太字] を追加。 続きましてCSSソース末尾で良いので [太字] .blog-name-container:before { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; }[/太字] を追加。 結果スクショ http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/overlay9827493th.jpg -------- ④ テキストにシャドウ [太字]#blog-title {[/太字] の [太字]text-align: center;[/太字] の直下に [太字]text-shadow: 2px 0px 2px rgba(85,85,85,.8);[/太字] を追加。 説明文にも必要であれば、 #site-description にも同じものを追加。 結果スクショ http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/shadow9827493th.jpg 以上です。よろしくお願いします。
SECRET
SEND
DELETE