ねごとめも背景

ねごとめも

数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ


作成したプログラムは、こちらでも公開しています。
よかったら覗いてみてください。_( _´ω`)_
→ javascript,SVG で作成したプログラム置き場

テンプレート、画像ポップアップ機能強化-B ( wi-crimson-a )

画像ポップアップ機能強化-Aは、
こちら → テンプレート、画像ポップアップ機能強化-A ( wi-crimson-a )
ブログテンプレート、 wi-crimson-a の画像表示機能を少し調整しました。
記事に直接設置した img タグに data-link-url 属性設定で、
テキストクリック時の移動先が指定出来るようにしました。

例 : <img data-link-url="テキストクリック時の 移動先 URL">

設定しなかった場合は、テキストをクリックしても何も起きません。

あと、ページ読み込み時に、フェードインアニメーションを付けました。
このアニメーションが必要ない場合は、テンプレートの スタイルシート の body にある
下記の部分を削除してください。

wi-crimson-a のスタイルシート
/* ↓↓↓ ページ読み込み時のアニメーション 必要ない場合は削除 ↓↓↓ */
opacity:0;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease;
/* ↑↑↑ ページ読み込み時のアニメーション 必要ない場合は削除 ↑↑↑ */

リンク色の設定は、ヘッダー内スタイルシート下記の書き換えで指定できます。
<style type="text/css">
#imgArea a{
font-family:meiryo;
}
#imgArea a:link {
color:crimson;
text-decoration:underline;
}
#imgArea a:visited {
color:crimson;
text-decoration:underline;
}
#imgArea a:hover {
color:dodgerblue;
text-decoration:underline;
}
#imgArea a:active{
color:crimson;
text-decoration:underline;
}
</style>

画像ポップアップテスト-B ( a画像 )

画像ポップアップテスト-B ( b画像 )
(ง ˙ω˙)ว

2017/08/01 [09:03]

テンプレート、画像ポップアップ機能強化-A ( wi-crimson-a )

ブログテンプレート、 wi-crimson-a の画像表示機能を強化しました。
記事に直接 img タグを設置 ( a タグなどで囲まない img タグ記述 ) した
画像クリックで、ブラウザの表示域にフィットした画像を表示します。
画像の幅、高さが表示域より小さい場合は、拡大表示はしません。
フィットした画像表示後、右上にある、拡大ボタン?をクリックすると、
縮小していない画像をポップアップ表示します。
左右にあるボタンで画像の切り替え、
また、ポップアップ表示した画像の左側クリックで前の画像、右側で次の画像を表示します。
img タグに alt 属性がある場合は、その属性値を表示します。
alt 属性が無い場合は、記事のタイトルを表示します。

アニメーションは少なめで、ボタンをクリックすると、 カチャカチャ と画像が入れ替わります。_( _´ω`)_

画像ポップアップテスト-A ( a画像 )

画像ポップアップテスト-A ( b画像 )
2017/07/31 [03:13]

カウンター

プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。プログラム実行の前に必ずコードの確認をお願いします。

最新記事

カテゴリ

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -


PAGE TOP
広告: