画像リンクの設定

Type-1 White の設定を使用してざっくり解説します。

画像リンクを表示させるために必要なソースは以下の通りです。
スタイルシート(<style>〜</style>に挟まれた部分) <div id="SideBar"> 内
.SideBarItem {
float: left;
width: 100%;
padding: 0px 0px 10px 0px;
text-align: center;
}

.SideBarItem .SideBarItemTitleLink {
float: left;
width: 100%;
height: 40px;
background-image: url('$user.image006');
background-position: center -40px;
background-repeat: no-repeat;
}

.SideBarItem .MyLinkBanner {
display: block;
float: left;
width: 250px;
height: 40px;
padding: 0px 25px 0px 25px;
cursor: pointer;
font-size: 16px;
line-height: 30px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-decoration: underline;
background-repeat: no-repeat;
}
<!-- リンク -->
<!--
<div class="SideBarItem">
<div class="SideBarItemTitleLink"></div>
<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url
('$user.image010'); background-position: center 0px;"></div>
<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url
('$user.image010'); background-position: center -40px;"></div>
<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url
('$user.image010'); background-position: center -80px;"></div>
</div>
 -->
<!-- リンク -->


赤字の部分を消すと画像リンクが表示されます。




スタイルシートの解説
.SideBarItem {
float: left;
width: 100%;
padding: 0px 0px 10px 0px;
text-align: center;
}
サイドバーに表示されるプロフィール画像やカテゴリー一覧等の位置の設定です。
.SideBarItem .SideBarItemTitleLink {
float: left;
width: 100%;
height: 40px;
background-image: url('$user.image006');
background-position: center -40px;
background-repeat: no-repeat;
}
リンクの上にあるタイトルの部分です。

profileの画像とセットになっていますので、変更する場合はご注意ください。

削除する場合はこの部分と、
<div class="SideBarItemTitleLink"></div> を削除してください。
.SideBarItem .MyLinkBanner {
display: block;
float: left;
width: 250px;
height: 40px;
padding: 0px 25px 0px 25px;
cursor: pointer;
font-size: 16px;
line-height: 30px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-decoration: underline;
background-repeat: no-repeat;
}
リンクの部分です。

<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
とあわせることで、リンクが表示されます。

Link1〜3は一枚の画像で出来ているので、リンクを増やしたい場合は、赤字の部分を変更します。


<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>

スタイルシートの height: 40px;
にあわせて、0、-40、-80、-120、-160・・・と増やします。
リンクを3つ以上にする場合は、画像パーツの編集で「$user.image010」のサイズを変更する事もお忘れなく。




応用

幅40、高さ200の画像リンク使用してを、横並びのリンクにする。

スタイルシート <div id="SideBar"> 内
.SideBarItem .MyLinkBanner {
display: block;
float: left;
width: 40px;
height: 40px;
padding: 0px 10px 0px 10px;
cursor: pointer;
font-size: 16px;
line-height: 30px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-decoration: underline;
background-repeat: no-repeat;
}

<!-- リンク -->

<div class="SideBarItem">
<div class="SideBarItemTitleLink"></div>
<a class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center 0px;"></a>
<a class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center -40px;"></a>
<a class="MyLinkBanner" title="リンク3" oonclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center -80px;"></a>
<a class="MyLinkBanner" title="リンク4" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center -120px;"></a>
<a class="MyLinkBanner" title="リンク5" onclick="CheckLink('http://tegaki.pipa.jp/')" 
style="backGround-image: url('$user.image010'); background-position: center -160px;"></a>
</div>

<!-- リンク -->

padding: 0px 10px 0px 10px;は上、右、下、左の幅を変更します。
padding: 0; にすることで上下左右がぴったりくっつきます。

この色の部分は画像リンクの場合必要がない(多分)ので、削除してしまっても大丈夫だと思います。
マウスを乗せると表示される文字リンク先のアドレスは各自で変更してください。



画像をアップロードする場合は、
画像パーツの編集から、該当するファイル名(リンクの場合は$user.image010)を選択して、
キャンパスの右下にあるファイルマークをクリックします