こんにちは、ブロガーちゃんさとです。
先日、ブログをスマホで確認していたときに気づいたんです。
ほかのアフィンガー５のブログではできるのに…
試行錯誤しながらいろいろ調べて設定できたので、設定方法をまとめました。
この記事を書いている人
- 元公務員の主婦ブロガー💻
- ブログ歴９ヶ月目（2021年6月時点）
- アフィンガー歴４か月目（2021年6月時点）
- パソコンが苦手で、ブログやテーマの設定にはかなり苦労しながら挑戦中！
- アフィンガー５使用者やブログ初心者向けに、分かりやすく悩みが解決できる記事をめざしています。
それではさっそく参りましょう、ラインナップはこちらです。
【初心者向け】アフィンガー５の使い方
アフィンガー５では、初期設定で画面拡大・縮小させる機能がオフになっています。
この機能をオンにすればOK！
…といっても初心者にとっては何がなんだかわかりませんよね。
ひとつずつ見ていきましょう。
ちなみに指２本で画面を拡大・縮小させることをピンチアウト・ピンチインというらしいです。
- 画面拡大：ピンチアウト
- 画面縮小：ピンチイン
ブログをスマホで画面拡大・縮小させる方法
アフィンガー５でブログをスマホで画面拡大・縮小させる方法です。
私が使っているアフィンガー５とレンタルサーバーの画面で説明しますね。
全体の流れ
- 子テーマにhead.phpがあるか確認
- レンタルサーバーからhead.phpを子テーマにダウンロード＆アップロード
- 子テーマ（affinger5 child）のテーマエディターを修正
- 親テーマ（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
wp-content
themes
affinger5のファイルを開きます。
head.phpを選択、ダウンロードします。
つづいて、agginger5-childのファイルを開きます。
さきほどダウンロードしたhead.phpをagginger5-childにアップロードします。
ワードプレス画面のテーマファイルに反映されているか確認してください。
head.phpの項目が追加されていればOKです。
子テーマ（affinger5 child）のテーマエディターを修正
ワードプレスの管理画面
外観⇒テーマエディターを選択します。
右上のテーマ選択のところでaffinger5 childを選択します。
テーマファイルから、追加された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に書き換えます。
書き換えてファイル更新をしたらOKです。
親テーマ（affinger5）のテーマエディターを修正
次に親テーマの修正です。
ワードプレスの管理画面
外観⇒テーマエディターを選択
右上のテーマ選択のところでaffinger5を選択します。
そしてテーマの項目のなかから、テーマヘッダー（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に書き換えます。
書き換えてファイル更新をしたらOKです。
スマホでブログを確認してみましょう。
指2本でスマホ画面の拡大・縮小ができるようになっているはずです。
アフィンガー５初心者の失敗談
わたしは子テーマだけ修正して、親テーマの修正をしていなかったためにスマホに反映されず苦労しました。
テーマを修正するときは、子テーマと親テーマどちらもセットで確認することを学びました。
初心者のひとは覚えておくと良いです。
まとめ
ブログをスマホで画面拡大・縮小させる、アフィンガー５初心者向けの使い方はこちらです。
全体の流れ
- 子テーマにhead.phpがあるか確認
- レンタルサーバーからhead.phpを子テーマにダウンロード＆アップロード
- 子テーマ（affinger5 child）のテーマエディターを修正
- 親テーマ（affinger5）のテーマエディターを修正
※アフィンガー５の吹き出しでお困りのかたへ
アフィンガー５での吹き出しの作り方についてはこちらの記事をご覧ください。
-
-
アフィンガー５吹き出しの色変更＆右側＆作り方【画像20枚付】
続きを見る
※ブログを始めるのにレンタルサーバーで悩んでいるかたへ
ブログを始めるひとにおすすめのレンタルサーバーはConoha WING（コノハウィング）かエックスサーバーです。
スペックほぼ同じで、速度は少しコノハウィングが上です。
エックスサーバーは実績がある分えらばれやすいですが、どちらをえらんでも問題なくブログが始められます。
ちなみにわたしはエックスサーバーを使っています。
どちらもキャンペーンなど頻繁におこなっていますので、お得なほうを選ぶと良いでしょう。
エックスサーバー公式サイト＞＞https://www.xserver.ne.jp/
今回は以上です。
参考になればうれしいです。
ありがとうございました。
ブログ関連記事
- ブログ記事のネタ切れを防ぐ！すぐ使えるネタを１００個考えてみた
- ブログ半年では稼げない！ほぼアクセス０でも続けるコツは？
- ブログ収益化は難しい！初心者が【ブログを書く前にすべきこと】６選
- ブログ4ヶ月目でアクセスにうれしい変化！PV数や収益額一気見せ
- ブログ3ヶ月目のアクセス0脱却方法！ＰＶ＆収益＆記事数からの考察
- ブログ１ヶ月目のPVや収益はどれくらい？ブログ初心者がやることは？
- 【画像20枚付】アフィンガー５吹き出しの色変更＆右側＆作り方