Bloggerでサマリー表示をタイル形式（ネットショップ風）にする①

Bloggerでタイル構造サマリーを構築することも可能です。

サマリー幅を記事の投稿枠の幅の約３分の１程度にしてやり、以前記載したサマリーで設定したmax-resultsをタイル数（３列ｘ３行＝９）に修正します。
同様に、サイドバーのラベルメニューやページナビゲーションでも使用していれば適宜修正し、新しいスクリプトを実装することで動作します。

新機能と注意点

• タイトルクリック以外に、サムネイル画像をクリックしても記事ページへジャンプするようになっています。
• createSummary関数の呼出し時に、引数でサムネイル画像枠とサイズ、記事文字数（＆画像なし時）を指定可能
• サマリー化した時の属性classの名称を区別し、タイトル部を含めたので記事とサマリーでCSSを個別指定可能
• サムネイル画像とサマリー文章は縦配置を想定していますので、横配置ではレイアウトが崩れる場合があります。

ネットショップImage

参考サイト：ハイパーハンズWebショップのサイトイメージは下に示します。

ハイパーハンズWebショップ

実際にご覧になって動作を確かめてみるには、こちら

Webショップ以外にもタイル形式でサマリー表示に合いそうな、写真や画像メインのサイトも同様に作れます。
※　カテゴリー（ラベル）のタイル表示部は、手作業で作った部分なのでサマリースクリプトに関連はありません。


ソースコードは、次回に公開致します。

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

ShoppingCart

サマリー表示