ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

seesaa blog な集まりコミュのカスタマイズについて2

  • mixiチェック
  • このエントリーをはてなブックマークに追加
前回の質問
の即答ありがとうございました。

詳しい方がいらっしゃるようなので
失礼ながら2度目の質問させて
頂きます。

現在カスタマイズ途中の
私のブログは
http://shiromasuyama.seesaa.net/
ですが

カスタマイズして配置した画像
http://shiromasuyama.seesaa.net/image/headeredit.gif

のちょうど
「www.shiromasuyama.net」の画像文字のところだけ
イメージマップでリンクを貼って

http://www.shiromasuyama.net

に飛ぶようにしたいのですが、
やり方がわかりません。

あと
リンクカラー
訪問済みリンクカラー
アクティブリンクカラー等
を変更したいのですが
どうすればいいかわかりません。
もしわかる方がいらっしゃったら
教えて頂けたら幸いです。
質問ばかりで本当に
どうもすみません。


以下、私の
スタイルシートです。

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
background-color:#A9A9A9;
text-align:center;
}
#container{
margin:0px auto 0px auto;
width:777px;
background-image:url(http://blog.seesaa.jp/img/bg/looseleaf/container_bg.gif);
background-repeat:repeat-y;
}
a{
text-decoration: underline;
color:#0403FE;
}

#banner{
font-family:arial, Helvetica;
margin:0px;
padding:0px 30px 10px 40px;
text-align:left;
background-image:url(http://shiromasuyama.seesaa.net/image/headeredit.gif);
background-repeat:no-repeat;
height:110px;
}
h1 {
margin:0px;
padding-top:40px;
padding-bottom:20px;
font-weight:bolder;
font-size:24px;
}

h1 a{
color:#999999;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}

h2 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
margin-bottom:0px;
}

h3 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
margin-top:0px;
border-bottom:1px solid #999999;
padding-left:10px;
margin-bottom:10px;
}

h3 a{
padding: 0px;
font-weight:bolder;
}

.description {
color:#999999;
margin:0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}

.navi {
color:#999999;
font-size:12px;
text-align:center;
margin-bottom:10px;
}
#content {
margin-top:0px;
margin-bottom:30px;
float:left;
width:514px;
color:#999999;
text-align:left;
}

.blog {
margin-bottom:10px;
padding-left:10px;
}

.blogbody {
color: #999999;
}

.date{
font-size: 12px;
color:#999999;
padding-bottom:10px;
padding-left:10px;
font-weight:bolder;
}

.title{
font-weight:bolder;
}
.title a{
font-size: 12px;
font-weight:bolder;
color:#999999;
border:none;
text-decoration: none;
}

.text{
font-size: 12px;
color: #999999;
padding:0px 10px 10px 10px;
}
.posted{
font-size: 10px;
color: #999999;
padding:5px 10px 20px 10px;
text-align:right;
}
#links-left {
font-weight:normal;
width:233px;
float:left;
margin-top:0px;
text-align:left;
}
#links {
}
#calendar {
font-weight:normal;
margin-bottom:10px;
padding-left:40px;
width:180px;
}
#calendar table {
width:180px;
}
#calendar th {
color:#FFF ;
background-color:#999999;
text-align:center;
}
.calendarhead {
color:#999999;
font-size:12px;
font-weight:bolder;
padding:0px 10px 0px 10px;
margin-top:0px;
text-align:left;
}
.calendarday {
font-size:12px;
font-weight:normal;
color: #999999;
padding:4px 0px 4px 0px ;
text-align:center;
}
.sidetitle {
color:#999999;
font-size:12px;
font-weight:bolder;
padding:0px 10px 0px 40px;
margin-top:0px;
}
.side {
color:#999999;
font-size:12px;
font-weight:normal;
line-height:140%;
padding:3px 5px 3px 40px;
margin-bottom:10px;
}
.powered {
line-height:120%;
padding-top:10px;
text-align:right;
margin-right:5px;
text-align:right;
}
.syndicate {
font-size:10px;
padding-top:10px;
text-align:center;
}

#comments {
color:#999999;
margin-top:10px;
}
#comments form{
color:#999999;
margin-top:0px;
padding-left:20px;
padding-right:10px;
max-width:200px;
}
.comments-head{
color:#999999;
font-weight:bolder;
padding:15px 5px 7px 10px;
font-size: 12px;
padding-left:10px;
padding-right:10px;
}
.comments-body {
font-size: 12px;
color: #999999;
padding-left:10px;
padding-right:10px;
margin-bottom:10px;
}
.comments-post{
font-size: 10px;
color: #999999;
text-align:right;
padding:20px 10px 20px 0px;
}
#trackback {
font-size: 12px;
color: #999999;
padding:7px 5px 7px 5px;
border:1px solid #666;
margin-bottom:10px;
margin-top:10px;
}
#footer{
clear:left;
text-align:right;
margin-bottom:0px;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
.diet-content{
padding-left:10px;font-size:12px;
}
#diet-foods{
padding-left:10px;font-size:12px;
}
.food-title{
width:20%;
clear:left;
float:left;
}
.food-content{
width:75%;
padding-top:10px;
}
#diet-container{
border:1px solid #999;
padding:5px;
margin-bottom:5px;
}
.diet-title{
background-color:#333333;
padding:2px 10px 2px 5px;
font-size:12px;
color:#FFFFFF;
background-image:url(http://blog.seesaa.jp/img/diet/right_bt.gif);
background-position:right;
background-repeat:no-repeat;
width:90px;
margin-top:5px;
}
.diet-content{
padding-left:10px;font-size:12px;
}
#diet-foods{
padding-left:10px;font-size:12px;
}
.food-title{
width:20%;
clear:left;
float:left;
}
.food-content{
width:75%;
padding-top:10px;
}

コメント(3)

下のようなものを自由形式で
ヘッダのコンテンツとして貼り付ければ、
イメージマップの方はできるんじゃないかなぁーと思います。

<div id="user_banner_map_area">
<map name="user_banner_map">
<area shape="rect" coords="44,56,433,71" href="http://www.shiromasuyama.net/" alt="www.shiromasuyama.netへのリンク">
</map>
<img src="http://shiromasuyama.seesaa.net/image/headeredit.gif" usemap="#user_banner_map" border="0" height="110px" title="ロゴ画像です。"/>
</div>

で、CSSには、下を追加して、
#user_banner_map_area {
margin: 0px;
padding: 0px;
}

今まで、ロゴ画像の表示に使用していた
#bannerのCSS定義を
(邪魔になるから)下のように変更する。

#banner{
font-family:arial, Helvetica;
margin:0px;
padding:0px; ←ここ変えた。
text-align:left;
/*background-image:url(http://shiromasuyama.seesaa.net/image/headeredit.gif);*/ ←ここ消した。
background-repeat:no-repeat;
height:110px;
}


貼り付けたHTMLの
 coords="44,56,433,71"
の部分で、リンクの範囲を定義しています。

ローカルでのテストと、
私のブログで試した結果はうまくいきましたが、
貴方のブログでもうまくいくかどうかはわかりません。


参考になりそうなリンク先
http://allabout.co.jp/computer/hpcreate/closeup/CU20040425A/
こみさん
どうもありがとうございました。
見て頂ければわかると思いますが
おかげ様で無事成功しました。
本当に本当に感謝感激です。
mixiには凄い人が
大勢いめのでただただ驚いております。

あともう一つだけ
リンクカラー
訪問済みリンクカラー
アクティブリンクカラー等
も変更し方わかる方いらっしゃったら
誰か教えて頂けないでしょうか
どうもすみませんです。
ちなみにワタクシの場合。
ベースは「ホワイト」です。

.text{
font-size:10px;
color: #000066;
padding-left:10px;
padding-top:5px;
padding-right:15px;
margin-top:5px;
}

.text a{
color:RED;
}



---------------

で、以前使っていたBLOG(Livedoor)のCSS


a{color:#666666;text-decoration:underline;}
a:link{color:#666666;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#000066;text-decoration:none;}

-------------------

あまり、参考にはなりませんね。(笑
上と下のCSSを、上手に組み合わせればナントカなるのでは?

悪戦苦闘して、ガンバッて下さい!

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

seesaa blog な集まり 更新情報

seesaa blog な集まりのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング