Blogger日本語テンプレート「Vaster」を導入。画像のはみ出しにとまどう。

Bloggerの「シンプルテンプレート」になんか飽きてきたので探していると‥自分好みのいいのがありました!
 
 トーマスイッチのトーマスさんという方が公開している日本語テンプレート。
 

シンプルなBlogger日本語テンプレート「Vaster」を作ったので公開していく

世の中には凄い人がいますね。尊敬します。

 

「Vaster」の最も気にいったポイント

 

Vaster」では、既存のテンプレートと比べて、以下の5つにおいて、優れた性能を持っています。

  • SEOの最適化
  • 欲しかった機能を全て搭載
  • カスタマイズ前提のシンプルなデザイン
  • レスポンシブデザイン対応
  • 簡単にアドセンスの配置を最適化
 

その他、数えあげたら話が長くなるので。簡単に言うと‥全部!!ですね。

 
見た目がシンプルで、とにかくかっこいいんです。
 
で、Vasterを導入してみたところ、早速困った問題が……
 

PCでは普通に見れるんだけど、iPhoneで記事ページを見てみると、なんかおかしいんですよね。
 
画面を左右にフリックすると…
 
 
bloggerブログの記事ページ
 
左にグレーなゾーンが出てきた ⁈ (◎_◎;)
 
な、なんじゃこりゃ??
 
blogger記事ページを説明
 
右にもグレーなゾーンが。枠のバランスもヘンだし画像(写真)も右にはみ出してます……
 
 
「 なんじゃこりゃー?!画面がガクガク横スクロールしまくって見づらくてたまらんわぁ!」
 
レスポンシブデザインてこんなになるの??初心者の私にはもう訳がわかりません。
 
これじゃぁせっかくブログを見に来てくれたお客さんが速攻で帰ってしまいますよね。← 自分だったら帰ります。
 
けど、もう「シンプルテンプレート」に戻るのはイヤだ!ということでいろいろと調べてみました。
 
 

2時間後…

わかりません。なぜ、画面がガクガクするのかがぜんっぜんわかりましぇん!!調べたけどコレといった有力な情報が出てきませんでした。
 
さて、どうするかと。こりゃあ困ったなと。いちどHTMLをじっくり見てみる事にしました。
 
 
blogger日本語テンプレートvasterのHTMLの画像
 テンプレート → HTMLの編集 → 行番号20の横にある黒い三角を押すと隠れた部分 ( CSS ) がズラッと出てきます。
 
エリアごとに日本語で書かれています。これはめっちゃ探しやすいですね ♪
 
blogger vaster cssの画像
 
で、上から順番に見ていくと記事ページという所がありました。ここ怪しいなと…(p_-)
 

『 記事内の画像をはみ出させない 』

 
ん?ここじゃないですかね ⁈ 画像のはみ出しはここイジれば治りそうな感じ??
 
max-width:100%のところを90%
 
変更して保存しました。iPhoneで、記事ページを確認してみると・・・
 
vasterにて画像がきれいに収まった写真
 
画像が枠からはみ出ずに、いい感じに収まりました!よかったー ♪ 試しに画面を左右にフリック!フリック!
 
グ、グレーなゾーンが出てこないぞ ⁉︎ 横ガクガクも直ってるぅー!(;▽;)
 
よしっ!これで快適に見てもらえるぞと。一件落着です。ε-(´∀`; )
 
どうやら画像のはみ出しが、横ガクガクの原因?だったようですね。
 
あー……腹へったー。( 笑 )
 
 
スポンサーリンク

「Vaster」を使ってみて

欲しかった機能のアレやコレがほぼ入っていて、HTML.CSSも日本語の説明付きだから初心者でもどこに何があるかが判りやすいです。

そして、非常にイジリやすいし、カスタムしやすくてGOODです。

良いテンプレートに出会えました。 ありがとうございます!トーマスさん。
 
ランキング参加中です。ぽちっと応援していただけると嬉しいです☆
にほんブログ村 地域生活(街) 四国ブログへ
RELATED関連する記事

スポンサーリンク
スポンサーリンク
▼この記事を今すぐSNSでシェアする
▼SNSで更新情報をうけとる