FC2ブログでスマートフォンからレスポンシブテンプレートを設定する方法

FC2ブログでスマートフォンからレスポンシブテンプレートを設定する方法

FC2ブログのあれこれ
2018/06/23 17
vanillaice (Akira)
vanillaice (Akira)
Smartphone Tips Responsive

お問い合わせがありましたので手順を説明しようと思います。

PC版とスマホ版とレスポンシブ

まずは3種テンプレートの説明をしておきます。
テンプレートをダウンロードするにはまず以下のページに行きますよね。
FC2ブログテンプレート ダウンロードページ
するとこんな風に分類されているはずです。

ケータイ用はここでは無視します。
レスポンシブ テンプレートはどこに属するかというと、PC用 に含まれています。
これはFC2ブログ運営が便宜上カテゴライズしているだけで、実際の役割とは異なります。

パソコン タブレット スマートフォン
PC用
スマートフォン用
レスポンシブ

表をご覧頂いてわかる通り、PC用テンプレートはパソコン専用、スマートフォン用テンプレートはスマホ専用
レスポンシブテンプレートはというと、パソコン・タブレット・スマホなど全デバイス共通 です。
なので本当はPC用、スマートフォン用とは分けて別枠にしてもらったほうが良いんですけどね (´・ω・`)

で、パソコンとタブレットからDLページにアクセスした際には最初のスクショのようにPC用・スマートフォン用の両項目が出てきますが、スマートフォンからアクセスした際にはPC用テンプレートが候補に出てこない んですね。
PC用の項目が出てこなければダウンロードもできませんので、以下の手順を行ってください。

PC用テンプレートをダウンロードする手順

PC用をDL、と表現すると誤解を招いてしまうのですが、あくまでもカテゴリ上の振り分けです。
これから行うのは「全デバイス共通で使えるテンプレート(レスポンシブテンプレート)のDL」です。
これからの作業は 管理画面を常にPCビューに設定している方は除外 します。
要はPCビューに切り替えればDLが可能になります。

スマホ表示の管理画面からテンプレートDLページに行くには

右側にある歯車 アイコンをクリック。

このようにPC版は候補に出てきません。

管理画面の下部にある PC表示 をクリック。

これで行われる表示切り替えを便宜上 UA偽装 と表現します。
これでパソコンと同じ管理画面になりましたのでテンプレートDLページも同じくパソコンでの表示と同じになります。
あとはプレビューとDLを行えばOK

スマホブラウザによってはプレビューができない場合があります。
画面が真っ白で何も出てこない場合はアドレスバーのURL末尾に ?pc あるいは ?sp のいずれかを追加してみてください。
どちらかで見られるようになると思います。

DLができましたら後は管理画面に戻って設定を行います。

スマートフォン版の無効化を忘れない

スマートフォン版の表示設定
上記ページでスマートフォン版を利用 しない という設定を行います。
これをやらないとせっかくレスポンシブテンプレートを設定しても、スマートフォンからアクセスした閲覧者に表示されるのはスマホ専用版のままです。

これでテンプレートのDL及び設定は終了です。

UA偽装の解除を忘れない

テンプレートが正しく設定されましたら、管理ページ下部にある
スマートフォン版を表示
をクリックしてUA偽装を解除してください。
これを怠りますと、FC2の他ブロガーのページを開いた際に強制的にPC専用版が表示されてしまいます。
相手もレスポンシブテンプレートを採用していれば良いのですが、PC版とスマホ版を併用しているユーザーの場合もありますので正しい表示状態に戻しましょう。

まとめ

レスポンシブテンプレートはある意味 スマートフォンのために存在する という見方もできるわけなんですが、残念ながらFC2ブログではスマホユーザーによるレスポンシブテンプレートのDLが困難です。
ここは是非今後改善して頂きたいんですけどね (´・ω・`)
ということで、スマホからレスポンシブテンプレートをDLする方法についてでした。

 17

There are no comments yet.
hige
UA偽装の解除

ごめんなさい。
前コメント削除しました。
ちゃんと読めばわかることでした。

2018/06/24 (Sun) 10:33
vanillaice (Akira)
Akira
To higeさん

higeさん、こんにちは (●'0'●)/

解決済みってことで良いのかしら。
いつもありがとうございます :)

2018/06/24 (Sun) 16:39
深緑の女魔術師
携帯版について質問

深緑の女魔術師です。

本記事で無視されてる部分に質問です。
※スレチなコメントでしたらごめんなさい。

>>ケータイ用はここでは無視します。

AkiraさんのブログURLに、
「?m」とモバイル用引数で参照すると、
携帯電話は非対応ですって表示されますが、
あれって何か特別な設定があるのでしょうか?
(携帯用のテンプレートの中身を全部消してるだけでしょうか?)

ググったのですが、
今更いらない「携帯テンプレート導入方法」的なページしかヒットしなくて・・・

以上です。

2018/06/25 (Mon) 14:20
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/25 (Mon) 23:18
vanillaice (Akira)
Akira
To 深緑の女魔術師さん

こんにちは。

> あれって何か特別な設定があるのでしょうか?〜

htmlは広告部分だけ残して not available を伝えるテキストを入れてあるだけです。
CSS内容は全て削除しています。
よろしくお願いします。

2018/06/26 (Tue) 10:45
vanillaice (Akira)
Akira
To 内緒さん

こんにちは。

お邪魔しましたが私から見ると最新記事が6月8日の「キッチンカフェ〜」になってます。この記事ではないですよね。
どの記事のことなのか見当たりませんのでご確認をお願いします。

その前に先日のご質問の件は解決(理解)されたんでしょうか。

2018/06/26 (Tue) 10:47
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/26 (Tue) 13:47
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/26 (Tue) 14:13
vanillaice (Akira)
Akira
To 内緒さん

ごめんなさい。ちょっとよくわからない (´・ω・`)
yahooの方を見てくれということでURLも記載されていたのでそちらへお邪魔したのですが、FC2の方なのですか?

> トップページで見ると右端側の「xxxxx情報など」の欄です〜

「記事を書いた」とあったので記事を探しましたが結局記事は無いということでしょうか。かなり混乱してきました (´・ω・`)
で、結局のところご質問の内容というのは「バナーが表示されない」という件なんですかね。
yahooの方へ云々はもうスルーしても?え?なんかよくわからない(笑)

一旦整理します。
・ 「yahooの記事」の件はスルーします
・「FC2ブログのサイドメニュー内にあるバナーが表示されない」という件のご相談と解釈します

-------
バナーが表示されない原因はhtml要素の構文エラーです。
本来入れてはいけない箇所に全角や半角スペースが含まれているせいです。

スクショ
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/caplinkerror.png

赤い箇所が余分な半角スペース、緑が余分な全角スペースです。
何故スクショのようなhtmlになったのか私ではわかりませんが、もし「見易さ」という意味で間隔を開けた(スペースを入れた)のであれば、html構文は厳格なルールがありますのでそれを無視してしまわないように注意してください。
また、html構文らしきものが文字列としてそのまま表示された際は9割方「構文エラー」つまり書き方が正しくないのが原因です。
特にブラケット(タグを形成する最初の < の記号)の直後は要素名(div や img など)がすぐに記されるべきで、スペースが入るとその時点でhtmlタグとして機能しなくなります。

あと内緒さんの文章を読んで気になるのは、恐らく英数字を使用する際の全角・半角の切り替えを意識されていないように思います。
なので「https」や「12345」と全角でそのまま打ってしまう。当然スペースもそのまま打ってしまう危険があります。
英数字の正しい打ち方は 「https」「12345」 というように半角入力ですのでキーボードの切り替えを癖付けされると良いと思います。
htmlタグ内での全角スペース利用は禁じ手ですし、スペースは目に見えないので特に注意を払う必要があります。

よろしくお願いします。

------
書き忘れました。

> あきらさんもカフェ記事ですよね?〜

私の言っているのはyahooブログのことです。FC2でなく。
「コメントもしないうちにカフェ記事に行く」というのは、内緒さんが記載したURLがカフェ記事の個別記事URLならば当然カフェ記事に行きますね (´・ω・`)
コメントする・しない、した・してない とかは全く関係なく。

-----
今気づきましたが、この記事内容が原因で誤解を招いているのではないでしょうか。
yahooの最新記事の一つ前(5月10日投稿)

> コメント欄が今迄もともと出ていたのですが、今度はコメント欄をクリックして出す形に変更されました。〜
> 楕円形のような小さな吹き出しのマークをクリックすればコメント欄が表示されます。〜

そういった仕様変更の事実はありません。
もともとFC2ブログではコメントをしたければ個別記事へ行くというのが仕様です。
トップページでコメントできるようにしてあるテンプレートもあるかもしれませんが、コメントは個別記事で書く、というのが通常の仕様です。
トップページと個別記事を混同されていませんでしょうか (´・ω・`)

2018/06/26 (Tue) 16:52
深緑の女魔術師
Re:Akiraさん

深緑の女魔術師です。

回答ありがとうございました。
単純に何も出ないようにするだけなのですね。

以上です。

2018/06/26 (Tue) 16:53
vanillaice (Akira)
Akira
To 深緑の女魔術師さん(終了のご報告)

はい。ごく単純な方法です。
お役に立てたかわかりませんが、お疲れ様です :)

2018/06/26 (Tue) 16:57
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/27 (Wed) 02:18
vanillaice (Akira)
Akira
To 内緒さん

こんにちは (o'ω')ノ

そのサイトスタッフのスキルについてはよくわかりませんので置いておくとして。
これからコメント欄の説明をするのですが、なるべく端的に書くと私(Akira)が怒ってるんじゃないかと感じる方が割といらっしゃるみたいで。
とはいえ遠回しな表現をすると伝わるものも伝わらなくなってしまいますので、違うならNO、合ってるならYESと直接表現を取ります。
ですが怒ってるわけでも馬鹿にしているわけでもない、というのを事前にお伝えしておきます ^^;

------
> トップページでいくつも記事が読めるタイプで以前はコメント欄が出てたけど〜

トップページでコメント欄表示をしているテンプレートは作成したことがありません。

> 記事の上に吹き出しマークのようなのがあり、そこをクリックしたらコメント欄が出たので私のも吹き出しマークがついたので、そうやって出すんだと思った〜

恐らく根本的な誤解をされていると思います。
吹き出しマークをクリックすると そのページにコメント欄が出てくるわけではなく、対象の個別記事に遷移して直後にコメント欄の位置まで移動 しています。
ですから「コメント欄が出てくる」わけではありません。

-----
ページ移動

ページ遷移
の違いはおわかりでしょうか。

移動 = 今いる場所や位置から別の場所や位置を変えること
遷移 = 移り変わって別のものに変化すること

上記の意味をまずしっかり頭に入れて読み進めてください。

「リンク」という言葉はご存じですよね。で、やはりY!ブロガーさんに多いのですが、多くの方は「リンクをクリックすると別のページに行く」と思っています。
つまり「ページ遷移」ですね。
「ページ移動」もここではほぼ同じ意味です。

ですが実際は「遷移」はせずに「位置の移動」だけを行うリンクもあるんです。
一般的に「ページ移動」と呼ばれます。
遷移ではなく移動。単なる移動でもなく内部で移動。
つまり別のページには行きません。今開いているページに滞在したまま、位置だけが変わります。
リンクの <a href="xxx"> は必ずしも別のページに行くとは限らない、ということです。

Y!ブログにはページ移動(ページ内リンク)が使われていませんので仕方がないですけどね。
一番わかりやすいのは、内緒さんのテンプレートにも右側に上下矢印のボタンがありますよね。
上向き矢印をクリックするとページの最上部へ、下向き矢印クリックで最下部へ移動します。
ですが別のページへ遷移しているのではなく滞在ページ内で画面表示位置が変わるだけです。
これが「ページ内移動」です。

-------
内緒さんのトップページの各記事に吹き出しアイコンがありますよね。
それをクリックすると
ページ遷移 + ページ内移動
の2つが行われます。
まず対象の個別記事へ ページ遷移 し、直後に遷移先ページページ内移動 が行われます。
何故ならコメントアイコンをクリックするのはコメントをしたい方・コメントを読みたい方である可能性が高いので、ページ遷移後の画面位置が最上部ではいちいちコメント欄がある下の方までスクロールする手間が生じます。
その手間を省くためにページ遷移にページ内移動を追加しているわけです。
その動作が「コメント欄が出てくる」と勘違いした原因だと思いますが、実際には別のページつまり個別記事へと遷移しているので滞在ページは元のトップページから個別記事に変わっているということです。

------
また、個別記事に滞在している時、記事本文の上にも吹き出しアイコンがありますよね。
そのアイコンをクリックした時に行われるのは「ページ内移動」です。別ページへの遷移は行われません。
スルスルーっと下の方まで移動します。
つまりトップページの吹き出しアイコンと個別記事の吹き出しアイコンは役割が違うわけです。

------
ページ遷移 + ページ内移動
はサイドメニューにある「最新コメント」でも使われています。
滞在ページがどこであっても、最新コメントをクリックすることで対象のコメントが実際に書かれているページへまず「遷移」をし、その直後にそのコメントが見られる位置まで「内移動」をします。

ページ遷移とページ内移動は全く別の動作ですので区別と理解をしてください。
でないと自分がどこのページに滞在しているのか見失ってしまいます。

------
慣れるまで(直感的にわかるまで)のしばらくは アドレスバー内のURL を常に見るようにしてください。
(html変換を避けるため以降のアドレスは全て https:// を省略します)

xxxx.blog.fc2.com/blog-entry-731.html#○○○

青色の entry が付いていた場合、それはそのページが「個別記事」であることを意味します。
後ろの数字(この例では731)が記事番号です。
またさらに末尾に # の付いた文字列がある場合、それは「ページ内移動」が指定されていると思ってください。
ページ内移動が無い場合には

xxxx.blog.fc2.com/blog-entry-731.html

というURLになっているはずです。
URL末尾に#が付いていたら、それは「ページ遷移 + ページ内移動」が行われたことがわかります。

ページ遷移なしのページ移動(top, bottomボタンや個別記事の吹き出しアイコン)の場合にはURLは変化しません。URLが変わらずに画面表示位置が移動した場合にはそれは「ページ内移動」であることがわかります。

-------
遷移や移動だけでなく、FC2ブログの各ページ種のURLの特徴は把握しておいてください。
私のブログを例にします。html変換を避けるため https:// は省略します。

【ブログURL】(ブログの代表URLであり、トップページ最初の1ページ目でもある)
vanillaice000.blog.fc2.com/

【トップページURL】
vanillaice000.blog.fc2.com/page-数字.html

【個別記事URL】
vanillaice000.blog.fc2.com/blog-entry-記事番号.html

【カテゴリ一覧URL】
vanillaice000.blog.fc2.com/blog-category-カテゴリ番号.html

【タグ一覧URL】
vanillaice000.blog.fc2.com/?tag=タグ名

【全記事一覧URL】
vanillaice000.blog.fc2.com/archives.html

【月・日別一覧URL】
vanillaice000.blog.fc2.com/blog-date-年月日.html

【コメント編集ページURL】
vanillaice000.blog.fc2.com/?mode=edit&rno=コメント番号

-----
ページ種別のURLの特徴がわかると、今自分がどの種のページを参照しているのかすぐにわかるようになりますし、トップページと個別記事を混同することもなくなります。
コメント欄についての説明は以上です。

------
> ところが、6月の自分の記事にコメント欄が出てるようになりました〜

コメント欄を出す・出さないは内緒さんの意思決定ですから、表示を設定したのであればコメント欄は当然その意志に従って表示が行われます。
非表示を設定すれば非表示になります。
これはテンプレートの不具合や特徴ではなく「内緒さんがどう設定したのか」というだけですよ。

2018/06/27 (Wed) 11:43
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/27 (Wed) 14:57
vanillaice (Akira)
Akira
To 内緒さん

こんばんは (o'ω')ノ

> あきらさんのテンプレートを使ってる方が新しいあきらさんのテンプレートになりコメント欄が記事に入るといつもあったのにない?!となり〜

その「新しいあきらさんのテンプレート」は私が作成したものではないですよ。他の作者さんです。
なので仕様については何も言及できません。ごめんなさいね。

ただなんとなくですが、内緒さんが思っている「コメント欄が記事に入るといつもあったのにない?!」についてはたぶん「記事に入って(個別記事ページを開いて)」いるつもりになっていただけで実際は個別記事ではなくトップページだったのではないかと思います。
その方のテンプレートは全文表示タイプといって、書いた記事内容がトップページにそのまま表示される類のものです(本文のみ, 追記除く)
スクロールなどを行わず一見しただけであったり、そのブログの管理人がトップページの記事表示件数を1件のみに設定しているとトップページなのか個別記事なのかわからないときがありますね。
内緒さんがご利用のテンプレートは全文表示ではなく要約表示タイプで、トップページと個別記事の見た目が明らかに異なりますのですぐに気づきますけれど。

こういうことがあるので「常にアドレスバーのURLを気にした方が良い」とお伝えしました。
いずれにしろFC2ブログに慣れれば開いているページがトップページなのか個別記事なのか直感でわかるようになりますよ。

参考記事: FC2ブログの記事表示タイプと各々の利便性
https://vanillaice000.blog.fc2.com/blog-entry-397.html

FC2共有テンプレート一覧(表示タイプ別)
https://vanillaice000.blog.fc2.com/blog-entry-283.html

------
> 【タグ一覧URL】の見るやり方がわかりません〜

タグページは内緒さんが記事にタグをつけていれば個別記事の下の方(テキスト広告の下, SNSシェアアイコンの上)にリンクとして出ています。
タグを付けていないページには出ません。
私のこの記事内でもSNSアイコンの上に
Template, FC2, Responsive
と3つ出ています。
クリックすると同じタグ名を持つ記事の一覧ページに遷移します。

内緒さんはサイドメニューに「タグクラウド」を入れていますので、そこを押しても遷移します。

2018/06/27 (Wed) 22:23
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/06/28 (Thu) 01:10
vanillaice (Akira)
Akira
To 内緒さん(終了のご報告)

了解です。お疲れ様です :)

2018/06/29 (Fri) 10:26

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ