2015/03/05

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


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

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

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

Google

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

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

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

こんな感じですね。 

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

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

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

Style

 

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

 

/* 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(http://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("http://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 をもらったものなので安心して利用することができます。責任は取れませんが(笑)。

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


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから