ねごとめも背景

ねごとめも

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


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

テキストの後ろに罫線を書き出す (fc2 ブログ用テンプレート)

今、このブログに適用している fc2 ブログ用テンプレート [ wi-skyblue-c ]を、
申請中だったりします。

動作するのは、 chrome ブラウザだけですが、
文字の後ろに、ノートみたいに罫線を表示する機能(削除可)つけてみました。
罫線は、 canvas 要素に書き出しています。
フォントサイズ、行間の変更等は、出来ません

下のプログラムは、罫線書き出しテストです。
chrome ブラウザ以外では動作しません。。。ヽ(´ー`)ノ
2017/08/05 [09:24]

テンプレート、画像ポップアップ機能強化-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]

カウンター

プロフィール

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
広告: