使って、画像を簡単に貼り付けることができます。このお手軽さ加減はかなりのものです。このブログでもよく使っていました。軽くないんですよね、いろいろと。画面だったり、スクリプト使ってたりと。問題点が無かったりなどとして、使わなくなったのですが。使う時にいろいろ考えた小手先程度のテクニックを、今回ご紹介しておこうかと思います。したものを使うほうが、ページ表示速度の改善やサイトの軽量化といった効果が期待できます。使えますが、使っているブログは私見からしてけっこう少ないです。機能を使わない人にはまったく無駄な知識なので、必要としない方は、ここらでページをお戻りください。公開されている画像で、作者が定めた著作権ルールによっては自分のブログでも使うことができます。)のもので、こちらのリンク先に詳しく書かれています。)」のものが貼り付けられます。この埋め込み型の特徴としては、次のようなものがあります。著作者・タイトル・著作権ルールなどの自動表示クリエイティブ・コモンズでは、ライセンスの種類によっては撮影者やタイトルといった情報を記載(クレジット表記)しなければいけません。※クレジット表記に関しては、これらのサイトが非常に参考になります。ご参考にしてください。サクセスラボそのクレジット表記で大丈夫?クリエイティブ・コモンズ(CC)画像の使い方。公開している写真には、大概クレジット表記のライセンスを設定しています。埋め込み型ではこのクレジットを自動的に表記してくれるので、非常に便利です。一つの画像で複数の大きさやサイズのものが用意されています。これに関してもこちらのブログで詳しく書かれています。o)画像の大きさは、表示領域に最適なものを選んだほうがページの表示スピードの関係上とうぜん良いです。これを埋め込み型の場合、その表示領域に合わせて最適な画像サイズを選択して表示してくれます。img要素で読み込んだ画像がキャッシュされているはずですので、それほどページ表示に影響が出ることは無さそうです。どちらかと言えば、レスポンシブなどといった際に有る、表示幅と画像サイズが合わなかったときに、画像サイズを再度合わせるための保険として使えます。このような特徴が埋込み型にはあります。スクリプトを読み込むので若干余分なものを読み込んでいる感はありますが、それなりに便利な機能を備えています。特徴を知ったところで、はてなブログで使う場合の小技を紹介します。はてな記法で貼り付けないまず、はてな記法で貼り付けないでください。そのほうが利点がいろいろと多いです。「はてな記法での貼り付け」とは次のようなものです。[https://www.flickr.com/**(URL)**:embed]はてな記法モードで埋め込んだら挿入される形式です。Markdownモードでも、見たままモードでも使えます。見はシンプルで良いのですが、この挿入方法ではカスタムもなにも出来ません(笑)基本は見たままモードなどで挿入されるHTMLで記述されたコードになります。charset="utf-8"></script>こちらの方が、alt属性やtitle属性、幅(width)や高さ(height)も編集できるので便利です。HTMLモードの2つしかないので、このモードでわざわざ挿入させてコピペして...と非常に面倒くさいことをしなくてはいけません。リンク先と画像URLさえ分かれば上記のHTMLに当てはめて使えますので、プレビューなどでデベロッパーツールや右クリックでURLを取得できます。ページから埋め込み用のURLを取得するという方法もあります。ページを別窓で開きますので、そちらのほうが簡単かもしれません。Phote】ボタン)。埋め込みのスクリプトは、表示画像の要素より後ならばどこにあっても機能します。記事の1番下に移動させても機能します。スクリプトは基本的にはページの読み込みの妨げにならないように、HTMLの後半に記述することが多いです。スクリプトも記事の後ろに持っていくことにより、ページの読み込みの高速化が少し期待できます。)による読み込みなので、さほど差は無いかもしれませんが、それでもスクリプトが動作させるタイミングは後のほうが良いのでないかと。あと、Flickr画像を複数貼り付けている場合、スクリプトは1つでも十分機能しますので、複数スクリプトがある場合は一つだけに残して、後は消してもぜんぜん機能します。埋め込みは、スクリプトによって表示幅に合った画像を挿入してくれます。いうことは、最初に画像サイズが小さく軽いものを指定していても、後で表示幅に合った画像を貼り付けてくれるということです。これを利用したら、スマホなど非力なマシンであっても早くページを表示させられ、後で最適な画像にスクリプトが自動で変えてくれる、ということも期待できます。sizes属性を使かえば、最適な画像の振り分けが可能です。前述していますが、この方法だと画像が二回読み込まれることになるので、ページ全体が表示完了するのは実際には遅くなっていると思います。難点か問題点があります。1つは、やはり重いということです。スクリプトを使っているので当然ですが、他に画像自体もおそらくJPG圧縮といった軽量化処理はされていないと思います。画像をアップした制作者がしていたら良いのですが、全ての写真にそれを期待するのは無理があります。あと、画像が無くなることがあるというのも問題です。上で公開している制作者のものです。その人次第で貼っている画像が消えて無くなることがあります。久々に見た過去の記事で画像が表示されなくなっている、なんてこともあります。出てくる「ブロックされたリソース」です。ページでブロックされるので、正しくインデックス登録されない場合がある」ということなのです。画像を使っているため出ていました。リンク全てに記述したのですが、減りませんでした。これは、埋め込み用のスクリプトによってrel="nofollow"が消えてしまうのと埋め込み用のスクリプト自体のリンクがブロックされるのどちらかか両方だと思います。少なくとも埋め込み用スクリプトのリンクはブロックされます。rel属性はありませんので、rel="nofollow"は付けれません。しようもない、ということです。ページのランキングに影響はでない、あっても微々たるものだとは思うのですけどね...。いったものが表示されていると性格的に何だか気になります。自分で用意した画像に変更し、使うとしても埋め込み用スクリプトは使わずに画像を貼っています。まとめ今回の記事は以上です。画像埋め込みは便利です。便利ゆえに、このブログでも使っていましたし。問題点もあるようです。画像をダウンロードして使うといった方法が考えられます。綺麗な良い画像も多いので、上手に使っていけたら良いなぁと思っています。画像埋め込みの特徴と、はてなブログでの小技と、埋め込みの問題点Tweet関連記事2018-04-15【jQuery】はてなブログの脚注も、するするスクロール移動するスクリプト今回は久々に、はてなブログのカスタマイズ系の記事です。前々回の記事に続き、プレースホルダーの小技をもう一つ。width属性とheight属性とがあります。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。