【stinger3】モバイル(スマホ)版カスタムをやってみて

      2014/08/30

                  

                              

ウェブ担当とは名ばかりのミツロックです。しばらくブログを書いておりませんでしたが、モバイル版をいじくってみて気になったことを書いておこうと思います。

モバイル版カスタマイズの注意点

似ている(同じ)クラスがある

・記事画面(single.php)の横幅の余白調整などを行う時にいじくるのが.kizi、カテゴリ一覧ページの抜粋記事部分にも同じ.kiziが使われているので気がつかないと、あっち直したらこっち崩れるというシーソーのような状況に(笑)
当たり前の事かもしれませんが、僕はPCの#mainを3つに分岐させていることでややパニックになりました。
分けたい場合の対処法としましては、

 

・#mainをモバイル版も分岐させておく
Stingerカスタマイズ!導入直後の下準備、まずはじめにこれをやろう!「#mainを分岐する」

 

・.kiziを分岐させる
PCとスマホで見た目のデザインを変える[Stingerカスタマイズ]

 

今回、僕がやったのはモバイル版とPC版の表示方法を変えるコードでsingle.phpをいじくりまして、お好きな方のクラスを「.kizi」ではなく「.kizi-single」(名前はなんでも)にしてcssでいじくるようにしました。といってもメインの分岐はすでにやっているので両方使っていますが。
ちなみに、single.phpのどこを囲むの?って事になると僕は全く分かりませんが(笑)
分かる人でしたら、必要最低限の部分を分岐させればいいと思いますが・・・大は小を兼ねるですよ!!!僕は全部囲みました。
これはもっともっといい方法があると思うので参考にするのはやめたほうがいいと思いますが、全く知識のない僕でもやればそれなりにできたというお話です(笑)

 

PCとスマホで見た目のデザインを変える[Stingerカスタマイズ]

 

キンタマケルナ

・これが最後まで考えておりました。「.post .kizi」と「.post.kizi」
これはもう「キンタ負けるな」「金玉蹴るな」・・・あの有名なキンタの大冒険レベルです。スペースがあるかどうかですよね。
いつの間にか、半角スペース入れちゃったからレイアウトが崩れたとスペース部分を修正しますと直ります。で、他のページをチェックしてると崩れてる箇所を発見!調べると余白がいることに気付き、余白を入れます。以後繰り返しのため略。
3回くらいやってようやく違和感を感じました。※あくまでも違和感です。
5回目くらいであれさっきいじくったよな?ってなります。トランプゲームの神経衰弱のあれです。

 

「.post .kizi」・・・カテゴリ別一覧ページ(上記記載)の方の抜粋記事部分に使われております。

 

「.post.kizi」・・・トップ(ホーム)画面の抜粋記事一覧をまとめているクラスっていうんですかね。

 

先ほども言っておりますが、そもそも、#mainを分岐させていればこの2つの注意点は#main1と#main2(名前は任意)で分かれているので考える必要がないわけです。
参考にさせていただいたサイトの先生が、

カスタマイズに凝ってくるとトップページだけ別の色にしたり、記事と記事の間に隙間を開けたりといろいろしたくなってきます。そんなときすべてが同じ「#main」で管理されていると個別に変更することができないんです。

Stingerカスタマイズ!導入直後の下準備、まずはじめにこれをやろう!「#mainを分岐する」

僕はcssなど全く分からないので、なんで分けるの?と思いながらも記事の読みやすさなどもあり、とりあえずやっておいたんです。まさかここでその意味を知ることになるとは・・・。モバイル版をいじくるのであれば、モバイル版も分けちゃっていいと思います。

 

 

もう少しでモバイル版もスティンガーでいけそうな感じになってきましたが、最後の最後に「グローバルナビのカスタム」という難題が・・・。皆さんおしゃれな感じになっているのですが、僕はPC版のような隠れたり落ちたりしてこない普通のやつがいいんですが・・・今のところ全く分かっておりません。

 

 

当サイトのモバイル版の最終イメージとしては・・・

PC表示のサイドバーない感じ。なんだか言葉にするととても簡単ですね。なのにこんなに苦労するとは・・・。単純にモバイル版への切り替えスイッチをなくしちゃえばいいんですよねきっと。

でも、どこをどういじくればいいのか分からないのです。

 

皆さんもカスタムは計画的に!

担当 : ウェブ担当他

趣味 : モノ作り・競馬

LDS designs


「名ばかりの」ウェブ担当ミツロックでございます。

アロマンシェスをご利用してくださるお客様が笑顔でいてくれればなぁと思います。

もちろん、スタッフもセラピストもです。


趣味以上、仕事未満であるアクセサリーも宣伝させてもらいます(笑)

アロマンシェスともども宜しくお願いします。

 - CUSTOM, ミツロック