わけいの多肉ブログ

Clker-Free-Vector-ImagesによるPixabayからの画像 PDFファイルを修正したりしたいことがありませんか。 OneDriveのDocumentを利用することで、それが出来ます。 今回は、実際に行った例と、歌詞にコードを書き込む際の便利な方法を紹介します。 1　これだけ見ると単なるPDFファイルですが 2　ここに至…

続きを読む

Eaglesの曲「Hotel California」のアコースティック･ギター･バージョンの動画が好きです。 こんな感じで、まとめておくといちいち探さなくても大丈夫なので重宝します。 米のロックグループのEagles(イーグルス)の曲Hotel California(ホテル･カリフォルニア) は、1970年代のアメリカン･ロックの代表楽曲のひとつ。 1976年作品。作曲：ド…

続きを読む

Excelで作った表があって、これをブログに掲載したいけど･･･ この表をHTMLで表を作るのは、とても面倒です。 Microsoft アカウントを持っている人なら、OneDriveという無料クラウドが使えるはずです。 こんな時に、OneDriveクラウド経由なら、この表をブログに埋め込むことが出来ます。 そこで、今回はマイクロソフトのOneDriveを利用したExcelの埋…

続きを読む

この画像に、画像やアイコン、文字を重ねてみます。 アップ画像はこの1枚だけです。他の画像は全てリンク画像です。 言葉の定義 アップ画像： 自分でアップして表示する画像 リンク画像： 他のサイトの画像をリンクで表示する 1-1　YouTubeボタンを重ねる アップ画像にリンク画像のYouTubeボタンを重ねてみます。 …

続きを読む

ウェブリブログの機能に「ファビコン」（favicon）というものがあります。 今まで使ったことがなかったので、今回はこの機能を使ってみました。 1　ファビコンを使ってみた 次の画像が、ファビコンを使った画像です。 ブラウザーの上部に、いくつかのタブの中に「わけいの多肉ブログ」と「オンリーワンより同じ花」のタブがあります。 このタブの左側に表示…

続きを読む

埋め込み関係で紹介していなかったもので、思いついたのが「Facebookの埋め込み」、「YouTubeの埋め込み」、「Googleマップの埋め込み」ですので、今回はそれらを一気に紹介します。 Facebookの埋め込み Facebookの投稿の右上の「･･･」アイコンをクリックして、「＜/＞埋め込み」を選べば「埋め込みコード」をコピーできる画面になります。 下の…

続きを読む

自分や他の人のブログを自分のブログに埋め込みたい時ってありませんか？ 少数のブログではそれに対応しているものもありますが、ウェブリブログを始めブログの埋め込みに対応していないものが多いようです。 今回は、そういったブログを埋め込む方法を説明します。 1　ブログ記事を埋め込む 「ブログをブログに埋め込む」って何のこと？、と思う方もいると思いますので、 まずは、別の…

続きを読む

先日、ツイートをブログ記事に埋め込む方法を紹介しました。 今回は、インスタグラムをブログに埋め込む方法を紹介します。 1　Instagramをブログに埋め込む 基本的には次の3ステップで埋め込みが出来ます。 ① パソコンからInstagramを開き、目的の画像・動画を表示 ② 画像の右上の「…」をクリック ③ 埋め込みのボタンから、埋め込みコードをコピー・（ブ…

続きを読む

1　　ブログにTwitterのツイートを埋め込みたい ブログの記事中に、Twitterの内容を使いたいときに、リンクは分けるけど、ツイートそのものをブログに埋め込む方法を紹介したいと思います。 その方法はTwitterのヘルプセンターに次のように書かれています。 ウェブサイトやブログに…

続きを読む

StockSnapによるPixabayからの画像 4カ月表示するカレンダー このカレンダーは、HTMLとCSSとJavaScriptを使ったものです。 ※ソースは、HTMLは3行（ボタン部2行、カレンダー部1行）ですが、CSSとJavaScriptが非常に長いです。 自動的に、本日を含む月から4カ月分を表示するカレンダーです。 ※追記（2/5）：最初の投稿時は6カ月表示で…

続きを読む

1　写真を少し傾ける ときには、写真にフレームを付けて、傾けてみるのもワンポイントで効果的です。 ※個人的な感想では、沢山ある画像の1枚程度がいいように思います。 多いと、逆効果な気がします。 下の事例の写真は、写真とフレームを傾けた感じにの表現です。写真の構図によっては、活き活きとした感じを演出できます。 この例では、時計回りに「9度傾け」ています。 …

続きを読む

1　最近使われているプログラミング言語 色々なプログラミング言語が登場していますが、いまだに残っているものもあったり、改良されて進化したもの、役割を終え消えたもの、ここ数年になって急速に使われだしたもの･･･色々あるようです。 私自身が聞きなれないプログラミング言語が多いので、現状と過去からの推移を調べてみました。 2　2019年のよく使われているプログラミング言語 YouT…

続きを読む

【世界各地の週間お天気予報】 1月27日（月）～2月2日（日）の世界各地の週間お天気予報です。 ※予報内容は（それとなく考えましたが）でたらめです、もしかしたら偶然あたることもあるかも知れません。 ※緊急速報：大相撲春場所で前頭十七枚目の徳勝龍（奈良県出身）が初優勝しました。成績は14勝1敗。　　　【1月27日（月）～2月2日（日）の世界各地の週間お天気予報】　 【…

続きを読む

1　左右往復も・CSS編 「右から左」とその逆の「左から右」は紹介しましたが、CSSを使った「左右往復」を紹介します。 すぐ下の動きがCSSを使って表現したものです。 　あっちを立てれば～　こっちが立たず～　 ※白い枠の中に、表現してみましたが気にしないでください。 下で、ソースを紹介しま…

続きを読む

1　文字が流れる・逆バージョン 前回、「文字が右から左へ流れる」編をご紹介しました。 折角ですので、その逆バージョンも、以下に紹介します。 　　　出発するぞ～！　　じゃあ 👆上のテキストが左から右へと流れています。 「右から左へ」バージョンのソースをほんの少し入れ替えただけです。 以下にそのソースを紹介します。 …

続きを読む

1　文字が流れる 本日は、「文字が流れる」方法を紹介します。 お～い！　待ってくれ～　 👆上のテキストが右から左へと流れています。 簡単な事例なので、ぜひ使ってみてください。 以下に、ソースを紹介します。 PezibearによるPixabayからの画像（流れのイメージで使いました） 2　ソースで…

続きを読む

2018/10/06作成　2020/02/06更新（投稿日を2020/01/01に変更） 訪問ブログのリンク集 私がよく訪れるブログが多くなるに従い、お気に入りの登録数が増え、管理するのが難しくなってきました。 そんな状態を解消しようと思い、この記事を書きました。 記事の目的・経緯 ① 皆様への情報提供目的ではなく、私個人の利用目的で作成。（2018/10/06メモ）…

続きを読む

色々出ている情報を取りまとめ リニューアルに伴い、変更になった点や問い合わせが多い事項などを、一つに取りまとめました。 新しい情報があればその都度、追加しています。 2019/12/02に項目9を追加し、1～8の「修正済・対応中・検討中」のものは全て項目9に移動しました。 （内容は2019/12/27現在） 以下のブログ記事の構成は、 ＜1 容量・文字数・対応ファイル＞ ＜2 …

続きを読む

まえがき　枠いっぱいの横並び 枠の中に文字や画像などの要素を枠いっぱいに横並びにしたいときがあります。 でも思うように、横並びになってくれないときがありますね。 そんなときに、CSSの「 display : flex ; 」を使用すると要素を枠いっぱいに横並びにすることが出来ます。 また、外枠の幅に応じて自動的に折り返してくれます。 こんな感じを自在に（これ…

続きを読む

1　Windowsのバージョンとは ソフトウェアにバージョンが書いてあれば、それが間違いなくバージョンですが、Windowsの場合も当初はバージョンが明記されていました。 それが、Windows95、Windows98、WindowsXP、Windows Vistaと来て、バージョンがよく分からなくなりました。 続くWindows7、Windows8・8.1、Windows…

続きを読む

Windows10のアップデート後にネットワークにつながった 2019/11/15に ・Windows10更新プログラム・KB4524570のアップデートがありました。 このアップデートには、驚きの修正が入っていました。 😊　アップデートの再起動でもWi-Fiがつながった！　😊 過去2019年08月28日のWindows10のバージョンアップ以降…

続きを読む

transform：matrix3dを使った3ｄ変形にチャレンジ 先日の記事の「CSS3のtransformプロパティを使って要素を変形する」でいくつかの変形を紹介しましたが、その記事の中の「① マトリックス変形」の中で「・3D変形：matrix3d()～（）内の値は16個あるので省略」としました。 16個の数値とは、4x4の行列を指定しているのですが、つまり数学で言…

続きを読む

flexbox機能の一つのflex-wrapプロパティについて CSSで簡単にレイアウトが組めるボックスとしてflexboxという機能があります。 その機能の一部に、「flex-wrap」プロパティがあります。 通常は他の機能と組み合わせて利用されることが多く、例えばflex-direction、justyy-contentなどのプロパティがありますが、まずは使用頻度の…

続きを読む

要素をtransformを使って変形させる CSSのtransformプロパティを使うと、要素に5種類の変形を適用させることが出来ます。 その5種類の変形とは①マトリックス変形、②回転、③縮尺（拡大･縮小）、④傾斜、⑤移動をひっくるめた表現です。 その場合に2D変形と3D変形とがあります。 ①～⑤は、それぞれ次の関数がありますが、3DとかZ軸がの表現が使われているのが3D…

続きを読む

ふりがなを漢字の上に表示する＜ruby＞タグ ＜対応ブラウザ＞だと <div>美味しいもの食べたいな。</div> <div><ruby>明日 <rp>(</rp><rt>あした</rt><rp>)</rp></ruby></di…

続きを読む

canvasタグとはいったい何者 HTMLのタグでときどき＜canvas>タグを見かけます。 キャンバスはこれに絵を描きますが、canvasタグの名前はそれに因んでいるようです。 キャンバスに描く具体的な絵の内容は、JavaScriptで行い、その内容をHTMLで実行しています。 この役割分担を例えていうと、「スケッチブックの中に絵を描くのがJavaScriptで、…

続きを読む

テキストがぼわ〜んと拡大・縮小する Sed ut perspiciatis totam rem aperiam eaque Nemo enim voluptatem Nam libero tempore quo voluptas nulla pariatur? commodi consequatur? id est laborum et dolorum qui…

続きを読む

事例1　右から左にスクロール 事例1のソースです。 <marquee> <img class=border="0" alt="" src="https://画像のアドレス" width="" height=""> </marquee> HTMLの＜marquee>タグを使って動かしています。初期値は「右か…

続きを読む

1 prettifyを使ったJavaScriptのソースの表示例 「prettify」というJavaScriptで記述された、ライブラリを使用すると、通常なら画面上では見ることが出来ない色々な言語で記述されたコードソースを見栄えよく表示させることが出来ます。 これは、prettifyを使ってJavaScriptのソースを表示させた例です。 var bouncingBal…

続きを読む

左に流れる画像 ただただひたすら左側に画像が流れループしますが、いずれかの女性にマウスで触れるとループが止まります。 離すと再びループします。 この中に、1画像だけ違うものが入っていますが、気づきました？ 使用した画像は、2種類だけです。 10種類ぐらいの異なる画像をループできま…

続きを読む