ホームページ作成の裏技2

マウスオーバーで大きな画像に切り替える

手順1
HTML編集で<head>の上,
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
の下に

<script type=”text/javascript”>
function myChgPic(myPicURL){
     document.images[“myBigImage”].src = myPicURL;
}
</SCRIPT>

<head>

を追加する。

手順2
記事本文中に下記を追加する。


<table cellpadding=”1″ cellspacing=”0″ class=”syohin” style=”width:50%” align=”left”>
<tbody>
<tr>
<td  colspan=”4″align=”center”><img src=”<% pageDepth %>img/画像1.jpg” width=”300″ height=”300″ name=”myBigImage” alt=”” /></td>
</tr>
<tr>
<td>
<a href=”javascript:void(0)” onmouseover=”myChgPic( ‘<% pageDepth %>img/画像2.jpg’ )”>
<img src=”<% pageDepth %>img/画像(2).jpg” width=”75″ height=”75″ alt=”” /></a>
</td>
<td>
<a href=”javascript:void(0)”onmouseover=”myChgPic( ‘<% pageDepth %>img/画像3.jpg’ )”>
<img src=”<% pageDepth %>img/画像(3).jpg” width=”75″ height=”75″ alt=”” /></a>
</td>
<td>
<a href=”javascript:void(0)”onmouseover=”myChgPic( ‘<% pageDepth %>img/画像4.jpg’ )”>
<img src=”<% pageDepth %>img/画像(4).jpg” width=”75″ height=”75″ alt=”” /></a>
</td>
<td>
<a href=”javascript:void(0)”onmouseover=”myChgPic( ‘<% pageDepth %>img/画像5.jpg’ )”>
<img src=”<% pageDepth %>img/画像(5).jpg” width=”75″ height=”75″ alt=”” /></a>
</td>
</tr>
</tbody>
</table>

(1)~(4)は小さい画像。1~4は大きい画像。画像1は最初の大きい画像。

手順3

CSS編集のtable.cssで下の方に下記を追加


<!– ★テーブル用スタイルここから★ –>
<style type=”text/css”>
table.syohin{table-layout:fixed;border-collapse: collapse;}
table.syohin td{padding:1px;background-color:#FFFFFF;}
table.syohin,table.syohin td,table.syohin th{border:solid 0px #C0C0C0;}</style>
<!– ★テーブル用スタイルここまで★ –>

syohinは任意の名前。

もっと単純にマウスオーバーで画像を切り替える

手順1
記事中に下記を追加する

<img src=”<% pageDepth %>img/point1.gif” alt=”” onmouseover=”this.src='<% pageDepth %>img/point2.gif’;” onmouseout=”this.src='<% pageDepth %>img/point1.gif'” />

①も②もシングルコーテーションとダブルコーテーションと;に気をつける。

スマホではマウスオーバーは効かないので注意。

関係ないが

WordPressでHTMTをコピペする時は、ビジュアルモードで、入力する。

文字に色をつけたい時は、色を決めて<span style=”color: #002dc5;”></span>でかこむ。

 

カテゴリーページの下の記事一覧を消す

カテゴリーページのHTML編集で


<!– ★エントリーリストここから★ –>
<% categoryListTitle | tag_insert(h3) %>
<div id=”categorylist”>
<% AQEntries %>
<div class=”cbox”>
<h4><a href=”<% permaLink %>”><% pageTitle | shorten(40,true) %></a></h4>
<p class=”desc”>
<% pageThumbnail | addAtribute(align=”left”) | tag_insert(span class=”txt-img”) %>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(150,true) %>
</p>
<p class=”more”><a href=”<% permaLink %>”>≫続きを読む</a><br class=”FloatEnd” /></p>
<div class=”bottom”>&nbsp;</div>
</div>
<% /AQEntries %>
</div>
<!– ★エントリーリストここまで★ –>

を削除する。

エントリーページの下は
<% entryList_n | tag_replace(h3,h4) %>

を削除する。

コメントを残す




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください