Monday, November 29 2021 @ 10:50 PM JST
Zoomをオープンソースで実現するJitsi Meetをさくらのクラウドのインストールスクリプトでインストールした場合のカスタマイズについての覚書です。
メールへのリンクには、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>
.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;
}
$(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');
}
});
});
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>自動タグ:[ a-blue:/ pink pink pink ]:
[a-blue:https://www.papalagi.co.jp/ blue blue blue]
自動タグ:[ a-pink:/ pink pink pink ]:
[a-pink:/ pink pink pink]
自動タグ:[ a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow ]:
[a-yellow:https://www.papalagi.co.jp/ yellow yellow yellow]
自動タグ
a-blue:
<a href="#1" class="underline-leftinright underline-height-3px">#2</a>
<a href="#1" class="underline-leftinright underline-color-pink underline-height-3px">#2</a>
<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
WEB会議システムのオープンソース Jitsi（ジッツィ）があります。
EPUBをWEBで表示するオープンソース Bibiがあります。
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.
お名前ドットコムには、メールだけ使うお名前メールというサービスがあります。ホームページは別のサーバーでメールだけお名前ドットコムを利用する場合の設定方法をご紹介します。
WeeblyにUIkitを追加すると便利です。Welcome to Geeklog!
If you're already familiar with Geeklog - and especially if you're not: There have been many improvements to Geeklog since earlier versions that you might want to read up on. Please read the release notes. If you need help, please see the support options.