新着記事

2016.04.25 Monday

【JUGEMブログ】スマホページの表示を任意のものに変える方法


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. 【JUGEMブログ】スマホページの表示を任意のものに変える方法

全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


前回
【JUGEMブログ】スマホからのアクセスでも強制的にPCサイトを閲覧させる方法

という記事を公開しましたが、今回の記事はこれの続きのような感じ。


上記の方法を使いスマホからブログにアクセスすると確かにPC版が表示されるのですが、新規でアクセスしてきてくれた方やキャッシュが消えてしまった方には「一瞬スマホサイトが表示される」という問題が起こります。

これだとアクセスしてくれた方に、「他サイトに転送された!?」等不信感を与える可能性があるため、スマホサイト側の方も見られても不自然でないようにしておいた方がいいかと思います。

例えば


こんなローディング画面にしたり、PC版に転送する旨を書いたり。
ローディング画面にしたい場合は
Loader Generator
このサイトが便利。ローディングのgifアイコンを作成できます。

で、実際こういった画面を表示させるとなると今表示されているスマホ版の表示が邪魔ですよね。
例のごとくdisplay: none;を使用するわけですが、ここで注意があります。

「全部消すだけでしょ〜、簡単簡単」なんて思って、メインがごっそり消えるidのwrapperを指定してしまうと、フリースペースに自分で記述した内容まで表示されないことになってしまいます。

指定するidはfooter、header、main、headbarの4つ。
具体的にはスマホ用のフリースペース1に以下を記述するだけです。

#footer,#header,#main,.headbar {
display: none;
}

これでスマホ表示は完全に白紙になるはずです。

フリースペース2以降に書いた表示もきちんと反映されます。

いちいちローディング画面作るのめんどくさいよーって方のために、コピペで簡単に反映できるテンプレートも用意しました。
画像も使っていないのでアップロードの手間もなく簡単。
以下サンプル画像。

※実際はサークル部分がクルクル回ります。

以下をスマホのフリースペースに貼り付けてください。

フリースペース1
<style type="text/css"> 
<!--
body {
background-color: #ffffff
color: #A9A9A9;
}
#footer,#header,#main,.headbar {
display: none;
}
.loadwrap {
text-align: center;
position: relative;
top: 200px;
width: 100%;
}
.load {
margin:0px auto;
width: 40px;
height: 40px;
-webkit-animation: spin 1.5s linear infinite;
-moz-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
-->
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

フリースペース2
<div class="loadwrap">
<div class="load"><span style="font-size: 40px;"><i class="fa fa-circle-o-notch" aria-hidden="true"></i></div></span><br />
<div class="type-shine">NOW LOADING</div>
</div>


ローディング画面の表示以外にも、これを利用したらいろいろできそうですよね。


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント

コメントする