プロフィール

Takuma Saitou

Author:Takuma Saitou
■ 自己紹介 ■■■■■■
コンテンツデザイナー・ディレクター
将来の夢はデザインの出来るウルトラマンになること。

↓↓↓↓↓↓↓
プロフィール詳細

■ 個人HP ■■■■■■
個人のイラスト作品から、お気に入りの写真の掲載・壁紙・メッセンジャー画像 配布してます。

↓↓↓↓↓↓
Takuma Saitou Art Works


カテゴリー


最近の記事


月別アーカイブ


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

【サムネイル】

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

 

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

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

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

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

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

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

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


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

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

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

▼ピックアップ▼
http://kisskisskids.com/blog/

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

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

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

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

●んで、一言

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

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

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

■■■■■■■■■■■■■■■■■■■■■■■■■
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://takumasaitou.blog114.fc2.com/tb.php/519-cf2400d6


Powered by FC2 Blog