【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

• underline-fadetop underline-color-pink
• underline-fadebottom underline-color-pink
• underline-lefttoright underline-color-pink
• underline-righttoleft underline-color-pink
• underline-leftinright underline-color-pink
• underline-rightinleft underline-color-pink
• underline-center underline-color-pink

• underline-fadetop underline-color-yellow
• underline-fadebottom underline-color-yellow
• underline-lefttoright underline-color-yellow
• underline-righttoleft underline-color-yellow
• underline-leftinright underline-color-yellow
• underline-rightinleft underline-color-yellow
• underline-center underline-color-yellow

• underline-leftinright underline-height-1px
• underline-leftinright underline-height-2px
• underline-leftinright underline-height-3px
• underline-leftinright underline-height-4px
• underline-leftinright underline-height-5px
• underline-leftinright underline-height-6px
• underline-leftinright underline-height-7px
• underline-leftinright underline-height-8px

参考サイト: https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html

WEB会議システムのオープンソース Jitsi（ジッツィ）があります。

コミュニティーは無料で利用できます。
https://meet.jit.si/

さくらのクラウドでスタートアップスクリプトが用意されています。
https://cloud-news.sakura.ad.jp/2020/04/16/startup-script-jitsimeet/

導入過程：
https://qiita.com/mshigefuji/items/40672405733bb354bd44

https://qiita.com/zembutsu/items/a50c70ca17b501caf6c4

EPUBをWEBで表示するオープンソース Bibiがあります。
EPUB形式へは、MACのPagesなどでも書き出すことができます。

ダウンロード：
https://bibi.epub.link/

Bibiは特定のディレクトリに20弱のソースファイルをアップロードするだけで動くので、Weeblyでも動きます。

Copyrightの記述について、日本は万国著作権条約に加盟しているので本来記載不要ですが、今までの慣習からフッタにないと収まりが悪いかもしれません。 また、Copyrightと(c)は被っているので、(c)だけで大丈夫です。

All right reservedは古いブエノスアイレス条約で必要だったのが残っているだけで今では不要なので記載不要です。 年表記については、いつから、が必要なのですが、古い年号だけだとサイトが動いていないような印象を受けるので、2014-2020というように表記するのが無難でしょう。

現在の年号を毎年書き換えるのは面倒なのでjsで以下のように記述します。

<small>&copy; 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.

参考:
https://hajipion.com/2288.html

mojinavi
https://mojinavi.com/

検索性を追求した漢和辞典。 Unicodeに登録済みの6万文字の漢字から 使用頻度の高い6,654字

お名前ドットコムには、メールだけ使うお名前メールというサービスがあります。ホームページは別のサーバーでメールだけお名前ドットコムを利用する場合の設定方法をご紹介します。


ホスト名 TYPE TTL VALUE / MX優先 状態 削除
hogehoge.com NS 86400 01.dnsv.jp 有効
hogehoge.com NS 86400 02.dnsv.jp 有効
hogehoge.com NS 86400 03.dnsv.jp 有効
hogehoge.com NS 86400 04.dnsv.jp 有効
imap.hogehoge.com CNAME 3600 imap22.gmoserver.jp 有効
pop.hogehoge.com CNAME 3600 pop22.gmoserver.jp 有効
pop3.hogehoge.com CNAME 3600 pop22.gmoserver.jp 有効
smtp.hogehoge.com CNAME 3600 smtp22.gmoserver.jp 有効
hogehoge.com MX 3600 mx22.gmoserver.jp /10 有効
hogehoge.com TXT 3600 v=spf1 include:spf22.gmoserver.jp ~all 有効


hogehoge.com　は該当のドメイン名を入れてください。


ただ・・・

お名前ドットコムの、CNAMEはうまくうごいていない感じがします。

popは　pop22.gmoserver.jp
smtpは　smtp22.gmoserver.jp

これを直接記述した方が無難だと思います。
詳しい方、ご教示いただけると助かります。

WeeblyにUIkitを追加すると便利です。

お問い合わせフォームのhtmlをアスメルから取り出して貼り付ける際にcssを調整するのに便利です。

ダウンロード：
https://getuikit.com/


アセット　＋
uikit.css, uikit.js, uikit-icons.js
この３つのファイルをアップロードします。

テーマー＞カスタマイズー＞header.html

以下を追加します。

head 内に
<link rel="stylesheet" href="/files/theme/uikit.css" />

</body>の前に以下を追加します。

<script language="javascript" src="/files/theme/uikit.js"></script>
<script language="javascript" src="/files/theme/uikit-icons.js"></script>


header.htmlだけでなく、活用しているテンプレートすべてにこの修正を行います。

WordやEXCELをHTMLフォーマットにオンラインで変換するサイト

https://wordhtml.com

Windowsから MACにとうとう乗り換えました。

使ってみると、標準でOfficeが用意されていて便利だし、何といっても画面キャプチャー機能やその描画機能がとても良いです。
Devasや秀丸に対応するアプリが今のところないのですが、それはWindowsアプリを動かせるようにするEasyWineで解決するので問題ないですね。

以下、主なアプリです。

・FileZilla FTP, SSH
　クロスプラットフォーム
　オープンソース

・Resizedit.app　画像一括縮小　
　ディレクトリー構造ごと一括処理。
　最大ピクセル数指定可能
　無料

　画像一括縮小は、様々ありますが、Resizedit.app が最も使いやすいです。
　ただし現在のところmacOS Mohave ver 10.14.5では、画像書き出し先を指定すると何も書き出されないというバグがあります。

・Atom+less plugin　Less書き出し　
　Atomはテキストエディタとしてタブ機能があるので便利。
　プラグインで様々拡張可能。
　オープンソース

・EasyWine.app 　Windowsアプリを実行
　Windowsでしか動かないアプリDevasを動かす時だけ利用
　他、マクロを使いたいときだけ秀丸も。
　正規表現で階層ごとファイルを一括置換できるアプリはMacでは見当たらない。

・Illustrator　やはり定番。

・Safari IE検証
　マルチブラウザー機能が便利。
　参照　
　https://blanche-toile.com/web/multibrowser-check

・FireAlpaca.app 筆圧タブレットを使って描画も

・7zX.app 圧縮・解凍　オープンソース
・Alfred 検索
・CotEditor　正規表現での検索・置換ができるテキストエディタ

他　macOS標準機能が便利

・メモ.app iPhoneと同期して便利
・メッセージ　iPhoneと同期して便利
・Numbers.app EXCEL互換
・Pages.app Word互換　
・Keynote.app Powerpoint互換　プレゼンテーション
・プレビュー.app

画面キャプチャーはShift+Command+5
※保存した後のスクリーンショット機能での描画機能が秀逸


試したいもの
・VirtualBox


入力機器：Wacom 筆圧タブレット