画像でもっと遊ぼう 1

2019年12月28日

ブログカスタマイズ
2

このブログで利用させていただいているテンプレート作者のAkira先生のブログでは、テンプレート利用者のためのカスタマイズを数多く紹介されています。

その中で、Akiraさんご自身が「画像で遊ぼう」と命名されたシリーズの3つの記事に書かれている手法と、その応用をご紹介します。

まず最初は、Flexレイアウトを利用して画像をスタイリッシュに並べる方法です。

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログさんの機能パクりというか。 まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`)...

基本的な使い方

Akiraさんの記事の内容を読めば特に困難な部分はないような気がしますが、タイルで表示する段数と各段の横に並べる枚数で、見え方は変わってきます。

例えばこんな感じです。

アスペクト比が違う画像の表示 1

自分で撮影した画像をブログにアップロードする方の多くは、メインのスマホかデジカメでの撮影だと思います。

デジカメでの撮影なら横長の画像が多くなり、スマホで自撮りとかだと縦長がほとんどだと思いますが、時には逆の縦横比で撮影する場合もあるでしょう。

そしてそれを表示する場合は、アスペクト比を定義するクラスを複数にすると、こんな風に表示することも出来ます。

これも悪くはありませんが、縦に長くなりすぎるとタイル風でお洒落なレイアウトが分かりにくくなるという欠点があります。

アスペクト比が違う画像の表示 2

ColorboxやLuminous等のLightbox系の画像拡大スクリプトを利用すれば、タイル風表示でのアスペクト比は揃えたままで、クリックで元画像も表示させることが可能で、画像のトリミングなどの加工も不要です。

超軽量画像拡大スクリプトLuminousをFC2で使う方法

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。

メインになる画像を強調する

1枚だけ大きく表示して、下の段にはサムネイル風に並べる表示も可能です。

ただし1枚だけ表示する段がある場合には、元画像の横幅が記事の最大幅を下回ると拡大されてしまうので、記事幅と同じかそれ以上の横幅を持つ画像を使うことをおすすめします。

画像でもっと遊ぼう 2

前回とは違った特徴を持つ、メイソンリーレイアウトという画像の並べ方を紹介したAkiraさんの記事です。...

2 件のコメント

まだコメントはありません

そふぃあ

2019/12/29 (Sun) 08:59

64: こんにちは

私はとにかく写真の枚数が多いので、この機能、有難く使わせていただいています。
縦長写真が縦長であるとわかり難いので、少し前によつばさんが使われていたメイソンリーレイアウトも勉強してみようかと思っていました。
みなさんWeb知識が豊富で、凄いな~と感心するばかりです。
またいろいろと教えてください。

今年はススムさんとお友達になれて、嬉しい年になりました。
来年も、どうぞよろしくお願いします。
それでは、素敵な年末年始をお過ごしください。

ススム

2019/12/29 (Sun) 09:42
ススム

65: To そふぃあさん

おはようございます、コメントありがとうございます。

このブログではあまり画像を貼りませんが、Akiraさんのブログで紹介されていて印象的だったので忘備録として記事にしました。
そふぃあさんのブログでは、いつも数だけでなくて撮影の腕前にも感心するばかりです。

私の方こそ来年以降もよろしくお願いします、私はそふぃあさんのブログが大好きです。
いろいろな方と友達になれて、このブログを始めて本当に良い年になりました。

そふぃあさんも良いお年をお迎えください。
年末年始の行事やお出かけのレポートも楽しみにしています(^^)