Website編集小技の覚書き　その1【No.1~No.5】

ﾈｯﾄ上の真似事ですが

【まとめ目次　その1】

【No. 1】"CSS"でｳｪﾌﾞﾍﾟｰｼﾞのﾄｯﾌﾟへ画像を貼る
【No. 2】MovableTypeのﾃｰﾏ一覧にｻﾑﾈｲﾙを貼る
【No. 3】ﾌﾞﾛｸﾞ記事に＜＜前の記事｜次の記事＞＞を付ける
【No. 4】ｻﾑﾈｲﾙをﾏｳｽｵｰﾊﾞｰで拡大表示（絶対中央配置）
【No. 5】ﾌﾞﾗｳｻﾞｷｬｯｼｭの強制読み込み

【No.1】"CSS"でｳｪﾌﾞﾍﾟｰｼﾞのﾄｯﾌﾟへ画像を貼る　

【CSSﾌｧｲﾙのid修正】

#homepage-image {
    width: 1007px;
    height: 288px;
    background: url(homepage-image.jpg) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0 0 25px 0;
}

#homepage-image_bbd {
    width: 1007px;
    height: 150px;
    background: url(homepage-image_bbd.jpg) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0 0 25px 0;
}

#homepage-image_cms {
    width: 1007px;
    height: 150px;
    background: url(homepage-image_cms.jpg) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0 0 25px 0;
}

　複数のｳｪﾌﾞﾍﾟｰｼﾞのﾄｯﾌﾟ画像を差し替えたい場合、ﾒｲﾝﾍﾟｰｼﾞ（index.html）をいちいち修正するのは面倒です。
　CSSにidを記述しておけば、CSSﾌｧｲﾙの書き換えだけで複数のｳｪﾌﾞﾍﾟｰｼﾞの画像が差し替えることができ便利です。

　ただし、"background: url(画像)"で指す「url」は、ﾄﾞﾒｲﾝではなく、「/CSSﾌｧｲﾙからの相対位置」となります。
　この例の場合、CSSﾌｧｲﾙと画像ﾌｧｲﾙは同じﾌｫﾙﾀﾞ内にuploadします。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.2】MovableTypeのﾃｰﾏ一覧にｻﾑﾈｲﾙを貼る　

【theme.yamlﾌｧｲﾙに追加記述】

thumbnail_file: thumb.png
thumbnail_file_medium: thumb-medium.png
thumbnail_file_small: thumb-small.png

　
　このﾌﾞﾛｸﾞはMovableType標準のﾃﾝﾌﾟﾚｰﾄをｶｽﾀﾏｲｽﾞし、新しいﾃｰﾏとして保存しています。
　しかし管理画面でﾃｰﾏ一覧を見たときに、追加したﾃｰﾏにはｻﾑﾈｲﾙがありません。

　ということで、ﾃｰﾏ一覧画面でｻﾑﾈｲﾙ画像を表示させるための設定です。
　作成したﾃｰﾏのﾌｫﾙﾀﾞに画像を配置し、同ﾌｫﾙﾀﾞ内のtheme.yamlで画像ﾌｧｲﾙを指定します。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.3】ﾌﾞﾛｸﾞ記事に＜＜前の記事｜次の記事＞＞を付ける　

【ﾌﾞﾛｸﾞ記事の詳細ﾃﾝﾌﾟﾚｰﾄに追加記述】

<div class="prev-next-link">
<MTEntryPrevious>
<a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>">前の記事</a>
</MTEntryPrevious>
<MTEntryNext>
｜<a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>">次の記事</a>
</MTEntryNext>
</div>

【CSSﾌｧｲﾙに新規id記述】

.prev-next-link {
	font-size: small;
	text-align: right;
}

　MovableTypeﾃﾞﾌｫﾙﾄでは、前の記事｜次の記事へのﾘﾝｸがないので、ﾌﾞﾛｸﾞ記事の詳細ﾃﾝﾌﾟﾚｰﾄにｺｰﾄﾞを追加します。
　記事のﾀｲﾄﾙをﾘﾝｸ文字列にしてしまうと長いので、ﾏｳｽｶｰｿﾙをあてたときに表示されるﾎﾟｯﾌﾟｱｯﾌﾟに記事のﾀｲﾄﾙが表示されます。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.4】ｻﾑﾈｲﾙをﾏｳｽｵｰﾊﾞｰで拡大表示（絶対中央配置）　

【記事にhtml追加】

<div id-"message">These are part of photo library.</div>
<div id="zoom">
 <table>
  <tr>
   <td class="zoomup"><img src="image/photo_01.jpg"></td>
   <td class="zoomup"><img src="image/photo_02.jpg"></td>
   <td class="zoomup"><img src="image/photo_03.jpg"></td>
   <td class="zoomup"><img src="image/photo_04.jpg"></td>
   <td class="zoomup"><img src="image/photo_05.jpg"></td>
   <td class="zoomup"><img src="image/photo_06.jpg"></td>
   <td class="zoomup"><img src="image/photo_07.jpg"></td>
   <td class="zoomup"><img src="image/photo_08.jpg"></td>
   <td class="zoomup"><img src="image/photo_09.jpg"></td>
   <td class="zoomup"><img src="image/photo_10.jpg"></td>
   <td class="zoomup"><img src="image/photo_11.jpg"></td>
   <td class="zoomup"><img src="image/photo_12.jpg"></td>
   </tr>
 </table>
<div id="message">Please place the mouse cursor over the thumbnail.</div>
<div><img style="width:790px" src="image/start.jpg"></div>
</div>

【CSSに新規id/class記述】

/*サムネイルをマウスオーバーで拡大表示*/
/*全体のコンテナー*/
#zoom {
    position: relative;
	max-width: 790px;
	margin: 0;
	border:inset 5px #f5f5f5;
}
#zoom table {
    border: none;
	width: 698px;
	table-layout: fixed;
}
/*サムネイルを横に表示*/
.zoomup img{
	width: 50px;
    height: 32px;
}
.zoomup table,td,tr {
	border: none;
}
/*ポップアップ拡大表示＆絶対中央表示*/
.zoomup:hover {
    border: none;
    cursor: pointer;
}
.zoomup:hover img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
	width: 640px;
    height: 424px;
	border: solid 10px #00ffff;
	cursor: pointer;
}

　
　前の記事『QRZ.com My Page ver2【ｻﾑﾈｲﾙ画像をﾏｳｽｵｰﾊﾞｰで拡大表示】』で紹介したものの｛htmlとCSS｝のsourceです。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.5】ﾌﾞﾗｳｻﾞｷｬｯｼｭの強制読み込み　

　年老いた田舎のﾗｼﾞｵ少年がhtmlやCSSｺｰﾄﾞをいじくるのは大変です。
　こんな時に便利なのが「Google Chromeﾃﾞﾍﾞﾛｯﾊﾟﾂｰﾙ（検証ﾓｰﾄﾞ）」で、疑似的に変更を表示しながら試行錯誤します。

　動作が確認できたところで、正式にﾃﾝﾌﾟﾚｰﾄやCSSを書き換えます。
　ところが記事を更新してもﾌﾞﾗｳｻﾞ画面が変わっていません。

　さらに通常の再読み込み（F5更新）をしてみても前のままです。
　ｺｰﾄﾞ記述がおかしいのではと思いながら、別のﾌﾞﾗｳｻﾞで見てみるとｶｽﾀﾏｲｽﾞしたﾍﾟｰｼﾞにちゃんと変わっています。（うん？）

　いろいろ調べてみると「Google Chrome」のｷｬｯｼｭが強すぎるようで、ちょっとした変更の場合ﾌﾞﾗｳｻﾞが更新されないようです。

　こんなときに行うのが「ﾊｰﾄﾞ再読み込み」。
　　　ﾍﾟｰｼﾞ内で右ｸﾘｯｸ　⇒　「検証」をｸﾘｯｸ
　　　ﾌﾞﾗｳｻﾞ左端の「再読込ｱｲｺﾝ」を長押しｸﾘｯｸ　⇒　「ﾊｰﾄﾞ再読み込み」をｸﾘｯｸ

　強制的にﾌﾞﾗｳｻﾞｷｬｯｼｭが更新され、変更したﾍﾟｰｼﾞが表示されました。

Website編集小技の覚書き　その1【No.1~No.5】

カテゴリ:

コメント(1)

コメントする

カテゴリ

最近のコメント

Website編集小技の覚書き その1【No.1~No.5】

カテゴリ:

コメント(1)

コメントする

カテゴリ

最近のコメント

Website編集小技の覚書き　その1【No.1~No.5】