Posts

Showing posts from September, 2023

レスポンシブで重複するプロパティを一括削除してくれる君

Image
レスポンシブで重複するプロパティを一括削除しれくれる君 ※処理後、クリップボードにコピーされます。

トップへ戻るボタン | Java Script | CSS |

東京青年 片岡義男 名前は仮にスーザン 1  ヨシオは私立の高校に通う三年生だ。彼のいるクラスの人数は男女十二名ずつで、合計二十四名だ。十二名の女性のなかに美人がふたりいる。特別の教科以外はいつもおなじ教室だ。その教室の、右端の列の前から三番めの席に美人がひとりいる。もうひとりは、中央からひとつだけ左に寄った席の、うしろからふたつめの席にすわっている。  本来ならヨシオの席はいちばん窓側のうしろから二番めだ。彼は右隣りの人と席を代わってもらった。だから彼の席は美人の左隣りだ。授業中、ふと、彼はその美人を見る。頭のかたちのいい、したがって彫りの効いた、すっきりとまとまった横顔をしている彼女は、端正な雰囲気の常にある理知的な美人だ。冷たい、と多くの人は彼女を評した。しかし、印象は冷たくても美人であることになんら変わりはなかった。身のこなしは常に静かで、 凛 ( りん ) とした声でよく質問した。  自分は美人が好きだということを、ヨシオはよく自覚していた。ごく幼い頃からそうだったと両親から聞かされていたし、彼自身で記憶している幼児体験のなかには、美人が大きな場所を占めていた。まだ小学校に入る前、幼いヨシオはひとりで駅まで歩いていき、改札口の前に立ち、出入りする人を観察する。美人がとおりかかるとヨシオは彼女に歩み寄り、「お姉さんどこへいくの?」と、彼女を見上げて聞く。「お家へ帰るのよ」とその女性が答えると、「僕もいく」とヨシオは言い、彼女についていく。当時のヨシオはまだたいへんに可愛く、連れていかれたまま夜になっても帰って来ないということが何度もあった。自宅を訪ねて来た人が美人だと、その人が帰るとき、「僕も帰る」と言い張るのがヨシオの常だった。  クラスにいる十二名の女性のうち、ふたりが美人。まあいいか、というのがヨシオの結論だ。授業はつまらなかった。おそらく誰にとってもそうだろう。つまらないなあと思うとき、彼は右隣りの美人、日比谷優子を見る。なぜだか理由はわからないが、気持ちを集中させ、たいへん熱心に優子は先生の語ることを聞いている。不思議だ、とヨシオは思う。この若い美人はいまいったいなにを思っているのか。まったく見当もつかないところが不思議、つまりヨシオにとっては面白いのであり、だから彼は近い距離から彼女をときどき見るだけで充分に満

下に押し込まれるボタンのデザイン

Image
7-1-15 下に押し込まれる(立体が平面に)

よく使うイメージ画像(Bloggerは、webpをアップロードできます。avifは不可。)

Image

私のお気に入り とってもかわいいmonacoocさんのイラスト

Image
All Photos by monacooc

BloggerでMarkdown記法を利用するには

Image
<!-- ここに Markdown 記法で記述するとプレビュー時に変換される --> <img src="https://www.notion.so/images/page-cover/met_terracotta_funerary_plaque.jpg" referrerpolicy="same-origin" style="display: block; object-fit: cover; border-radius: 0px; width: 100%; height: 30vh; opacity: 1; object-position: center 10%;" /> ### Markdown記法<i class="fa-brands fa-markdown fa-flip"></i>をBlogger<i class="fa-brands fa-blogger fa-bounce" style="color: #f57c00;"></i>で利用する手順 <i class="fas fa-tag"></i>BloggerでMarkdown記法を利用するためのステップを詳しく説明します。 **ステップ 1: テーマのカスタマイズ** 1. Bloggerの管理画面にログインし、ダッシュボードにアクセスします。 2. 左側のメニューから「テーマ」を選択します。 **ステップ 2: HTMLを編集** 3. テーマページにアクセスしたら、テーマのカスタマイズを開始します。画面上部に「カスタマイズ」ボタンがあるかもしれませんので、それをクリックしてください。 4. カスタマイズ画面で、右上にある歯車アイコンをクリックし、「HTMLを編集」を選択します。 **ステップ 3: Markdown対応コードの追加** 5. HTML編集画面が開いたら、</body>タグの直前に以下のコードを追加します。 <div class="code-box"> <

IFrame Player API - enablejsapi=1 | YouTube [ Implement unique thumbnails and play buttons on embedded videos using YouTube Player API ]

Image

音に合わせたアニメーション

Image
Your browser does not support the audio element.

Youtube IFrame Embed - Full Custom ver.2 (API)

Image
YouTube Player Load Video Video Size: Width: Height: Apply Size

外部HTMLファイル読み込み | Java Script

Image
外部HTMLファイル読み込み | Java Script 外部HTMLファイル読み込みのスクリプトコード 外部HTMLファイル読み込み
Image
WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。 YouTube [f:id:fobitows:20230907193357g:plain] KAORUKO 動画を確認しながら調整できます。 SAKURAKO ブログやサイトに埋め込む際のカスタマイズにどうぞ~ [demo tool ver.1 ](https://naga-cafe.blogspot.com/2023/09/youtube-embed-toggle-rel-rel-1-no.html) ## ツールの解説 1. YouTube Video ID: https://youtu.be/ *_0yTPCYHGHg* YouTubeアドレスのこの部分 2. Load Video クリックでプレイヤーを生成 3. 埋め込みするプレイヤーの幅と高さをピクセルで指定 Video Size: Width : + - Height: + - 4. パラメータを指定 Video Parameters: rel fs modestbranding controls rel : チェックなしで関連動画非表示。 fs : チェックなしで全画面ボタン非表示。 modestbranding : チェックでロゴが遠慮がちになる。 controls : チェックなしでコントローラー非表示。 Video Color: シークバーの色 White Red 5. Copy Player Code 埋め込みコードを生成してコピー コピーしたコードをHTMLソースとして貼り付ければOK! [f:id:fobitows:20230828130137p:plain:w336]

Youtube IFrame Embed - Full Custom ver.1

Image
YouTube Embed YouTube Video ID: Load Video Video Size: Width: + - Height: + - Video Parameters: rel fs modestbranding controls Video Color: White Red Copy Player Code

The JavaScript code necessary to use the IFrame API on a web page:

Image

コードのコピーボタン | Java Script

Image
Copy Code to Clipboard コードをコピー // コピーされるコード $(document).ready( function () { $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank'); }) HTML <button id="copyButton">コードをコピー</button> Java Script // ページが読み込まれた後の処理 document.addEventListener("DOMContentLoaded", function () { // "コードをコピーする" ボタンをクリックしたときの処理 document.getElementById("copyButton").addEventListener("click", function () { // コピー対象のテキストを選択 const codeToCopy = document.querySelector("pre"); const range = document.createRange(); range.selectNode(codeToCopy); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); // テキストをクリップボードにコピー try { document.execCommand("copy"); alert(&q

BloggerでMarkdown記法を使うには?

Image
## BloggerでMarkdown記法は使える? 結論から言うと、使えます。ただし、ちょっとした制限があります。 Bloggerは元々Markdown記法をサポートしていないため、通常はMarkdownを直接使用することはできません。Bloggerは独自の編集ツールとHTMLエディタを提供しています。 ただし、一部のユーザーさんが任意でMarkdownをBloggerで使用できるようにするカスタムソリューションを開発しています。これらのソリューションは、BloggerテーマのカスタマイズやHTMLのカスタマイズを通じてMarkdownを導入し、それを使用してブログ記事を書く方法を提供します。ただし、これらの方法は非公式でサポートされていないため、Bloggerの変更やアップデートに対応しないかもしれません。 したがって、BloggerでMarkdownを使用したい場合、専用のブログプラットフォームやツールを検討するか、MarkdownをHTMLに変換するツールを使用して、Bloggerにコピー&ペーストする必要があります。一部のオンラインMarkdownエディタは、MarkdownからHTMLへの変換をサポートしていますので、それを利用することができます。 つまり、Blogger自体はMarkdownをサポートしていないため、Markdownを使用するためにはいくつかの手間が必要になります。以下にひとつの利用方法をご紹介します。 <br> ### BloggerプラットフォームでMarkdown記法を可能にする ①「テーマ > カスタマイズ > HTMLを編集」と進む <br> ②</body>タグ前に以下のコードをコピペ ***HTML*** ```html ``` <br> ※保存<i class="fas fa-save"></i>を忘れずに! <br> ③記事ページで以下のように記述 ***HTML*** ```html ``` <br> この `<textarea>` `</textarea>` タグ内で、Markdown記法が使える