Bloggerでタイル構造サマリーを構築することも可能です。
サマリー幅を記事の投稿枠の幅の約3分の1程度にしてやり、以前記載したサマリーで設定したmax-resultsをタイル数(3列x3行=9)に修正します。
同様に、サイドバーのラベルメニューやページナビゲーションでも使用していれば適宜修正し、新しいスクリプトを実装することで動作します。
実際にご覧になって動作を確かめてみるには、こちら
Webショップ以外にもタイル形式でサマリー表示に合いそうな、写真や画像メインのサイトも同様に作れます。
※ カテゴリー(ラベル)のタイル表示部は、手作業で作った部分なのでサマリースクリプトに関連はありません。
ソースコードは、次回に公開致します。
サマリー幅を記事の投稿枠の幅の約3分の1程度にしてやり、以前記載したサマリーで設定したmax-resultsをタイル数(3列x3行=9)に修正します。
同様に、サイドバーのラベルメニューやページナビゲーションでも使用していれば適宜修正し、新しいスクリプトを実装することで動作します。
新機能と注意点
- タイトルクリック以外に、サムネイル画像をクリックしても記事ページへジャンプするようになっています。
- createSummary関数の呼出し時に、引数でサムネイル画像枠とサイズ、記事文字数(&画像なし時)を指定可能
- サマリー化した時の属性classの名称を区別し、タイトル部を含めたので記事とサマリーでCSSを個別指定可能
- サムネイル画像とサマリー文章は縦配置を想定していますので、横配置ではレイアウトが崩れる場合があります。
ネットショップImage
参考サイト:ハイパーハンズWebショップのサイトイメージは下に示します。
ハイパーハンズWebショップ
Webショップ以外にもタイル形式でサマリー表示に合いそうな、写真や画像メインのサイトも同様に作れます。
※ カテゴリー(ラベル)のタイル表示部は、手作業で作った部分なのでサマリースクリプトに関連はありません。
ソースコードは、次回に公開致します。
関連記事
Blogger
ShoppingCart
サマリー表示
コメント(1)
タイル表示数の誤植12→9
参考サイトへのリンクミス修正しました。
コメントを投稿