この記事は、[WordPressテーマ] ブログ村キーワードに参加しています

no image

3月12日に、そーっと1カラムというスタイルに変えた「日々歳々」です。

でも、そのせいかどうなのか、いつごろからかスマホのピンチイン、ピンチアウトという動作ができなくなっていました。人差し指と親指で画面をニョ~ンと広げたり縮めたりする、あの動きですね。

何をやったのか、このときのリニューアル内容をメモしていなかったので、最近になって気がついて焦りまくったのですが、なんとか直せたみたいです。

でも、今度また何かあったら大変なのでメモ(汗)

1カラムにした理由・モバイルとパソコンの体験を同一にするというのがいいらしい

つい最近、Googleもパソコンでキーワード検索した際に、右側に表示していた広告を廃止したということで、話題になりましたよね。

これはモバイルとパソコンの体験を同一にするということらしいんだけど、春に参加したセミナーでも「1カラムがええでー」という話を聞いたので、早速「日々歳々」と「ネット通販情報」を1カラムにしてみました。

まず、右に表示していたサイドバーを消した

参考にした記事⇒WordPress(BizVektor)に投稿した記事を1カラムにする方法 | teratail

「single.php」の子テーマに、以下を追記。

/* サイドバーを非表示にする設定 */
#main #container #sideTower {
display:none;
}

・トップページ … 外観 > テーマオプション 「トップページのサイドバーの表示」にチェックを入れて非表示に

このままでもいいんだけど、でもこれだとサイドバー部分が白く抜けたように空白になって残るんですよね。Google検索の右側もそんな感じなんだから、いいじゃないかと言えばいいんだけど…。

でも、この状態って、<div>~</div>で、</div>を書き忘れた時にサイドバーがコンテンツの下に落っこちてしまってる感じに見えなくもない。

なんかカッコ悪い…。

というわけで、空白を消してみた

コンテンツ全体の幅を書きかえる方法を見つけたので、指定してみた。ちょっとうろ覚えだけど、こんな感じ。

#main #container .content{
width: 950px;
}

bizvektorは、「コンテンツ全体」が950px、「サイドバー」が220px、「ページ内コンテンツ」が660pxらしいですよ。

ということで、うちの場合、もうサイドバーは表示していないので、いっぱいいっぱいの950pxに表示してみました。見た目はうまくいったように見えました。

でも、このやり方だと、幅を固定してしまうわけだから、ピンチインピンチアウトができない!ウインドウのサイズが変わってもブログの表示が変わらない!

bizvektorの意味がない…(汗)

というわけで、改めて検索しなおして、bizvektor用の固定ページの横幅のサイズ変更をしてみました。

参考にした記事⇒固定ページの横幅のサイズ変更について | BizVektorForum

先ほどの横幅指定した部分を消して、以下に書きなおし。

@media (min-width: 950px){
#main #container #content { width:950px; }
}

なんとか成功! …したはずでした(汗)

「ネット通販情報」はピンチインピンチアウトできてるのに、「日々歳々」はまた固定されていた…

参考にした記事⇒Webサイトでピンチインピンチアウトを無効有効にするには |
吉田技研

確か「日々歳々」もピンチインピンチアウトができていたはず… と思っていたのにできてなかったので、今回の修正です。

子テーマのヘッダ部分を見てみると、こんな違いがありました。

【ネット通販情報のヘッダ部分】
<meta id=”viewport” name=”viewport” content=”width=device-width, initial-scale=1″>
【日々歳々のヘッダ部分】
<meta id=”viewport” name=”viewport” content=”width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0″>

で、「ネット通販情報」の文字列を「日々歳々」側に上書きして保存したら、なんとかピンチインピンチアウトするようになりました。万歳。

でも、私、こんなとこ触ってませんよ…。たぶん。
書き変えて大丈夫だったのかな。

何か後で不具合が起きたりしないか不安におののいています(汗)

【関連記事】
ブログのサイドバーを復活させました、BizvektorでPopular postsの人気記事一覧の表示に成功♪ 16/06/10
> Bizvektorを1カラムレイアウトにしてみる(メモ書き) 16/05/03

この記事、いいなと思ったらボタンをクリック
  • Facebook
  • Hatena
  • twitter
  • Google+
ブログの購読はこちらも便利
follow us in feedly
このタグに関する他の記事を読みたい時は、このリンクから一覧で見ることができます