TOPICS

- 2021-03-21
- Jitsi Meetのカスタマイズ
- 2020-12-25
- MailtoUI の日本語化
- 2020-07-25
- 【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方
- 2020-07-24
- リンクとアンダーライン
- 2020-07-19
- WEB会議システムのオープンソース Jitsi(ジッツィ)

ベランダでも使える!基材交換不要!静かで臭いの少ない家庭用生ごみ処理機バイオクリーン BS-02 好評販売中です。
ベランダでも使える!基材交換不要!静かで臭いの少ない家庭用生ごみ処理機バイオクリーン BS-02 好評販売中です。
メールへのリンクには、class="mailtoui" を追加します。
MailtoUIの日本語化は以下のようにオプションを追加します。
<a class="mailtoui" href="mailto:xxx@xxxx.com">お問い合わせ</a>
<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.3/dist/mailtoui-min.js" data-options='{ "title":"メールを開く方法を選んでください", "buttonText1": "Gmailをブラウザーで開く", "buttonText2": "Outlookをブラウザーで開く", "buttonText3": "Yahooをブラウザーで開く", "buttonText4": "デフォルトのメーラーで開く" , "buttonTextCopy": "コピー" }'></script>
【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方
参考サイト:
https://yuyauver98.me/scroll-visible-range-underline-animation/
Geeklogで活用するには以下のように自動タグで利用します。
html
<p>[text-scroll-underline:pink ピンクの事例]</p>
<p>[text-scroll-underline:yellow 黄色の事例]</p>
<p>[text-scroll-underline: ブルーの事例]</p>
css
.Text-Span {
position: relative;
z-index: 1;
}
.Text-Span:after {
content: '';
position: absolute;
left: 0;
bottom: 4px;
width: 0%;
height: 8px;
background: #dfdfff;
z-index: -1;
transition: all 0.8s;
}
.Text-Span.isActive:after {
width: 100%;
}
.Text-Span-pink:after {
background: #FFDFEF;
}
.Text-Span-yellow:after {
background: #ffffbc;
}
Javascript追加
$(window).on('scroll',function(){
$(".JS_ScrollAnimationItem").each(function(){
var position = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > position - windowHeight + 100 ){
$(this).addClass('isActive');
}
});
});
自動タグ:
text-scroll-underline
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>
自動タグ:[ a-blue:/ pink pink pink ]:
blue blue blue
自動タグ:[ a-pink:/ pink pink pink ]:
pink pink pink
自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
yellow yellow yellow
自動タグ
a-blue:
<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
a-pink:
<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
a-yellow:
<a href="#1" class="underline-leftinright underline-color-yellow underline-height-3px">#2</a>
cssの例: https://www.ivysoho.net/layout/modern_geek/css/underline.css
参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html
Copyrightの記述について、日本は万国著作権条約に加盟しているので本来記載不要ですが、今までの慣習からフッタにないと収まりが悪いかもしれません。 また、Copyrightと(c)は被っているので、(c)だけで大丈夫です。
All right reservedは古いブエノスアイレス条約で必要だったのが残っているだけで今では不要なので記載不要です。 年表記については、いつから、が必要なのですが、古い年号だけだとサイトが動いていないような印象を受けるので、2014-2020というように表記するのが無難でしょう。
現在の年号を毎年書き換えるのは面倒なのでjsで以下のように記述します。
<small>© 2014-<span id="thisYear"></span> xxx inc.</small>
<script type="text/javascript">
date = new Date();
thisYear = date.getFullYear();
document.getElementById("thisYear").innerHTML = thisYear;
</script>
実行した結果:
© 2014- xxx inc.