①マウスオーバーで大きな画像に切り替える
手順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編集のｔａｂｌｅ．ｃｓｓで下の方に下記を追加
<!– ★テーブル用スタイルここから★ –>
<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( ,) | oneline | shorten(150,true) %>
</p>
<p class=”more”><a href=”<% permaLink %>”>≫続きを読む</a><br class=”FloatEnd” /></p>
<div class=”bottom”> </div>
</div>
<% /AQEntries %>
</div>
<!– ★エントリーリストここまで★ –>
を削除する。
⑤エントリーページの下は
<% entryList_n | tag_replace(h3,h4) %>
を削除する。
