Bloggerのテンプレートのカスタマイズ

6/18/2015 ,

今年はちょっとGoogleが推奨するいろいろ…を頑張ってみようか…！と決意し始まった2015年。まずは「Googleの検索にちょっとくらいプラス効果があるのでは？？」的なことを見聞きしたよーな気がする「Blogger」でブログを作成！

Blogger

…とわいえ、半年以上経たないと検索にはヒットしないのは同じだと思うので、気長にゆる～くやろう♪とOP後記事を大量考案することなくゆっくり更新中。




で、まずは数点記事を書き、実機確認をしたところ、タブレットに対応してなくてガッカリ(-＿-;) ※スマホは他のフリーブログさん同様全く違うスタイルが準備され、それも文字サイズ調整などがされてなくて（他社サービス同様）めちゃめちゃダサい見栄えでしたが、タブレットではなぜかPC版が表示され、更に見にくい状況でした。



右側スマホ版の表示もダサすぎて、もぉ突っ込む気もなりませんでしたが、タブレットに関しては、PC版が出るのが好きじゃないので、見る度にストレスでした。

（左）タブレット版　　（右）スマホ版
Bloggerのテンプレート変更



しかし、半年ほど経った頃、やっぱ見栄え悪〜〜〜い！ヾ(≧へ≦)〃と思い、試しに検索。
で、カスタマイズするか、テンプレートを探して変えるか…　の方法があることが分かり、カスタマイズ決意。



テンプレート探しはそれほど頑張らず、最初に見つけたものを採用。
英語のテンプレートな為、いくつかの場所のスタイルを無理やり変更！
※font-familyを変えたり、PC、TAB、SPでのタイトルサイズを変えたり… と、最低限のことをしただけで終了。

Bloggerのテンプレート変更



おかげで、これまで不満だったタブレット（縦）での表示もまぁまぁ…（左）
スマホでの表示（右）は、画像のサイズが250pxに指定されていた為、画像の右側に文字が残ってダサい状態だったのですが、これに手を加えると、中の記事にまで影響が出たので、こちらは断念。画像は％で指定してもらわないと困りますね…(-＿-;)

Bloggerのテンプレート変更

スマホに新テンプレートを反映させる為には、モバイル テンプレートを選択… で「いいえ」を選ぶ必要があります。これをやらずにいると、いつまでもダサい（何年前の手法？って感じの）他社サービス同様のデザインのままになるようです。
▷ ひとり旅。が好きな女のブログ （更に別のテンプレートでカスタマイズしました）


…ってことで、あらゆることが難しくてこれまで避けて来たGoogleさんのサービスですが、これに関しては簡単でした。


▼ただし、私の場合、画像がはみ出てる記事がいくつかあったので、画像に「width:100%;」を追加し、 スマホ＆タブレットで確認していく… という作業が発生。ちょっと面倒くさいことになりました(-＿-;)

▼翌週職場の10インチTABで確認したところ、縦でPCと同じレイアウトが表示されててガッカリ…(-＿-;)
メディアクエリを追加しないとダメなようですね。。。
あと、大嫌いなiphoneで、画像のはみ出しを確認。ほんと、面倒くさいiphone。早く古いの消えてほしい…