Gizport
1 回答
0
Share (facebook)
387
view
全般

エキサイトブログのCSS編集についての質問です。 閲覧ありがとうござ...

エキサイトブログのCSS編集についての質問です。 閲覧ありがとうございます。
私はエキサイトブログのサービスを利用して、備忘録がてら趣味についての日記を書き始めました。
ありがたいことにブログの訪問者数も段々と増え、一年半たった今でも続けられています。
なので現状に不満は特にないのですが、他の方が書かれているブログを見てみると、内容もさることながらそのブログデザインにとてもこだわりを感じることがあります。

そこで私も少しブログのデザインにこだわってみたいと思うようになりました。
ところがブログ素人の私はHTMLやらCSSの文字の羅列の意味が分かりません。お分かりになる方がいらっしゃいましたらご教授頂けたら幸いです。
①ブログURL(質問用に同じスキンで作ったブログです)
http://going23456.exblog.jp/
②スキン名
「テクスチャ(麻1)」
③ブログをどのように変えたいか
ブログ一番上のブログ名やブログURLが書いてある部分に、自分の撮った写真を背景として設定したい
④CSS(字数制限の都合上、関係がありそうだと推察できる部分を抜粋)
/*blog-head*/
#blog-head{padding:0 30px 20px;text-align: left;overflow: hidden;zoom: 1; font-weight:bold;color:#64553e;text-shadow:0 1px 0 rgba(255,255,255,0.5);}
#blog-head a,
#blog-head a:active,
#blog-head a:visited{ text-decoration:none; cursor: pointer;color:#64553e;text-shadow:0 1px 0 rgba(255,255,255,0.5);}
#blog-head a:hover{ text-decoration: underline;}
#blog-head .blog-title, #blog-head .blog-url {text-align: left;}
#blog-head .blog-title {margin:30px 0 5px 5px;width: 640px;line-height: 1.1;font-size: 166%;}
#blog-head .blog-title a { font-weight:bold;color:#64553e;text-shadow:0 1px 0 rgba(255,255,255,0.5);}
#blog-head .blog-url {float:left;line-height: 1;font-size:90%; background:rgba(214, 212, 205, 0.3);}
#blog-head .blog-url a{margin-left: 8px;letter-spacing: 0.05em;color:#64553e;background: rgba(214, 212, 205, 0.4);text-shadow:0 1px 0 rgba(255,255,255,0.5);}

ご指導よろしくお願い致します!
Yahoo!知恵袋 3779日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
「ブログ一番上のブログ名やブログURLが書いてある部分」、これを一般的に「ヘッダー」というが、ブログのデフォルトでは「画像ナシ」になっている。
それで自分で「追加」することが必要。
「カスタマイズ」の右端「CSS」の末尾に加えるのがベター。
デフォルトでは質問文のように「一行」で書いているが、改行して書いてもよい。
#blog-head {
background:url(画像 URL) no-repeat center top; /* 画像 URL 指定 */
height: 200px; /* 画像の高さ(要調整) */
}

画像の色によって文字色が変更されるわけでないので、画像によっては「文字が読みにくく」なることはある。
その場合、ブログ名や「ブログ URL」の部分の色を変えるか、読みやすい位置に移動するといった対応をすることになる。
ブログ URLはシロ半透明の背景が付いている(画像が反映されればわかる)ので、ブログ名も同じ体裁にすることも可能。好き嫌いもあるので、好みに。

#blog-head a,
#blog-head a:active,
#blog-head a:visited{ /* ブログ名 */
text-decoration:none;
cursor: pointer;
color:#64553e; /* 文字色 */
text-shadow:0 1px 0 rgba(255,255,255,0.5); /* 文字の影(シロ半透明) */
}
#blog-head .blog-url a{ /* ブログ URL */
margin-left: 8px;
letter-spacing: 0.05em;
color:#64553e; /* 文字色 */
background: rgba(214, 212, 205, 0.4); /* 背景色(シロ半透明) */
text-shadow:0 1px 0 rgba(255,255,255,0.5); /* 文字の影(シロ半透明) */
}

下の画像は私のデスクトップでの操作。
画像サイズもヘッダーには重要で、幅 960px よりも大きいか、同じか小さいかによっても、多少の対応はできる。
Yahoo!知恵袋 3779日前
シェア
 
コメントする
 

参考になったと評価
  このQ&Aは参考になりましたか?

Share (facebook)
その他の解決方法を知っていますか?
回答する
全般
43
Views
質問者が納得「ブログ一番上のブログ名やブログURLが書いてある部分」、これを一般的に「ヘッダー」というが、ブログのデフォルトでは「画像ナシ」になっている。 それで自分で「追加」することが必要。 「カスタマイズ」の右端「CSS」の末尾に加えるのがベター。 デフォルトでは質問文のように「一行」で書いているが、改行して書いてもよい。 #blog-head { background:url(画像 URL) no-repeat center top; /* 画像 URL 指定 */ height: 200px; /* 画像の高さ...
3779日前view43
全般
92
Views
質問者が納得EPSON ホームページから Win8.1 正規対応最新ドライバーの ダウンロード・クリーンインストールは行いましたか?
3827日前view92
全般
113
Views
質問者が納得ダウンロードしたドライバをインストールする前に、プリンタをPCにつないだということはありませんか? もし、そういうことがあった場合は、すでにWindows7に添付されていた標準ドライバがインストールされてしまっている可能性があります。以下のペ-ジを参照して、対処してみてください。今回のトラブルと表示されている画面が違いますが、ひかかっている個所は同じように思います。 http://faq.epson.jp/faq/00/app/servlet/qadoc?QID=030333
3833日前view113
全般
91
Views
質問者が納得EPSON ホームページから Win7 Bit 対応専用ドライバーを、 ダウンロード後にクリーンインストールが必要です。
3858日前view91
全般
93
Views
質問者が納得原因は、プリンターメーカーの方法を守らなかったからでしょう。 ↓ http://faq.epson.jp/faq/00/app/servlet/qadoc?030394 プリンタードライバーのダウンロード/解凍/インストール方法 (抜粋) 3.ファイルの解凍・インストール方法 (1) 起動しているアプリケーションソフトがある場合は、すべて終了します。 プリンターの電源が「オフ」になっていることを確認して、<← これです> プリンターとコンピューターを接続します。 以降、指示画面が表示されるまでプリンターの...
3902日前view93

取扱説明書・マニュアル

1978view
http://dl.epson.jp/.../4114940_00.PDF
2 ページ0.68 MB
もっと見る

関連製品のQ&A