「meta viewportﾀｸﾞ」「@mediaｸｴﾘ」
【ｽﾀｲﾙｼｰﾄで、PC用とｽﾏﾎ用CSSを切り替える】
本ｳｪﾌﾞｻｲﾄは、MovableTypeの付属ﾃｰﾏのﾃﾝﾌﾟﾚｰﾄをｶｽﾀﾏｲｽﾞしてPC表示していますが、ｽﾏｰﾄﾌｫﾝが主流となった昨今、PC表示だけでは時代遅れとなってしまいました。
以前から何とかしたいという気持ちはあったのですが、ｽﾏｰﾄﾌｫﾝにもPCにも対応する「ﾚｽﾎﾟﾝｼﾌﾞWEBﾃﾞｻﾞｲﾝ」は、どうにも敷居が高く手付かずのままでした。
新型ｺﾛﾅｳｨﾙｽの影響でDXﾍﾟﾃﾞｨｼｮﾝがなくなり記事ﾈﾀもないので、ｽﾏｰﾄﾌｫﾝ対応のためにようやく重い腰を上げます。
ｽﾏｰﾄﾌｫﾝでPC用ﾚｲｱｳﾄを表示してみても見にくいだけです。（泣）
何かいい方法がないかとﾈｯﾄ検索してみると世の中の技術は進んでおり、「meta viewportﾀｸﾞ」「@mediaｸｴﾘ」を見つけました。
これなら年老いた田舎のﾗｼﾞｵ少年でも何とかなるかもしれません。
【ﾍｯﾀﾞｰに、「meta viewportﾀｸﾞ」を追加】
【link要素として「@mediaｸｴﾘ」を指定】
試してみると、うまく動作しました。
このままでもｽﾏｰﾄﾌｫﾝ表示はできるのですが、せっかくCMSを使っているのでｽﾏﾎ用ﾃｰﾏに発展させようと思います。
管理画面のﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙから「ﾍｯﾀﾞｰ」を選択し、meta viewportﾀｸﾞ行を記述します。
この記述の意味は、
『利用者がｱｸｾｽ時に使用した機器について、画面ｻｲｽﾞなどの情報を入手する。』
『この情報にある画面の横ｻｲｽﾞから、PC向けかｽﾏﾎ向けかを判断する。』
【ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ ﾍｯﾀﾞｰに、meta viewportタグを追加】
次にｲﾝﾃﾞｯｸｽﾃﾝﾌﾟﾚｰﾄのｽﾀｲﾙｼｰﾄを選択します。
MovableTypeのｽﾀｲﾙｼｰﾄ「styles.css」には、PC表示用のCSSﾌｧｲﾙをｲﾝﾎﾟｰﾄするように記述されています。
この記述を、PC用CSSとｽﾏﾎ用CSSを切り替えできるようにしなければなりません。
ところが、CSSﾌｧｲﾙを読み込む「@import」と表示ﾒﾃﾞｨｱを判断する「@media」をどう組み合わせるか分かりません。
けっこう悩みましたがﾈｯﾄ上にある先駆者のお陰で、下記のとおり記述したところうまく切り替えできるようになりました。（あーうれしっしゃ）
【ｲﾝﾃﾞｯｸｽﾃﾝﾌﾟﾚｰﾄ ｽﾀｲﾙｼｰﾄに、PC用CSSとｽﾏﾎ用CSSの切り分けを指定】
今回は初めての試みなので、「480px」をﾌﾞﾚｰｸﾎﾟｲﾝﾄとします。
この段階で、ｽﾏﾎ表示用のﾃｰﾏとして保存しておきます。
現用ﾃｰﾏと新規ﾃｰﾏを使い分けることによって、新しいｶｽﾀﾏｲｽﾞとの並行作業ができるようになります。
このへんがMovableType CMSの便利なところです。
【おまけ】
ついに、国際郵便が一時停止される前に出していたSAEが戻ってきました。
例えDX局に届いていたとしても、QSLｶｰﾄﾞが送られてくるのはいつになることか。・・・・・
【ｽﾀｲﾙｼｰﾄで、PC用とｽﾏﾎ用CSSを切り替える】
本ｳｪﾌﾞｻｲﾄは、MovableTypeの付属ﾃｰﾏのﾃﾝﾌﾟﾚｰﾄをｶｽﾀﾏｲｽﾞしてPC表示していますが、ｽﾏｰﾄﾌｫﾝが主流となった昨今、PC表示だけでは時代遅れとなってしまいました。
以前から何とかしたいという気持ちはあったのですが、ｽﾏｰﾄﾌｫﾝにもPCにも対応する「ﾚｽﾎﾟﾝｼﾌﾞWEBﾃﾞｻﾞｲﾝ」は、どうにも敷居が高く手付かずのままでした。
新型ｺﾛﾅｳｨﾙｽの影響でDXﾍﾟﾃﾞｨｼｮﾝがなくなり記事ﾈﾀもないので、ｽﾏｰﾄﾌｫﾝ対応のためにようやく重い腰を上げます。
ｽﾏｰﾄﾌｫﾝでPC用ﾚｲｱｳﾄを表示してみても見にくいだけです。（泣）
何かいい方法がないかとﾈｯﾄ検索してみると世の中の技術は進んでおり、「meta viewportﾀｸﾞ」「@mediaｸｴﾘ」を見つけました。
これなら年老いた田舎のﾗｼﾞｵ少年でも何とかなるかもしれません。
【ﾍｯﾀﾞｰに、「meta viewportﾀｸﾞ」を追加】
【link要素として「@mediaｸｴﾘ」を指定】
試してみると、うまく動作しました。
このままでもｽﾏｰﾄﾌｫﾝ表示はできるのですが、せっかくCMSを使っているのでｽﾏﾎ用ﾃｰﾏに発展させようと思います。
管理画面のﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙから「ﾍｯﾀﾞｰ」を選択し、meta viewportﾀｸﾞ行を記述します。
この記述の意味は、
『利用者がｱｸｾｽ時に使用した機器について、画面ｻｲｽﾞなどの情報を入手する。』
『この情報にある画面の横ｻｲｽﾞから、PC向けかｽﾏﾎ向けかを判断する。』
【ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ ﾍｯﾀﾞｰに、meta viewportタグを追加】
次にｲﾝﾃﾞｯｸｽﾃﾝﾌﾟﾚｰﾄのｽﾀｲﾙｼｰﾄを選択します。
MovableTypeのｽﾀｲﾙｼｰﾄ「styles.css」には、PC表示用のCSSﾌｧｲﾙをｲﾝﾎﾟｰﾄするように記述されています。
この記述を、PC用CSSとｽﾏﾎ用CSSを切り替えできるようにしなければなりません。
ところが、CSSﾌｧｲﾙを読み込む「@import」と表示ﾒﾃﾞｨｱを判断する「@media」をどう組み合わせるか分かりません。
けっこう悩みましたがﾈｯﾄ上にある先駆者のお陰で、下記のとおり記述したところうまく切り替えできるようになりました。（あーうれしっしゃ）
【ｲﾝﾃﾞｯｸｽﾃﾝﾌﾟﾚｰﾄ ｽﾀｲﾙｼｰﾄに、PC用CSSとｽﾏﾎ用CSSの切り分けを指定】
今回は初めての試みなので、「480px」をﾌﾞﾚｰｸﾎﾟｲﾝﾄとします。
この段階で、ｽﾏﾎ表示用のﾃｰﾏとして保存しておきます。
現用ﾃｰﾏと新規ﾃｰﾏを使い分けることによって、新しいｶｽﾀﾏｲｽﾞとの並行作業ができるようになります。
このへんがMovableType CMSの便利なところです。
【おまけ】
ついに、国際郵便が一時停止される前に出していたSAEが戻ってきました。
例えDX局に届いていたとしても、QSLｶｰﾄﾞが送られてくるのはいつになることか。・・・・・
コメントする