きょうは、写真を一覧表示するについて学びます。
写真はブログには欠かせませんよね？
でも、どこから挿入するか、いくらぐらいの Px にするかを考えないと、ブログが”重く”なってページスピードが落ちます。
そこで、WordPress の機能を使って、適切な大きさにすることをやってみます。
きょうはあなたと、写真一覧表示を学習します。
１．写真を圧縮するいくつかの方法
ブログに載せる写真は、絶対に圧縮するべきやで！理由はいくつかあるんや：
圧縮された写真はファイルサイズが小さくなるから、ページの読み込み速度が速なるんや。これによって、訪問者がストレスなくブログを見れるし、離脱率も減るで。ページの読み込み速度が速いと、検索エンジンの評価も上がるんや。Googleはページの速度をランキング要素として考慮するから、SEOにも良い影響があるで。
特にモバイルユーザーにとって、データ使用量が少なくて済むのは大きなメリットや。写真が圧縮されてると、訪問者のデータ使用量も節約できるんや。小さいファイルサイズの写真を使うことで、サーバーの負担も減るんや。これにより、サイトの全体的なパフォーマンスが向上するで。
ブログに載せる写真のファイルサイズは、ページの読み込み速度を考慮して圧縮するのが重要や。
通常のブログ投稿に載せる画像は、100KB〜300KBくらいが理想的や。これくらいのサイズなら、画質も保ちながら、ページの読み込み速度にも影響が少ないんや。サムネイルやサイドバーに使う小さめの画像は、50KB以下が望ましいで。小さいサイズの画像はファイルサイズも小さくできるんや。
ページ全体に使う大きな画像やヘッダー画像は、500KB以下に抑えるのがええで。これ以上大きいと、ページの読み込みが遅くなる可能性があるんや。
１．圧縮の具体的な方法
「TinyPNG」や「JPEG-Optimizer」などのオンラインツールを使うと、簡単に圧縮できるんや。これらのツールは画質を保ちながらファイルサイズを小さくしてくれるで。
「Photoshop」や「GIMP」などの画像編集ソフトを使って、保存時に圧縮率を調整することでファイルサイズを小さくできるんや。「Web用に保存」機能を使うと、さらに細かく調整できるで。
「cwebp」などのコマンドラインツールを使って、画像をWebP形式に変換することでも大幅に圧縮できるんや。例えば、次のコマンドでJPEG画像をWebPに変換できるで
cwebp -q 80 input.jpg -o output.webpこれらの方法を使って、ブログに載せる画像のファイルサイズを適切に圧縮することで、ページの読み込み速度が速くなり、訪問者の体験が向上するんや。ぜひ試してみてな！
写真を圧縮する方法は先に説明した通りやけど、WebPフォーマットにするのも一つの方法やし、JPEGやPNGのまま圧縮する方法もあるで。
たとえば、「TinyPNG」や「JPEG-Optimizer」っちゅうオンラインツールを使うか、「Photoshop」や「GIMP」みたいな画像編集ソフトで圧縮するんが簡単でおすすめや。
ブログの見栄えも大事やけど、快適さを考えると、圧縮は欠かせへんねん。ぜひ試してみてな！
２．さまざまな圧縮方法
まずは、オンラインのツール使う方法。例えば、「TinyPNG」や「JPEG-Optimizer」っちゅうサイトがあるねん。それに写真アップロードして、簡単に圧縮できるで。
また、パソコンにソフトインストールする方法もあるんや。「Photoshop」や「GIMP」っちゅう画像編集ソフトは、写真のサイズや画質調整して圧縮できる機能持っとるねん。
スマホでやりたいんやったら、「Photo Compress」や「Image Size」っちゅうアプリが便利やで。アプリダウンロードして、写真選んで、圧縮するだけや。
せやけど、どの方法でも、写真の画質がちょっと落ちるかもしれへんから、気ぃつけてな。
３．WebPはええでぇ！
WebPはGoogleが開発した画像フォーマットで、圧縮率が高くて、画質もええ感じに保てるんや。JPEGやPNGよりも小さいファイルサイズで、ウェブサイトの読み込み速度も速なるんや。「Online-Convert」や「Convertio」っちゅうサイトがあるねん。写真アップロードして、WebPフォーマットに変換するだけや。
「Photoshop」や「GIMP」でもWebPに保存できるようになっとるで。写真開いて、「名前を付けて保存」からWebPを選ぶだけや。もし技術に自信あるんやったら、「cwebp」っちゅうコマンドラインツールも使えるで。インストールして、コマンド打つだけでWebPに変換できるんや。
具体的には、例えばこんな感じや：
cwebp -q 80 input.jpg -o output.webp
このコマンドで「input.jpg」を圧縮率80で「output.webp」に変換するんや。
WebPに変換したら、ファイルサイズがぐっと小さなるけど、画質はしっかり保てるから、ほんまにおすすめやで！
コマンドラインで「input.jpg」を圧縮率80で「output.webp」に変換するっていうのは、パソコンのコマンドプロンプトやターミナルを使って、画像ファイルの形式を変更しつつ、ファイルサイズを小さくすることや。
具体的には、こんな手順になるんや：
まず、「cwebp」っていうコマンドラインツールをインストールするんや。このツールを使って、JPEGやPNGの画像をWebP形式に変換できるんや。インストールができたら、コマンドプロンプト（Windows）やターミナル（MacやLinux）を開くんや。そして、変換したい画像ファイルがあるディレクトリに移動するか、パスを指定するんや。次のコマンドを入力するんや
cwebp -q 80 input.jpg -o output.webp
それぞれの部分の意味を説明するで：
cwebp：このツールの名前や。-q 80：圧縮率を指定しとる。80は品質の数値や。0から100までの範囲で、数字が大きいほど高品質でファイルサイズも大きくなるんや。80は高品質を保ちながら、ファイルサイズを小さくするええバランスや。input.jpg：変換したい元の画像ファイルの名前や。-o output.webp：変換後のファイル名と形式を指定しとる。output.webpはWebP形式で保存するファイルの名前や。
コマンドを実行すると、「input.jpg」が指定した圧縮率80で圧縮されて、「output.webp」っていう名前のWebP形式のファイルが作成されるんや。
まとめると、このコマンドは「input.jpg」というJPEG形式の画像を品質80で圧縮し、WebP形式の「output.webp」という新しいファイルに変換するということなんや。WebP形式は、JPEGやPNGよりもファイルサイズが小さくなりやすいから、ブログとかウェブサイトに載せるのにぴったりなんやで。
２．写真を一覧表示する
私がどこで生活していようが、そこにはなんらかの社会的なつながりをもった活動の余地があります。私はそれに加わり、人々のために役立ち、自分自身の関心を広げていくことができるはずです。
たとえば、夕方に撮った写真が妙に青みがかってしまった経験ありませんか？
これは「ホワイトバランス」という、色味を調整する機能が正しく動作しなかったためです。
普通は「オート」にしておけば、どんな状況でもそれなりの色で撮れるのですが、夕方の風景や森の中などでは、ホワイトバランスの自動調整がうまくいかないことがあります。
夕方の屋外では、ホワイトバランスを「曇り」モードにすると、暖かい色味になり、綺麗に撮れることがあります。夕焼け空は、オートだけでなく「曇り」モードでもおきます。赤がより鮮やかになります。
１．写真を一覧表示するためには
フォルダ内のサムネイル表示
写真が保存されているフォルダを開き、ファイルエクスプローラー（Windows）やFinder（Mac）などでサムネイル表示を選択します。これにより、フォルダ内の写真が小さなサムネイルとして表示されます。
写真管理ソフトウェアの使用
写真管理ソフトウェア（例: Adobe Lightroom、Google フォト、Apple Photos）を使用すると、写真を一覧表示することができます。ソフトウェアのインターフェース内で写真のグリッドビューまたはサムネイルビューを選択し、写真を一覧表示します。
オンラインギャラリーまたはクラウドストレージサービスの使用
写真をオンラインギャラリー（例: Flickr、500px）やクラウドストレージサービス（例: Google フォト、Dropbox）にアップロードすると、写真を一覧表示することができます。各サービスのウェブインターフェースを使用して、写真をグリッド表示やサムネイル表示で閲覧できます。
画像ビューアソフトウェアの使用
画像ビューアソフトウェア（例: Windows フォトビューア、macOS プレビュー）を使用すると、写真を一覧表示することもできます。ソフトウェアを開き、フォルダ内の写真をグリッドビューやサムネイルビューで表示します。
これらの方法は、異なる環境やツールによって多少異なる場合があります。使用しているデバイスやソフトウェアに応じて、最適な方法を選択して写真を一覧表示してください。
自分の時間と努力と創造力のいくらかを、これらの活動のために費やしたいと思います。美術、絵画、文学、手芸・・・そして写真などに関することを考えます。WordPress には、数枚の写真をきれいに並べて表示させる「ギャラリー」という機能があります。メニューの写真を4枚、横並びで配置します。
管理ページから<固定ページ>→<固定ページ一覧>をクリックし、<Menu>をクリックして編集画面にします。画像をクリックすると<キャプション>が入力できます。Web ページを確認すると、写真が横並びに３枚表示されています。
次に、アイキャッチ画像を適切な大きさにすることをしてみます。基本的に画面いっぱいにするには、横幅を1200px がおすすめです。縦は600前後がいいと思います。
- 画像を編集をクリックして、1200×690前後のピクセルにします。900でもいいです。
- 「代替テキスト」「タイトル」「キャプション」に入力します。
- 「アイキャッチ画像を設定」をクリックします。
- 最後に、更新をクリックします。
３．写真をウェブに保存、共有
オンラインアルバムにするとみんなで共有できます。代表的なサービスとして、無料で大容量が使える「グーグルフォト」です。Google フォト www.google.com を利用するには Google の ID が必要です。同サービスのトップから取得できます。
ID とパスワードを使って Google フォトのログインしたら、パソコンに取り込んだデジカメ写真を、インターネットを通してウェブ上に転送します。「適当に名前をつけて」アルバムの名前を決め、載せたい写真を指定し、「アップロード」ボタンをクリックします。
写真にタイトルやキャプション（説明文）を付けたり、並べ替えたりもできます。アルバムは公開・非公開どちらでも可能です。ID を持っている人だけが見られるような設定もできます。
１．写真をウェブに保存して共有する方法
クラウドストレージサービスを使用する方法
クラウドストレージサービス（Dropbox、Googleドライブ、OneDriveなど）を使用することで、写真をオンライン上に保存し、必要なときに共有することができます。各クラウドストレージサービスには無料プランと有料プランが用意されているので、必要な容量や機能に応じて選択することができます。
ソーシャルメディアを利用する方法
Facebook、Instagram、Twitterなどのソーシャルメディアを使用することで、写真をオンライン上に共有することができます。ただし、プライバシーに配慮する必要があるため、公開範囲やタグ付けなどに注意する必要があります。
フォトシェアリングサイトを利用する方法
Flickr、Imgur、500pxなどのフォトシェアリングサイトを利用することで、写真をオンライン上に保存し、共有することができます。フォトシェアリングサイトには、写真の品質を維持するための機能や、他のユーザーと交流するための機能などが用意されています。
ファイル転送サービスを利用する方法
WeTransfer、Filemail、SendSpaceなどのファイル転送サービスを利用することで、写真をオンライン上に一時的に保存し、必要な相手に送信することができます。ただし、ファイルサイズや有効期限などに制限がある場合があるため、利用前に確認することが必要です。
以上が、写真をウェブに保存して共有する代表的な方法です。それぞれの方法には、メリットやデメリットがありますので、目的や状況に合わせて選択することが重要です。
あとがき
現在自分で作った余暇とか、来るべき晩年において、何かをするために、趣味を広め、その準備をしておくことは、決して早すぎることはないと思っています。
続けられるか？という不安はあります。まして明日のことは誰にもわからないじゃないですか。でも明日亡くなったにしてもそれまで記録していたものは残ります。（契約期間は置いておいて）。
固定ページは、最新記事の「投稿」と異なり、独立したページを作る場合に自己紹介や、リンクなど、常に閲覧者が求めている情報を表示する場合などに使います。写真を一覧表示する画像が増えました。搭載されている画像管理ソフトでもかなりのことができますが、使いこなすのは難しいものです。ファイル名などを忘れてしまって、目的のデータを探せないこともあります。
そんな場合、おすすめするのが「インデックスプリント」です。写真も「記録」になります。まだまだありきたりの写真ですが、「このブログならでは」の写真も掲載していこうと考えています。
コメント