ときどきお手伝いしているネットショップの方の話によると、売上の7割ほどがスマホからになった、とか。。 そういえば、最近更新できてないGIFアニメサイト（管理はしてます）のアクセス解析を見てもiPhoneやiPad、Androidなどが増加中。
でもって、サイトもブログもバリバリの旧来PC向けだったので今流行り？（必然？）の「レスポンシブ」デザインに勉強も兼ねて挑戦！！
サイトの方は、いろいろなテンプレートとか探してみたのですが、やはりデザインは自分の作った素材を使いたい！という我儘で、ToMoToさんのWeb制作実験「2段組み-左コンテンツ・右サイドバー」を使わせてもらいました。 ホントに枠組みだけなんですが、レスポンシブのCSSがありがたい！ ページ数は多いけど、GIFアニメ配布サイトという性格上、トップページ以外のフォームは大体同じなので、わりとスムーズに移行できました。 といってもCSSは習ったことなどないわけで、あちこちのサイトで知恵をお借りしました。 自分の作った素材を使うこともできて、単純な仕様ですがなんとかかんとか完成しました☆
今度はこちらのブログ… これがなかなか手ごわい。。 Bloggerは広告が出ない！という利点だけで引っ越してきて、「Blogger Template」からテンプレートを選んで使わせてもらってたのですが、そのころはまだレスポンシブなど知らなかった時代。。
で、また「Blogger Template」でResponsiveで探してみたけど、まだまだ少ないし、レスポンシブになってないのもまざってるし＼(-o-)／ 外国製はカスタマイズが結構難しい…
で、今は結構使ってらっしゃる方も多いみたいな「トーマスイッチ」さんの「Vaster」☆
わかりやすくCSSを書いてくださってるのですが、やはりコチラの頭の脳みそが足らないわけで四苦八苦してしまいました。 一応出来たのかな？ ココでも自作の素材を使ってます。
どこのテンプレートも「画像」ありき、なんですよね～～
私は画像をアップする気なし！ 「続きを読む」大嫌い！な絶滅危惧種なもんで、画像表示の場所を取り除くのに苦労するわけで。
Vasterの場合もトップページの画像の部分をとりのぞかせてもらいました。
CSSを説明付きでわかりやすく書いてくださってるので、ど素人でもなんとか探せました。
/* トップページ、カテゴリ、アーカイブの記事一覧 の
.article-list img{
float:left;
width:150px;
height:150px;
を削除して、
.article-list-title{
padding-left:160px;
の padding-left: を 20pxくらいにして、タイトルのみ表示にしました。
これでOKと思いきや、スマホでみると、大きな NO IMAGE が！
/* レスポンシブデザイン の
.article-thumbnail img{
float:none;
width:100%;
height:auto;
を削除して、一応完成したつもりです。
って、こんな情報のいるブロガーはいないか…
もっともっと自分でカスタマイズしたい！って方には「足を伸ばして万事休す」のテンプレートはいかがでしょうか。
でもって、サイトもブログもバリバリの旧来PC向けだったので今流行り？（必然？）の「レスポンシブ」デザインに勉強も兼ねて挑戦！！
サイトの方は、いろいろなテンプレートとか探してみたのですが、やはりデザインは自分の作った素材を使いたい！という我儘で、ToMoToさんのWeb制作実験「2段組み-左コンテンツ・右サイドバー」を使わせてもらいました。 ホントに枠組みだけなんですが、レスポンシブのCSSがありがたい！ ページ数は多いけど、GIFアニメ配布サイトという性格上、トップページ以外のフォームは大体同じなので、わりとスムーズに移行できました。 といってもCSSは習ったことなどないわけで、あちこちのサイトで知恵をお借りしました。 自分の作った素材を使うこともできて、単純な仕様ですがなんとかかんとか完成しました☆
今度はこちらのブログ… これがなかなか手ごわい。。 Bloggerは広告が出ない！という利点だけで引っ越してきて、「Blogger Template」からテンプレートを選んで使わせてもらってたのですが、そのころはまだレスポンシブなど知らなかった時代。。
で、また「Blogger Template」でResponsiveで探してみたけど、まだまだ少ないし、レスポンシブになってないのもまざってるし＼(-o-)／ 外国製はカスタマイズが結構難しい…
で、今は結構使ってらっしゃる方も多いみたいな「トーマスイッチ」さんの「Vaster」☆
わかりやすくCSSを書いてくださってるのですが、やはりコチラの頭の脳みそが足らないわけで四苦八苦してしまいました。 一応出来たのかな？ ココでも自作の素材を使ってます。
どこのテンプレートも「画像」ありき、なんですよね～～
私は画像をアップする気なし！ 「続きを読む」大嫌い！な絶滅危惧種なもんで、画像表示の場所を取り除くのに苦労するわけで。
Vasterの場合もトップページの画像の部分をとりのぞかせてもらいました。
CSSを説明付きでわかりやすく書いてくださってるので、ど素人でもなんとか探せました。
/* トップページ、カテゴリ、アーカイブの記事一覧 の
.article-list img{
float:left;
width:150px;
height:150px;
を削除して、
.article-list-title{
padding-left:160px;
の padding-left: を 20pxくらいにして、タイトルのみ表示にしました。
これでOKと思いきや、スマホでみると、大きな NO IMAGE が！
/* レスポンシブデザイン の
.article-thumbnail img{
float:none;
width:100%;
height:auto;
を削除して、一応完成したつもりです。
って、こんな情報のいるブロガーはいないか…
もっともっと自分でカスタマイズしたい！って方には「足を伸ばして万事休す」のテンプレートはいかがでしょうか。
