テーマの中心は、多肉からクラフト、身近な疑問に変化。埋め込み関係で紹介していなかったもので、思いついたのが「Facebookの埋め込み」、「YouTubeの埋め込み」、「Googleマップの埋め込み」ですので、今回はそれらを一気に紹介します。Facebookの投稿の右上の「・・・」アイコンをクリックして、「</>埋め込み」を選べば「埋め込みコード」をコピーできる画面になります。少数のブログではそれに対応しているものもありますが、ウェブリブログを始めブログの埋め込みに対応していないものが多いようです。今回は、そういったブログを埋め込む方法を説明します。先日、ツイートをブログ記事に埋め込む方法を紹介しました。今回は、インスタグラムをブログに埋め込む方法を紹介します。基本的には次の3ステップで埋め込みが出来ます。ブログの記事中に、Twitterの内容を使いたいときに、リンクは分けるけど、ツイートそのものをブログに埋め込む方法を紹介したいと思います。その方法はTwitterのヘルプセンターに次のように書かれています。このカレンダーは、HTMLとCSSとJavaScriptを使ったものです。※ソースは、HTMLは3行(ボタン部2行、カレンダー部1行)ですが、CSSとJavaScriptが非常に長いです。自動的に、本日を含む月から4カ月分を表示するカレンダーです。ときには、写真にフレームを付けて、傾けてみるのもワンポイントで効果的です。※個人的な感想では、沢山ある画像の1枚程度がいいように思います。多いと、逆効果な気がします。下の事例の写真は、写真とフレームを傾けた感じにの表現です。写真の構図によっては、活き活きとした感じを演出できます。この例では、時計回りに「9度傾け」ています。動画などを見ると、かなり違うようなので、再度挑戦しました。色々なプログラミング言語が登場していますが、いまだに残っているものもあったり、改良されて進化したもの、役割を終え消えたもの、ここ数年になって急速に使われだしたもの・・・色々あるようです。私自身が聞きなれないプログラミング言語が多いので、現状と過去からの推移を調べてみました。1月27日(月)~2月2日(日)の世界各地の週間お天気予報です。※予報内容は(それとなく考えましたが)でたらめです、もしかしたら偶然あたることもあるかも知れません。※緊急速報:大相撲春場所で前頭十七枚目の徳勝龍(奈良県出身)が初優勝しました。「右から左」とその逆の「左から右」は紹介しましたが、CSSを使った「左右往復」を紹介します。下の動きがCSSを使って表現したものです。※白い枠の中に、表現してみましたが気にしないでください。前回、「文字が右から左へ流れる」編をご紹介しました。その逆バージョンも、以下に紹介します。👆上のテキストが左から右へと流れています。「右から左へ」バージョンのソースをほんの少し入れ替えただけです。以下にそのソースを紹介します。本日は、「文字が流れる」方法を紹介します。👆上のテキストが右から左へと流れています。簡単な事例なので、ぜひ使ってみてください。以下に、ソースを紹介します。枠の中に文字や画像などの要素を枠いっぱいに横並びにしたいときがあります。思うように、横並びになってくれないときがありますね。」を使用すると要素を枠いっぱいに横並びにすることが出来ます。外枠の幅に応じて自動的に折り返してくれます。マトリックス変形」の中で「・3D変形:matrix3d()~()内の値は16個あるので省略」としました。CSSで簡単にレイアウトが組めるボックスとしてflexboxという機能があります。その機能の一部に、「flex-wrap」プロパティがあります。CSSのtransformプロパティを使うと、要素に5種類の変形を適用させることが出来ます。その5種類の変形とは1マトリックス変形、2回転、3縮尺(拡大・縮小)、4傾斜、5移動をひっくるめた表現です。その場合に2D変形と3D変形とがあります。<div>美味しいもの食べたいな。HTMLのタグでときどき<canvas>タグを見かけます。キャンバスはこれに絵を描きますが、canvasタグの名前はそれに因んでいるようです。キャンバスに描く具体的な絵の内容は、JavaScriptで行い、その内容をHTMLで実行しています。HTMLの<marquee>タグを使って動かしています。「prettify」というJavaScriptで記述された、ライブラリを使用すると、通常なら画面上では見ることが出来ない色々な言語で記述されたコードソースを見栄えよく表示させることが出来ます。これは、prettifyを使ってJavaScriptのソースを表示させた例です。左側に画像が流れループしますが、いずれかの女性にマウスで触れるとループが止まります。離すと再びループします。使用した画像は、2種類だけです。上の枠内の文字部分をクリックすると、「Animate.css」のデモ画面になります。it」のタグがあります。これをクリックしてみてください。前回、「jQueryのカレンダーを使ってみましょう」の記事を書きましたが、そもそもjQueryの使い方自体の説明をしませんでしたので、今回は同じトップ画面に表示されている小項目の「Checkboxradio」を取り上げて、jQueryの基本的な使い方を説明したいと思います。「iquery.com」にアクセスすると、次のような画面になります。JavaScriptの記述で、多くの人がよく使うものは、各種のサイトからライブラリーとして提供されています。「jQuery」も登録なしで無料で利用できるライブラリーの一つです。本日は、そのjQueryのライブラリーの中から1つだけ「カレンダー」を紹介します。こんにちわ!わけいです。寒くなり、まるで雪が降ってきたような感じです。※昨日アップした記事は「気持ち玉欄・コメント欄」がクリックを受け付けない状態でしたので、本日修正しました。昨日の記事のたった1行を書き変えるだけで、泡→雪の画面に変えています。不思議な世界がかなり下の方まで続きますが、バブルは画面端から消えてもはじけません。桜の花びらが、画面いっぱいを舞い散ります。これが札束だったら、すごいことになりそうですね。時々風が吹いて、花びらが横に舞うところが憎い演出です。詳しくは、sctwayさんのサイトへ。※季節的には、枯葉が舞い落ちたり雪が降ったりですが、何事も早めの準備も怠らないように、です。これは、しばらく前(2019/09/22)に手掛けたのですが、3つの円が重ならず、しかも文字はとんでもないところに表示されました。そればかりでなく、記事以外の部分と重なって表示され、しばらくそのままになっていました。下書き記事がかなり溜まってしまいました。