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

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

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

新機能と注意点

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

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

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

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


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

コメント(1)

hyperhands さんのコメント...

タイル表示数の誤植12→9
参考サイトへのリンクミス修正しました。

コメントを投稿

関連記事
Blogger
ShoppingCart
サマリー表示