ライフスタイル

【初心者】アフィンガー5の使い方!ブログをスマホで画面拡大する方法

アフィンガー5で画面を拡大・縮小する方法

こんにちは、ちゃんさとです。

 

先日、ブログをスマホで確認していたときに気づいたんです。

指2本で画面をさわっても拡大・縮小されない!

ほかのアフィンガー5のブログではできるのに…

なんで?

試行錯誤しながらいろいろ調べて設定できたので、設定方法をまとめました。

 

この記事を書いている人

ちゃんさと 女性 1992年生まれ 
  • 元公務員の主婦ブロガー💻
  • ブログ歴9ヶ月目(2021年6月時点)
  • アフィンガー歴4か月目(2021年6月時点)
  • パソコンが苦手で、ブログやテーマの設定にはかなり苦労しながら挑戦中!
  • アフィンガー5使用者やブログ初心者向けに、分かりやすく悩みが解決できる記事をめざしています。

それではさっそく参りましょう、ラインナップはこちらです。

【初心者向け】アフィンガー5の使い方

アフィンガー5では、初期設定で画面拡大・縮小させる機能がオフになっています。

この機能をオンにすればOK!

…といっても初心者にとっては何がなんだかわかりませんよね。

ひとつずつ見ていきましょう。

 

ちなみに指2本で画面を拡大・縮小させることをピンチアウト・ピンチインというらしいです。

  • 画面拡大:ピンチアウト
  • 画面縮小:ピンチイン

 

ブログをスマホで画面拡大・縮小させる方法

アフィンガー5でブログをスマホで画面拡大・縮小させる方法です。

私が使っているアフィンガー5とレンタルサーバーの画面で説明しますね。

全体の流れ

  1. 子テーマにhead.phpがあるか確認
  2. レンタルサーバーからhead.phpを子テーマにダウンロード&アップロード
  3. 子テーマ(affinger5 child)のテーマエディターを修正
  4. 親テーマ(affinger5)のテーマエディターを修正
あせらずゆっくりやりましょう!

 

子テーマにhead.phpがあるか確認

まずはワードプレスの管理画面から

外観⇒テーマエディターを選択します。

ワードプレス画面

右上のテーマ選択のところでaffinger5 childを選択

テーマファイルの項目にheader.phpがあるかどうか確認します。

ワードプレス画面テーマエディター

ある⇒OK!(記事の2.省略、3.子テーマの修正から読み進めてください。)

ない⇒レンタルサーバーからダウンロード&アップロード

項目にhead.phpがなかった人はレンタルサーバーの設定が必要です。

 

レンタルサーバーからheader.phpを子テーマにダウンロード&アップロード

レンタルサーバーにログイン&ファイル管理を開きます。

レンタルサーバー画面

つぎにaffinger5とagginger5-childのファイルをさがします。

以下のファイル名のなかに入っています。

  • public_html
  • ⇒wp-content
  • ⇒themes
  • ⇒affinger5とagginger5-child

affinger5とagginger5-childのファイルにたどりつけばOKです。

public_html

レンタルサーバー画面(public html)

wp-content

レンタルサーバー画面(wp-content)

themes

レンタルサーバー画面(themes)

affinger5のファイルを開きます。

レンタルサーバー画面(affinger)

head.phpを選択、ダウンロードします。

header.phpをダウンロード

つづいて、agginger5-childのファイルを開きます。

agginger5-childのファイルを開く

さきほどダウンロードしたhead.phpをagginger5-childにアップロードします。

ダウンロードしたhead.phpをagginger5-childにアップロード

ワードプレス画面のテーマファイルに反映されているか確認してください。

ワードプレス画面のテーマファイルに反映されているか確認

head.phpの項目が追加されていればOKです。

 

子テーマ(affinger5 child)のテーマエディターを修正

ワードプレスの管理画面

外観⇒テーマエディターを選択します。

ワードプレス画面(外観⇒テーマエディターを選択)

右上のテーマ選択のところでaffinger5 childを選択します。

右上のテーマ選択のところでaffinger5 childを選択

テーマファイルから、追加されたhead.phpを選択します。

テーマファイルから、追加されたhead.phpを選択

そうすると上から13行目に、

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">

というコードがあります。

このuser-scalable=noのところをuser-scalable=yesに書き換えます。

user-scalable=noのところをuser-scalable=yesに書き換え

書き換えてファイル更新をしたらOKです。

 

親テーマ(affinger5)のテーマエディターを修正

次に親テーマの修正です。

ワードプレスの管理画面

外観⇒テーマエディターを選択

ワードプレス画面(外観⇒テーマエディターを選択)

右上のテーマ選択のところでaffinger5を選択します。

右上のテーマ選択のところでaffinger5を選択

そしてテーマの項目のなかから、テーマヘッダー(header.php)を選択します。

テーマの項目のなかから、テーマヘッダー(header.php)を選択

子テーマと同じで上から13行目に、

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">

というコードがあります。

このuser-scalable=noのところをuser-scalable=yesに書き換えます。

user-scalable=noのところをuser-scalable=yesに書き換え

書き換えてファイル更新をしたらOKです。

スマホでブログを確認してみましょう。

指2本でスマホ画面の拡大・縮小ができるようになっているはずです。

 

アフィンガー5初心者の失敗談

テーマを修正したのに、スマホで画面拡大ができない!なんで?

わたしは子テーマだけ修正して、親テーマの修正をしていなかったためにスマホに反映されず苦労しました。

テーマを修正するときは、子テーマと親テーマどちらもセットで確認することを学びました。

初心者のひとは覚えておくと良いです。

 

まとめ

ブログをスマホで画面拡大・縮小させる、アフィンガー5初心者向けの使い方はこちらです。

全体の流れ

  1. 子テーマにhead.phpがあるか確認
  2. レンタルサーバーからhead.phpを子テーマにダウンロード&アップロード
  3. 子テーマ(affinger5 child)のテーマエディターを修正
  4. 親テーマ(affinger5)のテーマエディターを修正
お疲れさまでした!

 

※アフィンガー5の吹き出しでお困りのかたへ

アフィンガー5での吹き出しの作り方についてはこちらの記事をご覧ください。

アフィンガー5★吹き出し
アフィンガー5吹き出しの色変更&右側&作り方【画像20枚付】

続きを見る

※ブログを始めるのにレンタルサーバーで悩んでいるかたへ

ブログを始めるひとにおすすめのレンタルサーバーはConoha WING(コノハウィング)かエックスサーバーです。

スペックほぼ同じで、速度は少しコノハウィングが上です。

エックスサーバーは実績がある分えらばれやすいですが、どちらをえらんでも問題なくブログが始められます。

ちなみにわたしはエックスサーバーを使っています。

どちらもキャンペーンなど頻繁におこなっていますので、お得なほうを選ぶと良いでしょう。

ConoHa WING

エックスサーバー公式サイト>>https://www.xserver.ne.jp/

今回は以上です。

参考になればうれしいです。

ありがとうございました。

 

ブログ関連記事

 

 

-ライフスタイル

© 2022 土木LIBRARY Powered by AFFINGER5