Google にスマホ対応と認められたので、ココログ用のレスポンシブデザインのスタイルシートを公開します

Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入。 | 海外SEO情報ブログ

Google が 4/21 から、検索アルゴリズムのランキング評価に、「スマホ対応」であることが公開されたことで、ネット上ではどうしたらよいのかてんやわんやの状態になっています。

当ブログはココログを使っていますが、ココログでレスポンシブデザインを取り入れたら、Google にスマホ対応サイトと認められたので、その方法をご紹介します。但し、必ずうまくいく保証はできかねますので、その点はご了承ください。

ココログで、レスポンシブデザインにしてスマホ対応するには、「有償オプション」に申し込む必要があります。

ココログフリーだったら、有償オプションの「オプションパックアドバンス」に申し込むとブログのデザインをカスタマイズできるようになります。ちなみに、月額1200円(税別)になります。詳しくは、こちらのページをご確認ください。

レスポンシブデザインにするには、スタイルシートでメディアクエリを使用します。

こんな感じですね。 

@media only screen and (min-width: 980px) {
 #container {
    width:980px !important;
  }
}

これで、画面のサイズに合わせてスタイルシートを設定していきます。

ココログでは、デザインで画面で「Stylesheet」(style.css)テンプレートを編集します。

このブログは、もともとレイアウトが３カラムだったものを２カラムに変えたので、利用するにはちょっと修正が必要でしょうが、このブログのスタイルシートを公開しておきます。

/* base css */
@import url(/.shared-pleasy/themes/common/base-weblog.css);

/* portal css */
@import url(/.shared-pleasy/nifty_managed/themes/common/base.css);


/* theme css */
@import url(https://theme.cocolog-nifty.com/themes/rich/aqua-blue/screen.css);
@import url(/.shared-pleasy/nifty_managed/themes/rich/aqua-blue/screen.css);


/* user css */
body {
  font-size:12pt;
}

.entry .entry-content {
  font-size:12px !important;
}

#banner {
  height:50px ! important;
  min-height:0 ! important;
}

blockquote {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #CCCCCC;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 20px 5px 20px 10px;
    overflow: auto;
    padding: 10px;
}
#banner-header {
  padding:20px 28px 0;
}

h3 {
   font-size:1.2em!important;
}
h4 {
    border-bottom: 1px solid silver;
    border-left: 14px solid silver;
    font-size: 1.2em;
    font-weight:bold;
    line-height: 2.0;
    margin: 24px 0 12px;
    padding: 3px 8px 3px 11px;
}

h5 {
    border-bottom: 1px solid silver;
    border-left: 10px solid silver;
    font-size: 1.1em;
    line-height: 1.7;
    margin: 24px 0 12px;
    padding: 3px 8px 3px 11px;
}

h6 {
    border-bottom: 1px solid silver;
    border-left: 6px solid silver;
    font-size: 1.0em;
    line-height: 1.5;
    margin: 24px 0 12px;
    padding: 3px 8px 3px 11px;
}

#alpha {
  width:620px!important;
}

#gamma {
  margin-right:5px!important;
  width:300px!important;
}

.entry .entry-content {
    font-size: 12pt!important;
}

/*footer css*/
#container-inner-bottom {
   background-color: #ffffff;
   margin-left:0;
}

#footer {
    background: url("https://theme.cocolog-nifty.com/themes/rich/aqua-blue/header_bg.gif") no-repeat scroll 50% top transparent;
    margin: 0;
    margin-left: 0;
    min-height: 30px;
    padding: 0;
    padding-top: 10px;
    width: 100%;
    height: 30px;
}
#footer-description {
    color: #3E3E3E;
    font-size: small;
    margin: 0;
    text-align: center;
}
#footer-inner {
    padding: 0;
}

#twitter-widget-0 {
   width:100px ! important;
}

#twitter-widget-1 {
   width:100px ! important;
}

#___plusone_0 {
   width:60px ! important;
}

#___plusone_1 {
   width:60px ! important;
}


@media only screen and (max-width: 619px) {
  html,
  body {
    width:100%!important;
  }
  
  #container {
    width:100% !important;
  }

  #banner {
    width:100% ! important;
  }

  #banner-inner,#pagebody-inner {
    width:100% ! important;
  }

  #alpha {
    width:100% !important;
  }

  #gamma {
    clear:both;
    float:left;
    margin-left:5px!important;
  }

  .entry .entry-content {
    font-size:1.2em !important;
  }

  #footer {
    width:100% ! important;
  }

  .entry-content img {
     width:100%;
   }

  img[alt="LINEで送る"] {
    width:88px;
    height:20px;
  }
}

@media only screen and (min-width: 620px) {
  #container{
    width:620px !important;
    padding-left:10px;
  }

  #banner {
    width:620px;
  }

  #banner-inner,#pagebody-inner {
    width:620px ! important;
  }
  #alpha {
    padding-left:10px;
  }

  #gamma {
    clear:both;;
    float:left;
  }

  #footer {
    width:620px;
  }
}



@media only screen and (min-width: 980px) {
  #container {
    width:980px !important;
  }

  #banner{
    width:980px;
  }

  #banner-inner,#pagebody-inner {
    width:980px ! important;
  }

  #alpha {
    width:620px!important;
  }

  #gamma {
    clear:none;
    float:left;
    width:300px!important;
  }

  #footer {
    width:980px;
  }
}

あ、忘れるところでした。各テンプレートの meta タグで以下のように viewport の指定をして下さい。 

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0">

なお、ココログは TypePad ベースのサービスですが、ココログの TypePad の機能では、モバイルからのアクセスがあった場合、適切な大きさのアドセンス広告を表示することができません。

ですが、JavaScript でアドセンス広告の表示制御を行うことができます。この方法は Google に問い合わせて OK をもらったものなので安心して利用することができます。責任は取れませんが（笑）。

詳しくは、以下のサイトの記事を参考にしてください。

• はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法 - マネー報道 MoneyReport