Page: 2/8  << >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | - | pookmark |
アーカイブをプルダウン形式にする
<SELECT>タグ、<OPTION>タグを利用することで月別アーカイブなどをプルダウン形式に変更できます。



<!-- BEGIN archives -->
<form action="#" class="archiveslist">
<select onchange="location.href=value;">
<option value=" " selected="selected">ARCHIVES</option>
<!-- BEGIN archives_items -->
<option value="./?month={archives_item_id}" >{archives_item_eng}({archives_item_num})</option>
<!-- END archives_items -->
</select>
</form>
<!-- END archives -->

※この他にもjavascript使用してプルダウン形式にする方法もあります。
参考:公式テンプレート COOL



| pika | - | - | pookmark |
外部からの閲覧者にメッセージを出すことでEnterページとして代用する
外部リンクから来た閲覧者にメッセージを出すことで、Enterページ(ウェルカムページ・スプラッシュページ)として代用させようというカスタマイズ。
※Enterページについては、「stella_top_none」のカスタマイズ例でも紹介しています。

テンプレートの<head> 〜 </head>内に下記スクリプトを設置する。
<script language="JavaScript">
<!--
if(document.referrer.indexOf("http://einmeteor.jugem.jp/")!=-1){
document.write("☆内部リンクから来た人用メッセージ");
}else{
document.write("<div style='margin:200px;'>★外部リンクから来た人用メッセージ1行目<br>");
document.write("★外部リンクから来た人用メッセージ2行目</div>");
}
// -->
</script>
<noscript>
<div style='margin:200px;'>★外部リンクから来た人用メッセージ(スクリプトオフの方は毎回表示されます。</div>
</noscript>
赤字部分はご自身のブログURLに変更してください。)

行数を加えたい場合は下記を追記しましょう。
document.write("メッセージ<br>");

<script language="JavaScript">
<!--
if(document.referrer.indexOf("http://einmeteor.jugem.jp/")!=-1){
document.write("☆内部リンクから来た人用メッセージ");
}else{
document.write("<div style='margin:200px;'>メッセージ1行目<br>");
document.write("メッセージ2行目<br>");
document.write("メッセージ3行目<br>");

document.write("メッセージ4行目</div>");
}
// -->
</script>
<div style='margin:200px;'> 〜 </div>
※メッセージ部分は上記のブロック要素で構成されています。スペルの間違い、タグの閉じ忘れには注意するようにしましょう。



[参考画像]

外部リンクから来た閲覧者に対して表示されるメッセージ
(クリックで拡大されます。)

内部リンクで表示されるメッセージ
(クリックで拡大されます。)



[カスタマイズ編]

赤字部分のスタイルタグを変更することで、様々な指定が可能です。
<script language="JavaScript">
<!--
if(document.referrer.indexOf("http://einmeteor.jugem.jp/")!=-1){
document.write("☆内部リンクから来た人用メッセージ");
}else{
document.write("<div style='margin:200px;'>★外部リンクから来た人用メッセージ1行目<br>");
document.write("★外部リンクから来た人用メッセージ2行目</div>");
}

// -->
</script>


[カスタマイズ例]
・文字サイズを15pxの太字にする。
・上下左右のマージンをそれぞれ10px,150px,450px,150pxで指定。



document.write("<div style='margin:10px 150px 450px 150px; font-size:15px; font-weight:bold; '>★外部リンクから来た人用メッセージ1行目<br /></div>");
}



[カスタマイズ例]
・背景画像(http://img-cdn.jg.jugem.jp/05a/764399/20080908_446255.jpg))を指定する。
・幅、高さをそれぞれ95%,500pxで指定。
・文字の色を変更する。
・上下左右のマージンを10px,10px,25px,25pxで指定。


document.write("<div style='margin:10px 25px; font-size:10px; color:white; background-image: url(http://img-cdn.jg.jugem.jp/05a/764399/20080908_446255.jpg); width:95%; height:500px;'>★外部リンクから来た人用メッセージ1行目<br>");
document.write("★外部リンクから来た人用メッセージ2-1行目<br>");
document.write("★外部リンクから来た人用メッセージ2行目</div>");
}

参考:外部リンクから来た閲覧者には、メッセージを出す(ブログで小説!)



| pika | - | - | pookmark |
画像の回り込みを指定する
・CSSで一括して指定する。
img{float: left;}
img{float: right;}



・個別に指定する
<img src="http://img-cdn.jg.jugem.jp/05a/764399/20080908_446255.jpg" width="120" height="120" alt="" class="pict" align="right"/>エントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテスト...(以下省略)
※HTML4.01では、align属性は非推奨属性となります。

エントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテスト



<img src="http://img-cdn.jg.jugem.jp/05a/764399/20080908_446255.jpg" width="120" height="120" alt="" class="pict" style="float:left;"/>エントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテスト...(以下省略)

エントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテストエントリーのテスト



| pika | - | - | pookmark |
画像のズーム機能(stella_shop)
stella_shop」に施しているAmazon画像拡大のカスタマイズメモ。

<!-- BEGIN amazon -->
<div id="my_amazon_card">

<a href="{amazon_url}" target="_blank">

<img border="0" src="{amazon_ImageUrlMedium}" alt="{amazon_ProductName}" class="small_pic" width="95px" height="110px" />

<img border="0" src="{amazon_ImageUrlLarge}" alt="{amazon_ProductName}" class="large_pic" width="150px" height="185px" />

</a>

</div>
<!-- END amazon -->

/*画像の拡大表示*/
#my_amazon_card a:link img.large_pic { display:none; border-style:none;}
#my_amazon_card a:visited img.large_pic { display:none; border-style:none;}
#my_amazon_card a:active img.large_pic { display:none; border-style:none;}
#my_amazon_card img.large_pic { display:none; border-style:none;}
#my_amazon_card a:hover{background-color:transparent;}
#my_amazon_card a:hover img.large_pic{
border: 2px solid #dadada;
display:block;
}
#my_amazon_card a:link img.small_pic{ border-style:none; display:block;}
#my_amazon_card a:visited img.small_pic { border-style:none; display:block;}
#my_amazon_card a:active img.small_pic { border-style:none; display:block;}
#my_amazon_card a:focus img.large_pic { border-style:none; display:block;}
#my_amazon_card a:hover img.small_pic {
border-style:none;
display:none;
}
.amazon_text {display:none;}



| pika | - | - | pookmark |
stella_sky
夏なのでそれっぽいテンプレートを作ってみました。

※画像指定部分はコチラ
body {
width: 95%;
color: #333333;
font-size: 80.5%;
font-family:"Verdana", "Impact", "¥FF2D¥FF33¥20¥FF30¥30B4¥30B7¥30C3¥30AF", "Hiragino Kaku Gothic Pro", "¥30D2¥30E9¥30AE¥30CE¥20Pro¥20W3", "Osaka";
background: url("http://img-cdn.jg.jugem.jp/05a/764399/20080711_329332.jpg") ;
background-repeat: no-repeat;
background-attachment: fixed;
}



サンプルを見る

ダウンロードページ | 利用規約/使用上の注意

※不具合を発見された方は、お手数ですが管理人までご連絡お願い致します。
| pika | - | - | pookmark |