blogger 用 レスポンシブ対応テンプレートでPCの時だけ表示するガジェットの作り方

 こちらの記事で blogger に tokyo テンプレートを導入しました。今回はこのテンプレートのちょっとしたカスタマイズの方法です。

 このブログでは、自作ソフトの説明もあるので一応 翻訳ガジェット を右上に設定してあります。しかし、モバイル表示の時は記事下にガジェットが表示されてほぼ邪魔なだけの存在になってしまうのでモバイルの時は消したいのですが、設定で消すことはできないようです。

 

 

というわけで、テンプレートを書き換えます。まずはガジェットのIDを調べます。

この例では Translate1 です。 

次に、 widget の項目に次のように追記します。

@media screen and (max-width: 768px) {
  #Translate1 {
    display: none;
  }
}