トライ&エラーな日々の実践目録!

NEW!

2017年11月17日金曜日

【新デザイン対応】レスポンシブ非対応なSeesaaブログのテンプレートデザインを、手軽にレスポンシブ化する方法

こんばんは
しゃーぷです。

今回はSeesaaブログにあるレスポンシブに非対応なテンプレートを手軽にレスポンシブ化する方法をご紹介します。

Seesaaブログのテンプレはほとんどがレスポンシブ非対応なですので、そのまま使うとパソコン画面に合わせて表示で使い勝手が悪いのですが、レスポンシブ化すればパソコンデザインをスマートフォン画面に対応する事が可能になります。

top_00016


このブログは以前まではブラウザの画面幅を狭くしても、表示される幅が固定されていた為、狭くしてもブログ記事が途切れたままの表示になってました・・・。

しかし、今回の紹介するレスポンシブ対応化の処理を行うことで、スマートフォンとパソコンでも同じデザインを流用しつつ、画面幅に合わせて見え方が変わるように出来ました。

なお、パソコンからでもレスポンシブ対応かどうかのデザインが確認出来ますので、レスポンシブで見る場合はブラウザのウィンドウ幅を狭くして見て貰うと変化が分かり安いと思います(*´ω`*)

では早速Seesaaブログでのレスポンシブ対応化の方法をご紹介します。


スマートフォンの画面表示を強制無効化

ではパソコンページのレスポンシブ対応化をするにあたり、スマートフォンで見た時のモバイル画面が邪魔になる為、この画面を表示されないようにします。

方法は簡単で、スマートフォンデザインのヘッダーにJavascriptを追加するだけで、モバイル表示で見た時にこのプログラムが実行されて、強制的にパソコン画面へ切り替えられるようになります。


まずSeesaaブログの管理画面に移動してから、

「デザイン」→「スマートフォン」→「コンテンツ」と選択して下さい。

「コンテンツ」画面に移動したら、フッター等の枠内にある全てのデザインをドラッグして一つずつゴミ箱に移動させます。

a00016_Seesaa_レスポンシブ対応化_01


次に、左側のブログパーツにある「自由形式」をヘッダーの上部にドラッグして移動させて下さい。

a00016_Seesaa_レスポンシブ対応化_02


今度は設置したばかりの「自由形式」の右側にある歯車模様をクリックして、パーツの設定画面を表示させます。a00016_Seesaa_レスポンシブ対応化_03



自由形式欄に下記のコードを入力してから保存を押します。

この際、名前部分には分かりやすいのに変えておくと良いと思います。

<SCRIPT LANGUAGE="JavaScript">
 <!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
 document.cookie = 'force_sp=0; max-age=15768000; path=/';
 location.href=location.pathname; 
 setTimeout("autoLink()",1000);
 // -->
</SCRIPT>

※IE8等の古いブラウザでは下記コードのコピーがおかしくなる場合がありますので、その場合は別のブラウザのChrome、FireFox等でコピペしてみて下さい。


自由形式パーツの保存が済んだら、忘れずに全パーツの変更を保存しておきます。

a00016_Seesaa_レスポンシブ対応化_04


これでスマートフォン画面表示の強制無効化が出来ました。


試しにスマートフォンから設定したブログにアクセスしてみて下さい。

スマートフォン画面から強制的にパソコン画面へ遷移表示されてると思われます。

viewportのmetaタグの有無を確認

次にデザイン設定のHTML編集を行い、レスポンシブに対応させるためのviewportのmetaタグを追記します。

とは言っても、 このタグはSeesaaブログのテンプレには最初から設定されている物が多いと思いますので、記述があるかどうかの確認だけで大丈夫です。


確認方法はSeesaaブログの管理画面から、

「デザイン」→「PC」→「デザイング設定(CSS/HTML編集)」→「HTML編集」

と移動して、前文の<head>~</head>の初めあたりに書かれていると思います。

a00016_Seesaa_レスポンシブ対応化_05


もし、上記の様に赤線を引いたようにコードが無かった場合は、以下の手動でコードを追加して下さい。

<meta name="viewport" content="width=device-width, initial-scale=1">


追記する場所は<head>内であればどこも良いですが、同じ様にmetaタグが並んでいる辺りに追記しておくと分かりやすいと思います。

コードの編集が終わったらHTML編集の保存を忘れないようにしておきましょう。


CSSにレスポンシブデザインのコードを記述

今度はCSS(スタイルシート)の編集を行い、レスポンシブ用のコードを追記します。

Seesaaブログの管理画面から、

「デザイン」→「PC」→「デザイング設定(CSS/HTML編集)」→「スタイルシート編集」

と移動してスタイルシートの編集画面を開きます。

a00016_Seesaa_レスポンシブ対応化_06


コードを追加する位置は編集欄の一番下に移動してから一度改行を行います。

そして下記のコードを貼り付けます。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  .entry__thumbnail {
    text-align: left !important;
  }

  .entry__thumbnail img {
    top: 50% !important;
    left: 50% !important;
  }

  .module--recent-entry .recent-entry__thumbnail img {
    top: 50% !important;
    left: 50% !important;
  }

  .module--article-link .article-link__thumbnail img {
    top: 50% !important;
    left: 50% !important;
  }

  .module--category-recent-entry .recent-entry .recent-entry__thumnail img {
    top: 50% !important;
    left: 50% !important;
  }

  .upload-detail .upload-list__thumnail img {
    top: 50% !important;
    left: 50% !important;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {

  .icn {
    background: url(http://blog.seesaa.jp/img/bg/simple_2015_01/icn_sprite.png) no-repeat;
    background-size: 28px auto;
    -webkit-background-size: 28px auto;
  }

  .icn--tag {
    background-position: -16px 0;
  }
}

@media screen and (min-width: 321px) and (max-width: 767px) { /* 画面幅 */

  .module--category-recent-entry .recent-entry__item {
    width: 100px;
    height: 100px;
  }

  .module--category-recent-entry .recent-entry .recent-entry__thumnail {
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) { /* 画面幅 */

  .l-wrapper { /* ヘッダーや記事、サイドバー等を含めた全体のクラス */
    width: 768px;
  }

  .main { /* 記事部分のクラス */
    width: 448px;
  }

  .side--left { /* 右サイドバー部分のクラス */
    margin-right: 0;
  }

  .entry__thumbnail {
    width: 448px;
    height: 244px;
  }

  .module--category-recent-entry .recent-entry__item {
    width: 136px;
    height: 136px;
  }

  .module--category-recent-entry .recent-entry .recent-entry__thumnail {
    width: 136px;
    height: 136px;
  }
}

@media screen and (max-width: 1024px) {

  .form .input {
    width: 100%;
  }

  .form .input--submit {
    width: 100%;
  }

  .form textarea {
    width: 100%;
  }
}

@media screen and (max-width: 767px) { /* 画面幅 */

  .l-wrapper { /* ヘッダーや記事、サイドバー等を含めた全体のクラス */
    width: 115%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow: hidden;
  }

  .l-content {/* 記事+サイドバーのクラス */
    float: none;
  }

  .main { /* 記事部分のクラス */
    width: 115%;
    float: none;
    margin-bottom: 80px;
  }

  .side { /* サイドバー全体のクラス */
    width: 115%;
    float: none;
  }

  .entry__thumbnail {
    width: 115%;
    height: 230px;
  }

  .meta .date {
    display: block;
  }

  .meta .tag {
    display: block;
  }

  .module--calendar table {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {

  .module--category-recent-entry .recent-entry {
    position: relative;
  }

  .module--category-recent-entry .recent-entry__item {
    width: 86px;
    height: 86px;
  }

  .module--category-recent-entry .recent-entry .recent-entry__thumnail {
    width: 86px;
    height: 86px;
  }
}


コードの追加が終わったら、スタイルシートの保存をしてブログに反映させます。

この作業によりブログのレスポンシブ対応化が出来たと思いますが、ブログにきちんと反映されましたでしょうか?

レスポンシブ化されていない場合の編集方法

先程のコードを追記してもレスポンシブ化されていない場合は、おそらくテンプレートのクラス名が違うからだと思われます。

コードには私がコメントを残していますので、「l-wrapper、main、side」等のクラスを使用するテンプレのクラスに合わせることでレスポンシブの対応が可能になります。

なお「module--xxxxx」等はSeesaaの標準モジュール用ですので、大体はそのまま使えると思います。


ちなみにあくまでもこのコードはレスポンシブ用の叩き台ですので、使用するテンプレに合わせて必ず微調整を行う必要があります。

この微調整やクラスの調べ方はブラウザ上から右クリックメニューを開き、要素チェックや検証を選ぶ事でエレメントやインスタンスメニューが表示されるので、そこから調べることが可能です。

a00016_Seesaa_レスポンシブ対応化_07

ブログ同士のクラスを比較しながら合わせると分かりやすいかも?


まとめ

最初は意味が分からなくて何をしているか混乱するかもしれませんが、慣れると簡単にデザインのフルカスタマイズが出来るようになりますよ

ちなみに先程のコードをそのまま貼り付けただけだと、表示が絶対ズレてしまうと思いますので、そこんところはこねくり回しながら頑張って下さいな(*´∀`*)アハハハ

以上、Seesaaブログデザインを手軽にレスポンシブ対応化する方法でした。

2 件のコメント:

※不適切コメントについて:当サイトに相応しくない表現は事前通知無しで削除致しますのでご了承ください。
※絵文字入力対応(Twitter風):🤣😋🤔🤟💖

  1. 初めまして。
    クイズと申します。
    こちらの記事を参考にシーサーブログのスマホ広告を
    非表示にしていたのですが
    シーサー側でここ1か月以内に仕様の変更があったみたいで
    効かなくなってしまいました。
    ��少なくとも最後に更新した今年の1月9日までは上記で通用していました)
    ちなみに、スマホ広告はフッダーの同じ位置に
    重ねて2つ表示されており
    タブレットはスマホと同じ位置に1つだけ表示されます。
    Chrome UA Spooferを使いPC上からスマホ、タブレット画面と確認しているのですが、スマホのiPhone6で見ると 画面が痙攣したみたいに繋がりに時間がかかり戻ったり、繋いだりを繰り返してフリーズしており、更新ボタンを押し停止してからやり直すと正常に見れました。
    これも関係しているのかよくわかりませんが
    1月9日以前はそのようなことはなかったです。
    タブレット画面は普通に見れます。
    そこで、もし今のシーサーの仕様変更後にも
    適用できる方法が何かありましたら
    ご教授いただけないでしょうか?
    スマホからの流入が多いので本当に困り果てています。
    私はこちらを参考にただコピペしていただけなので
    原因が全くわからず、本当に困り果てています。
    どうぞ、よろしくお願い致します。
    質問は非公開でお願いします。
    ��ホームページアドレスは入力しないとエラーになったので
    このような形にしています。)

    返信削除
  2. ログヲーク管理人#2018年3月4日 22:26

    ご質問ありがとうございます。
    またお返事が遅れて申し訳ございません。
    コメントの通知が無くて気づきませんでした( ;∀;)
    痙攣表示に関してですが、
    恐らくスマホのコンテンツに貼り付けたPC画面を強制的に表示させるものと思われます。
    私もたまになりますが、残念ながら対策方法が無いかと思われます・・・。

    返信削除

Post Bottom Ad

Sponsored Links

ページ