はてなブログの新しい機能、固定ページの利用方法で思いついた事

親ブログの写真はサムネイル中心、オリジナルは固定ページで

親ブログで使用した写真素材を固定ページでギャラリー化して写真のみ掲載する。

これにより親ブログでは写真をサムネイル程度にし、文書スペースが確保し易くなる

 

親ブログは文書中心のスタイルとなり

後で写真はギャラリーでじっくり見ればいい訳で

親ブログもコンパクトにできるんじゃねって思った訳です。

特に写真が多い記事とか、滝のような長~いページにならずに済みます。

 

プロトタイプです。

サムネイルは3カラム並べれるサイズがいいでしょうか

文書の中に写真がところどころ挟まっている訳です

大きいと文書とのレイアウトバランスが悪く

小さいと写真も見てもらいたい気がしてくるし1点1点写真クリックするのもアレなんで

ギャラリー化した固定ページにて後で、じっくり見てね!まずは記事を見て下さいスタイルです。

 

サムネイルにCSSで機能を実装

・サムネイルはObject-Fit: Coverで表示、中央フィット

・ひとことコメントが添付できる

・フォーカスすると、ギャラリーへのメニューが出る

・フォーカス後、サムネイルをObject-Fit: CoverからContainへ切替、全体表示

・class hatena-fotolifeは継承して、サムネイルをクリックした場合の表示は同じ

  • 案A 固定ページに本体設置

    17/05/12 ポートタワー夜景 蓮側から撮影

    ギャラリーへ

  • 案B サブブログに本体設置

    17/05/12 メリケンパークスタバ オープン直前を撮影

    ギャラリーへ

  • 縦長画像

    フォーカスでObject-Fit: CoverからContainへ切替

    ギャラリーへ

そして記事の最後に「このブログ記事の写真ギャラリーへ」っていう固定ページのリンクを貼ればいいと思います。

( 以下がその固定ページのギャラリーサンプルです)

tommyoctopas.hatenablog.com

 

 

あと固定ページのギャラリーがいくつか出来てくる訳ですが

それをすべて束ねる固定ページのギャラリートップを設ければ、ブログで使用した全写真素材をアルバム化したトップページも出来きる訳です。

 一度、テスト的に、次の写真関係のブログは、このスタイルでやってみます。

 

あと応用として単独のフォトギャラリーを固定ページに構築する

サンプルです。

tommyoctopas.hatenablog.com