その9：カッコ良すぎるBlogger最強の有料テンプレートGeek Pressを使い倒す

おすすめ記事ピックアップ

Geek Pressの記事を書き続けてから、アクセスが落ちてきているのですが、前回（http://www.furimuke.com/2014/05/8bloggergeek-press.html）に続き、日本語表示の調整をしてゆきたいと思います。

ちょっとその前に、私よりGeek Pressを使い倒しまくっている方がいました。CSSの変更でここまで出来るんですね。すごい！参考にどうぞ。

http://blog.nagiko.me/

さて、投稿サムネイルの本文引用のところは、こんなように見切れていると思います。これを修正します。この部分のCSSを見てみます。margin部分の調整して、見切れないようにします。

.post-archive .inner .post-body-snippet {
font-size: 14px;
margin: 10px 0 0 0;
}

こんな初期設定になっています。黄色の10px部分を丁度良い数値に変更します。ブラウザーで、Chromeの「要素を検証」で確認して調整すると分かりやすいでしょう。

適当に37pxが良さそうです。

.post-archive .inner .post-body-snippet {
font-size: 14px;
margin: 37px 0 0 0;
}

テンプレートに入って「.post-archive .inner .post-body-snippet」で検索しましょう。330行ぐらいに対象のCSSが出てくると思います。marginを37に設定して完了です。

この設定は大雑把に、多くの場合はズレない設定です。見出しが3行になるとズレたりします。フォントのサイズや種類によっても、ズレ具合は変わります。

どうしても、このズレが許せない場合は、本文の引用を削除する方法もあります。本文の引用を表示しているのは、この部分です。

   <p CLASS='post-body-snippet'><data:post.snippet/></p>

テンプレートで検索すると、3000行目ぐらいにあります。黄色い部分のpost.snippetを削除します。

こんな感じに。

スッキリしました。引用文章が無いので、もうズレる心配もありません。

スライド部分もズレます。この部分は、表示文字数を指定できますので、その機能を使いましょう。

この黄色い部分を例えば60とかに変更しましょう。

var SUMMARY_LEN = 150;// length of summary for feed data

3700行ぐらいに設定する部分が出てきます。

var SUMMARY_LEN = 60;// length of summary for feed data

はい、すっきりしました。

投稿記事の部分もどこかに、lengthを指定する設定（100文字で省略される設定になっている）があるはずですが、探しても見つけられませんでした。たぶんBlogger独自の仕様なのかなと思いつつ。何か方法がありそうな気がします。



次回に続く。
http://www.furimuke.com/2014/05/10bloggergeek-press.html



「Geek Press」は20＄の有料テンプレートです。購入すれば、ずーっと使えます。Live Previewを押せば動くデモみれます。
Geek Press - Responsive News & Magazine Template