はてなブログテーマ「FlexPhotoGraph2」
サムネイルをメインしたカード型の記事一覧表示ができる写真系のブログ向けテーマです。
どんな写真が掲載されているのか、ひと目で解る一覧をデザインしてみました。
左:デフォルトモード 右:ランダムカード幅モード(※要拡張機能追加)
mac safari8 2560*1600 アーカイブ50件表示 ランダムカード幅モード
トップページはFlexBoxの機能を使用してカードのカラム列数がレスポンシブに変化します。
タブレット、スマフォにおいても可能な限りカラム列数を増やして表示する仕様です。
※トップページの記事一覧を一覧形式で表示するに設定(pro限定)しておく必要があります。アーカイブのページは一覧形式になっていますので、無料ユーザー様でも、このテーマでのカード型の記事一覧にて表示されます。
記事ページに関して、ページのインナー幅を従来のブログより広く設定し、写真が大きく表示されるようになっています。大きな写真を2枚横並びに配置しても写真が小さく表示されてしまうのを抑えれます。
ブラウザー内で内包されている各枠を内部方向へ(ブログヘッダー > 記事タイトル > 記事コンテンツ)インテンドさせるデザインにしております。
カードの特徴
・大きなサムネイルでカード型記事一覧
・記事タイトルはサムネイル上に配置、画像上の文字への見やすさを配慮
・ブックマーク数、スターもサムネイル上の下部に配置
・日付、記事概要はサムネイル下の別枠へ配置
・カテゴリーの表示は、カードのスペースを確保する為、隠してあります。フォーカスが当たると、開示されます。
その他特徴
・カラム列数はブラウザの幅に応じてレスポンシブに増減します。
・列数は1~9列まで対応、可能な限り多くの列数を試みる仕様です。
・デバイス幅の狭いスマフォ(iPhone5等)は1列の表示となります。
・サムネイルにフォーカスした時、FlexGrowを行います。カード間の隙間を詰めて、フォーカス対象の幅を広げます。 (廃止)
・ヘッダ画像をブログ記事画像と動的に差し替える演出を行う機能が別途、追加可能
記事内のフォーマットサンプルです。
テーマのフォントは、Google Fonts「Noto Sans JP」を採用しています。
Webフォントの廃止、以下に変更、文字の読み易さを改善
font-family: -apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
横並び
単体(サイズ編集なし、記事インナー幅でオートフィット)
長大縦長サイズ単体(サイズ編集なし、ブラウザ高さ85%でオートフィット)
h1 あいうえお12345ABC
h2 あいうえお12345ABC
h3 大見出し あいうえお12345ABC
h4 中見出し あいうえお12345ABC
h5 小見出し あいうえお12345ABC
標準 あいうえお12345ABC
太字 あいうえお12345ABC
斜体 あいうえお12345ABC
打消 あいうえお12345ABC
アンダーライン あいうえお12345ABC
85% あいうえお12345ABC (スマホでのレスポンシブ表示サイズ)
90% あいうえお12345ABC (タブレットでのレスポンシブ表示サイズ)
100% あいうえお12345ABC
150% あいうえお12345ABC
200% あいうえお12345ABC
引用あいうえお12345ABC
- 箇条書きA
- 箇条書きB
- 番号つきリスト
- 番号つきリスト
以上、主要タグのサンプルです。
別途、拡張機能が追加できます。
このテーマはデフォルトのCSSのみでカード型およびカラムのレスポンシブを実現しております。
@mediaのCSSにて判定、適正値を割り出しておりますが、CSSではデバイス幅を無段階で判定、実装できない為、若干ヌルヌル感的なレスポンシブになってません。
そのヌルヌル感をjavascriptを追加して補う拡張機能です。
そこまでブログ記事の一覧にこだわる必要があるのか!ってのありますので
この拡張機能は特に必要ないと思いますが、お好みでお使い下さい。
機能説明
①カード幅の下限基準値が設定できるようになる。
javascriptの設定値(220)を変更しますと、カードをワイドにしたり、逆に細くしたりできます。440にするとカード幅が倍で展開されます。
デバイス幅でなくブログ内の実際のインナーフレーム幅にて無段階に適正値を演算させ、より精密な動作になります。ヌルヌル感が若干、若干アップしますw
②カード間の隙間が設定できるようになる。
javascriptの設定値(12)を変更すると、横方向のカード間の隙間が変わります。24にすると、おおよそ倍の隙間を空けてカードが並びます。隙間が大きいほど、フォーカスした時のFlexGrow効果が現れやすくなります。隙間を減ら減らしたい場合は、値を小さくします。
※あまり大きい値を設定しないで下さい(max.30~40ぐらい、30以下推奨)
③ランダムでカード幅を決定し、並べる一覧モード
javascriptの設定値(0)を(1)変更すると、カードの幅をランダムに決定、可能な限り横並びで押し込んでいきます。ランダムモードを使用する場合、合わせて①のカード幅を300ぐらいに増やしておいて下さい。極端に小さな幅のカードの発生を抑えれます。
この機能を使ってるブログはこちらです。
④ヘッダ画像をブログ記事画像と動的に差し替える演出。
ブログ記事を表示した時、記事に掲載されている先頭の写真画像をブログのヘッダ画像へ差し替えセットします。Coverモード50%50%にて表示します。
⑤ナビメニュー簡単管理
ブログヘッダ画像下に置くメニューについて、デザイン設定のサイドバーモジュールで追加されたリンクモジュールの内容にてナビメニュー化します。
サイドバーに任意でデザイン設定できるリンクモジュールを自動的にメニュー化して、ブログヘッダ画像下へナビメニューとして展開される機能です。
この機能より、HTMLタグの知識が無い方でも、容易にナビメニューの構築が出来るのではないかと思われます。
デザイン設定のヘッダに<div id="navflexphoto"></div>これだけ追加すれば完了です。あとはサイドバーのリンクモジュール内の設定するだけで、その内容が自動的にナビメニュー化され、ヘッダ画像直下に展開されます。
同様にカテゴリーモジュールも自動でナビ化できます。<div id="cateflexphoto"></div>こちらをデザイン設定のヘッダに追加します。
※①②③の機能に関して、タブレット、スマフォでは、javascriptが作動するしないのトラブルが多いので、この機能はPC専用とさせて頂きます。動作確認を終え次第、①②③をタブレット、スマフォでも作動するようにしますので、お待ち下さい。
対応しました。全機能、全デバイスで使用可能になりました。たぶんw