はてなブログテーマ:「Flex PhotoGraph」を作成、テーマストアへ公開しました。

リリースしました!

f:id:tommyoctopas:20170917130606p:plain

Flex PhotoGraph - テーマ ストア

 

Flex PhotoGraph

サムネイルをメインしたカード型の記事一覧表示を行う写真系のブログ向けテーマです。

 

どんな写真が掲載されているのか、ひと目で解る一覧をデザインしてみました。

f:id:tommyoctopas:20170917132912p:plain

 

mac safari8 2560*1600 アーカイブ50件表示 ランダムカード幅モード

f:id:tommyoctopas:20170919002208p:plain

 
FlexBoxの機能を使用してカードのカラム列数をレスポンシブに変更します。
スマフォにおいても可能な限りカラム列数を増やして表示する仕様です。

 

記事ページのインナーサイズの幅も通常のブログより広めに設定してあります。記事内の写真を大きいサイズで鑑賞して頂けます。大きな写真を2枚横並びに配置しても写真が小さく表示されてしまうのを抑えれます。

 

※トップページの記事一覧を一覧形式で表示するに設定(pro限定)しておく必要があります。アーカイブのページは一覧形式になっていますので、無料ユーザー様でも、このテーマでのカード型の記事一覧にて表示されます。

 

「カードの特徴」

・大きなサムネイルでカード型記事一覧
・記事タイトルはサムネイル上に配置、画像上の文字への見やすさを配慮
・ブックマーク数、スターもサムネイル上の下部に配置
・日付、記事概要はサムネイル下の別枠へ配置

 ※カテゴリーはカード上に表示していません。カードのデザイン上、どこに配置するのがベストか、今後の検討課題と致します。

 

「その他特徴」

・カラム列数はブラウザの幅に応じてレスポンシブに増減します。
・列数は1~9列まで対応、可能な限り多くの列数を試みる仕様です。

・スマフォもサポートします。ただしデバイス幅の狭いスマフォ(iPhone5等)は1列の表示となります。

 ・サムネイルにフォーカスした時、FlexGrowを行います。カード間の隙間を詰めて、フォーカス対象の幅を広げます。