1. HOME
  2. ブログ
  3. 【Blogger】追加、変更、修正【Vaster】

【Blogger】追加、変更、修正【Vaster】

投稿日 2016/05/20

なんか数日前からVasterのページナビゲーションが使えなくなっているらしいですね
スクリプト元が404になっています
消したのか、消されたのか、どうなんでしょう

さて、カスタマイズというほど大袈裟なものでもないですが、少しだけ書いておきます
※ Vasterのバージョンは1.9です

テーブル（表）
せっかくテンプレートをレスポンシブデザインに変えたので、記事中にあるテーブルもレスポンシブデザインに対応させました
このブログの記事ではスペック表など2セルのテーブルばかりなので見せ方をどうするか考えたら、こうするのが自然かなと思いました

【Blogger】追加、変更、修正【Vaster】_1

【サンプル】ブレイクポイントは768pxです

あいうえお かきくけこ
さしすせそ たちつてと
なにぬねの はひふへほ
abc def
ghi jkl
mno こんな感じ

2セル以上のテーブルの場合など参考になります
-> CSSで出来るレスポンシブ対応を考えた table レイアウト | ホームページ制作│大阪│株式会社ユニオンネット

CSSのスペルミスを修正
PCやモバイルの他のブラウザではちゃんと表示されているのですが、IE（IE11）で見ると投稿記事の下にある「前の投稿」の位置が本来なら左端に配置されないといけないのが、真ん中になっています
確認するとCSSが反映されていません

【Blogger】追加、変更、修正【Vaster】_2

原因は単純にスペルミスです
正しくは「l」のところが「r」になっているので、これを修正

【Blogger】追加、変更、修正【Vaster】_3

【Blogger】追加、変更、修正【Vaster】_4

エラーページを追加
Blogger設定のエラーページ(404ページ)がVasterでは機能しないのでテンプレートに直接記述を追加しました

【Blogger】追加、変更、修正【Vaster】_5

こんな感じで表示されます
【Blogger】追加、変更、修正【Vaster】_6

object-fitを使う
Vasterでは画像のサムネイルが枠内からはみ出る画像は枠内に収まるように比率が変化して見た目が圧縮された感じで表示されます
これはスクリプト側の仕様でそうなっていると思われるので本来ならどうしようもないことなのですが、CSS3には「object-fit」という画像の比率をCSSで設定できるプロパティが用意されています
とても便利なのですが、IE/Edgeが対応していないという弱点があります
このため実用的と言うには今はまだ微妙なので使用する場合は注意したほうがいいです
早くIE/Edgeが対応するといいですね

このブログでは関連記事のサムネイルのCSSに追加しています
値は「cover」枠内からはみ出る画像はトリミングされ画像の比率を保ったまま表示します
他の値について知りたい場合はググってくださいな
/* 関連記事
------------------------------- */
#related-posts .related_img {
margin:5px;
border:2px solid #f2f2f2;
object-fit: cover; /* 追加 */
width:120px;
height:120px;
transition:all 300ms ease-in-out;
border-radius: 5px;
}

/* 関連記事 レスポンシブデザイン
------------------------------- */
#related-posts .related_img{
object-fit: cover; /* 追加 */
width:120px;
height:120px;
}

TOP