Google のBloggerは広告がないということと、容量の制限が無いということで選びましたが 「ここがこうなればなぁ」と思うと、どうにかしたくなるものです。 いじり甲斐のあるBloggerらしいです。 海外では人気なんですね。 というわけで、少しずつカスタマイズしてきました。 知らないことばかりです。
最初にお断り
私個人の備忘録です。解説記事ではありません。 こちらのサイトなどはいかがでしょうか。テンプレート
トーマスさんが公開されている Vaster2 レスポンシブ対応済みのblogger日本語テンプレートを使いました。 素晴らしいです。 既に別のサイト（秩父ロータリークラブ）で使ってみていたのですが、海外モノのテンプレートよりカスタマイズし易いですね。トップページの一覧写真が気に入らない
アイキャッチ画像というのでしょうか、縦型の写真の場合、写真が横長に伸ばされて表示されるため、かっこ悪いのがなんとかならないものかと、ずっと思案してしまいました。
などを試したのですが思ったようにならず時間が過ぎてしまいました。 しかし見つけました、簡単な方法を。 プロの方ならご存知なんでしょうけど、素人って時間がかかるんですよね。 テンプレート中の最初の方にある .article-list img リストに1行加えるだけでOKでした。
.article-list img{
float:left;
width:300px;
height:185px;
padding-right:20px;
object-fit: contain; <--- この1行を追加する
}
これだけでトップページ記事一覧の画像の縦横比が落ち着く
containの他にcoverとすると横いっぱいで上側のみ切り取られる
中央以外の位置でトリミングしたい時は object-position プロパティーを使用する
詳しくは こちら を御覧下さい。
Chromeではうまく表示されるのですがIEだとダメみたいです
トップページの内容の一部を表示したくない
かなり後ろの方にある この3行を コメントアウトすれば表示されなくなります
<!--公開日を表示-->
<p class='snippet'>
<data:post.snippet/>
</p>
「公開日を表示」というコメントのすぐ下なので、これで検索すればすぐにたどり着けると思います。
とりあえず、また カスタマイズは続けますので、報告します。
0 件のコメント :
コメントを投稿