by echo  

スーパー超シンプルテンプレートのトップページなどの一覧表示ページをグリッドタイプに変更するスタイルシートです。

masonry などの jQuery で簡単にできるかと思ったら意外と大変だったのでスタイルだけで対応しました。

スタイルを1行貼りかえるだけで簡単に変更できます。

[アイキャッチ画像:300px × 168px, float left]

テーマ切り替えのデモンストレーション

一覧ページ(記事ページ以外のページ)の表示形式を標準的なブログ形式とグリッド形式の2種類から選択できるようにしました。

デモを準備したので下のリンクからテーマを選択してから表示を確認してください。選択した表示形式はクッキーに保存されます。

1. 画面上のメニューから「テーマ」を選択、2. サイドバーの「初めての方へ」から選択のいずれかで表示を戻してください。

なお表示の切り替えはテンプレート紹介のためのデモ機能です。適用時にどちらかのテーマを選択してください。

変更するテーマは記事ページには影響しません。

グリッド表示用スタイルシート

テーマの選択機能はスーパー超シンプルテンプレート Ver.1.01の差分ファイルで対応しています。現在ダウンロードできる SuperSimple Ver.1.0 にはアップデートファイルが含まれていますが、こちらから差分ファイルだけのダウンロードもできます。
» SuperSimple Ver.1.01差分ファイルダウンロード

トップページ、カテゴリページ、過去ログページ、タグページの一覧表示形式のページのスタイルは、ページをif条件で分岐するため CSSではなく HTML上 の head 内に直接 style として定義されています。

このスタイルを差し替えるだけで、グリッドタイプの一覧形式に変更できます。グリッドタイプが適用されるのはデスクトップ表示の1024px以上です。

<!-- 既存スタイルをコメントアウト start
<% if:page_name ne 'article' -%><style>
@media screen and (min-width: 0) and (max-width: 480px){
.post-body img{width:auto\9;width:100%!important;max-width:100%;height:auto!important;margin:0!important}
}
@media screen and (min-width: 481px){
.post-body img{width:50%!important;max-width:100%;height:auto!important;float:left!important;margin:0 2em 1em 0!important}
}
</style><% /if -%>
コメントアウト end -->

<!-- グリッドタイプスタイル -->
<% if:page_name ne 'article' -%><style>
@media screen and (min-width: 1024px){
#main-wrapper{padding:0}
.main-outer{clear:none;padding:0;margin:0 10px;width:320px;height:700px;max-height:800px;float:left;overflow:hidden}
.eyecatch{width:100%}
.floatleft,.floatright{float:none;margin:0}
}
</style><% /if -%>

直ぐに戻せるよう既存スタイルはコメントアウトをおススメします。

カスタマイズのヒント

masonry などの jQuery を使わずに単にスタイルだけでグリッドっぽく見せているだけです。float で並べていますが、ある条件下でグリッドスペースがぽっかり空ができてしまう。そのため記事ごとのグリッドの高さを固定しています。

それが太字の height:700px;max-height:800px です。

1.一覧に表示する本文の文字数、2.実際に本文へ入力されている文字数、3.フォントサイズ。この3点によって height と max-height の値を調整してください。

「1.一覧に表示する本文の文字数」はコンテンツ記事HTMLの以下の部分です。

<div class="post-body"><div class="articleBody" itemprop="description"><% article.body | bodyfilter(article_info,blog) | text_summary(120) %>

120文字を変更することにより、height 700px では[続きを読む]が見切れたり、余白が大きすぎたり。うまく調整してください。

コメント

0 件
コメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

トラックバック

0 件
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/418976555
※言及リンクのないトラックバックは受信されません。

スポンサーリンク