「Similar Postsでサムネイル表示してCSSでブロック表示」

| 1 Comment

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

wordpressのカスタマイズはコピペ。
探してきては試してます。
Takumaです。
 

【サムネイル】

画像や文書のファイルを縮小表示したもの。多数のファイルを一覧表示する際に使われる。(by Yahoo!辞書)

 

関連記事を表示したいが、こちらのサイトは写真が中心のサイト。
というわけで、関連記事のサムネイルを表示させたいという事で色々試してみた。

▼ピックアップ▼
WordPress ? Similar Posts ≪ WordPress Plugins

まずは、有名な上記のプラグインに

▼ピックアップ▼
関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog : レビューや日常など

で、紹介されているサムネイル表示用のwordpressプラグイン上に記載するタグを参考に実装。(←コメントやテキストリンク表示は外した形で)

とはいえ、写真(4:3とか16:9)をそのままアップすると、画像のタグ内に縦横の固定サイズが無いと、レイアウトが崩れる。とはいえ縦横幅を固定すると画像が伸びるor縮む。(←元サイズ違うしね)

と言う訳で、今回採用したのは以下の方法。

▼ピックアップ▼
CSS liefde ≫ img(画像)を正方形に切り取って表示させる

普通の長方形の画像を表示させるのではなく、正方形に表示領域を作って(overflow:hiddenを使って)見た目トリミングする方法です。

それでできたのが、以下のページのフッター箇所。

▼ピックアップ▼
kisskisskids~フェイクスイーツパティシエの手作りデコアクセサリー

画像サイズの縦幅のみ表記して、横は自働で伸縮。
サムネイルの横ははみ出れば表示されないので、ブロック組で表示されます。

まあ、ちゃんとプログラムできれば、もっとやりようがあるのでしょうが、しばらくこれで様子をみようかと。

■P.S:今日の気になったサイト■■■■■■■■■■■

▼ピックアップサイト▼
Ring Ring Wonder Christmas

●んで、一言

伊勢丹で毎年恒例?的になっている、クラウス・ハーパニエミさんのイラストサイト。
動く絵本テイストで昨年はFlashでしたが、今年はHTML5!!

動画要素がちょっと画質が粗かったりしますが、よくこの時点で採用しましたね。

Flashは、iphone等のスマートフォンで見ることはできませんが、こちらなら見ることができます。いやー、ちょっと感動しました。

■■■■■■■■■■■■■■■■■■■■■■■■■

▲このページトップへ

takumaの「デザインはあれでアートはそれで」