AFFINGER5(WING)スマホ用スライドメニューの設定方法をわかりやすく解説ホームパソコンWordPressモバイルサービスそらよりお問合せパソコンの処分にお困りなら!無料回収データを無料ソフトで消去&パソコンを宅配便で回収する国認定「リネット」が安心・かんたんだった。2019年3月29日AFFINGER4からAFFINGER5になりスマホでスライド表示方式のメニューが使えるようになりました。ほかのサイトと大きく差別化できるユーザーインターフェイスに優れた機能なので、ぜひ活用したいところです。この記事ではスマホ用スライドメニューに絞り、AFFINGER初心者の方でもかんたんに設定できるようていねいに解説します。AFFINGERでのプライマリーメニューの設定がすでに済んでいることを前提とします。スマホ用スライドメニューとはスマホ用スライドメニューはスマートフォントップ(下画像の右)の最上部の三本線マークをタップすることで表示されるメニューです。最上部の三本線マークを左右のどちらかに設定することが可能で、それに伴いスマホ用スライドメニューを左や右に表示することができます。ここでその呼び名についてご注意いただきたいのですが、スマホ用スライドメニューとは左右のサイドにスライド方式で表示できる領域を指し、決してメニューそのものの名称ではありません。厳密に記述すればスマホ用スライドメニューにはスマートフォン用メニューが表示されるとなります。下の画像で詳しく解説しましょう。AFFINGER5ではスマホ用として二つのメニューが用意されています。上の画像右からスマートフォン用ミドルメニュースマートフォンのトップに表示されるメニューです。最上段左の三本線マークをタップし、スマホ用スライドメニューに表示されるメニューです。この違いをしっかり認識しておいてください。三本線メニューマークとロゴの位置関係についてお問い合わせをいただきました。そらよりブログは現在[A]となっています。以下のように三本線メニューマークの真横にご自身のロゴが表示される方もいらっしゃいます。[B]これはダッシュボード「外観」>「カスタマイズ」>「ロゴ画像」>「モバイル用ロゴ画像」の設定の差によるものです。[A]の表示はつぎのように「モバイル用ロゴ(又はタイトル)を使用する」以下のチェックボボックスを外してあります。この部分にチェックが入っていると[B]の表示となります。下の画像内の注意書きにあるように「スマホ追加メニュー(SNSリンクボタンのあるスペース)は表示されなくなります」。ここでご注意いただきたいのはPC用に設定したロゴ画像がある程度大きくないと、チェックを入れない場合、スマホ用ではとても小さく表示されてしまう点です。横1114pxで挿入しています。「PC用のロゴ画像を大きくしたくない」と「スマホ用ロゴ画像を使いたくない」はトレード・オフの関係にあります。スマートフォン用メニューの設定方法[1]スマホ用スライドメニューに表示されるスマートフォン用メニューの設定方法を解説します。ダッシュボード/外観/メニューを表示します。[2]「メニューを編集タブ」で「編集するメニューを選択」の内容に「スマートフォン用メニュー」の文言が含まれていることを確認してください。そらよりではデフォルトの「プライマリースティンガーヘッダー」メニューに含まれています。[3]含まれていなければ同画面最下段の「スマートフォン用メニュー」にチェックを入れます。[4]そして「位置の管理タブ」を選択・表示し、「スマートフォン用メニュー」に[2][3]で設定したメニューを選択します。スマホ用スライドメニューのアイコンと追加メニューダッシュボード/AFFINGER5管理/メニューの「スマホ用スライドメニュー」でアイコンと追加メニューが設定できます。【アイコンデザイン】デフォルトでは「ノーマル」が設定されています。「クール」は三本線が細くなります。「カット」は三本線マークが斜めに切られたデザインになります。【メニューの位置】スマホ用スライドメニューの左右の位置に切り替えはここで行います。【追加メニューのWebフォント】ここも混乱しやすいポイントです。そらよりはスマホ用スライドメニュー内部に「追加メニュー」が表示されるのかとばかり思っていました。なくスマートフォントップの三本線マークの右に表示されます。そらよりはTwitterアカウントにリンクするようにしました。WebフォントはFontAwesomeのVer4.7.0であることに注意してください。各アイコンは以下のサイトで確認できます。https://fontawesome.com/v4.7.0/icons/そらよりはTwitterのアイコンを使用したいのでアイコン名であるfa-twitterを入力しました。続いて「追加メニューに表示する文字」も入力しましょう。スマホ用スライドメニューに最新の投稿一覧をスマホ用スライドメニューのスマートフォン用メニューの下にウィジェットの操作で任意の要素を配置することができます。そらよりは「05_STINGER最新の投稿一覧」ウィジェットを配置しました。ダッシュボード/外観/ウィジェットで「アコーディオンスライドメニュー内下に表示」のラベルに「05_STINGER最新の投稿一覧」ウィジェットをドラッグして挿入します。※現在はウィジェットの表記が「アコーディオンメニュー」から「スライドメニュー」へと変更されています。ここも混乱しやすい部分です。「スマホ用スライドメニュー」だとばかり思っていた領域が「アコーディオンメニュー」と定義されています。両者は同一のものと認識してかまわないようです。2018年12月1日追記:アイコン部分の背景が四角く切り取られるケースがあります。原因は後述の「スライドメニューバー背景色」と連動していることによるものです。「スライドメニュー内背景色」と同一の色を使用すると消えます。スマホ用スライドメニューのカラーの設定スマートフォントップとスライドメニューの各部のカラーの設定はダッシュボード/外観/カスタマイズの「[+]メニューのカラー設定」にある「スマートフォン」と「スマホ追加メニュー」の各項で行います。三本線マークのスクロール追尾そらよりはスマホ用スライドメニューを表示するための三本線マークを画面のスクロールに併せて追尾する機能を設定するとオーディエンスがいつでもメニューにアクセスできるようになります。ダッシュボード/外観/カスタマイズの「[+]メニューのカラー設定」にある「スマートフォン」の項(「スマホ追加メニュー」のすぐ上)にある「表示パターンB(スクロール追尾)」にチェックを入れます。mysorayori」を開設して間もなく、登録したGoogleサーチコンソールからモバイルユーザビリティについて「クリック可能な要素同士が近すぎる」という理由で修正を求めるメールが届きました。スマホで確認すると三本線とロゴマークが透過となり常時追尾したままの状態で表示されています。記事が見にくくなるだけでなく、アドセンス広告と重なった場合、規約に触れる可能性もあります。そこで上記の「表示パターンB(スクロール追尾)」のチェックを外し再評価を依頼したところ、2日後に「改善」された旨の連絡がありました。その後、再度「表示パターンB(スクロール追尾)」にチェックを入れ「追尾」を有効にしたところ今度は不具合の発生は見られませんでした。原因は不明ですが、もしも同様のケースでお困りの方は、チェックの有効無効を繰り返すことで改善されるものと思われます。これでスマホ用スライドメニューの設定が完了です。スマートフォン用ミドルメニューの非表示なおそらよりはスマートフォン用ミドルメニューを非表示にしています。使いやすくインパクトのあるスマホ用スライドメニューへとオーディエンスを誘導するためです。ダッシュボード/AFFINGER5管理/メニューの「スマホ用スライドメニュー」で下段にある「スマホ用ミドルメニューを表示する」の項のチェックを外します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。関連記事WordPressブラウザGoogleクロームでキャッシュをクリア(リセット)する方法WordPressでダッシュボードから設定を変更したり、テーマをカスタマイズした際、表示を高速化するためのキャッシュが残り、変更した部分が反映されないことがよくあります。...スポンサーリンクWordPressWING(AFFINGER5版)の「スタイル」が消えた?どこ行ったの?なんてことはありません。「書式」という名に替わり、ここにありました。モバイルタブレット活用術:Googleドライブの無料ストレージを増やす本当のウラ技タブレットとファイル共有するためパソコンにGoogleドライブを準備する方法をこちらの記事で解説しました。普段、パソコンをメインに使っていると、スマホアプリで不便を感じても放置していることってありませんか。...PREVヤフオク!で自分の出品リストから商品を検索する方法NEXTインスタグラムの「ネームタグ」って何?かわいい背景画像の設定方法は?パソコンの処分にお困りなら!無料回収データを無料ソフトで消去&パソコンを宅配便で回収する国認定「リネット」が安心・かんたんだった。無線LANスポンサーリンクスポンサーリンク快適・親切サポート、絶え間なく進化する安心感から管理する7サイトすべてをエックスサーバーにまとめています。モバイル2019/1/21ZenFoneでアラーム音や着信音、通知音を変更・追加する方法をやさしく解説!Androidスマホの場合、アラーム音の音源はAlarmsフォルダ、着信音の音源はRingtonesフォルダ、通知音の音源はNotificationsフォルダにそれぞれ格納されていると言われます。Goはそうなっていません。ダウンロードした音源ファイル(mp3)をファイルマネージャーで移動しようとしてもAlarmsやNotificationsが見当たらないのです。試し、ようやく設定する方法をみつけたので基本からまとめてご紹介します。モバイル2019/7/1データを無料ソフトで消去&パソコンを宅配便で回収する国認定「リネット」が安心・かんたんだった使わなくなったノートパソコンを安心宅配回収のリサイクル会社「リネット」に引き取ってもらったので、その詳細をシェアします。モバイル2019/4/19スマホの着信音や通知音、ミュートがうまく設定できない!よくわからない!たとえばLINEの通知音がうるさいので無音にするとこんどは電話の着信音が鳴らず気づけない。厳粛な場でミュート(消音)にしたつもりなのに着信音がけたたましく鳴ってしまう。そんなスマホの“音”の管理でお困りではありませんか。毎日使っていて不便だけど調べるのが面倒でがまんしている、という方も少なくないのでは。今回はいまさら聞けない、そんなスマホの“音”まわりのことを整理してみました。決心したつぎに来るアクションといえば独自ドメインの取得、そしてWordPressでの運用となる方が少なくないのでは。そこで問題となるのがレンタルサーバーの選定です。この記事ではコスト優先のロリポップ(LoliPop)と高速・安定稼働のエックスサーバー(XSERVER)のどちらがおすすめであるか、という話をします。結論を先に申し上げれば1年目はロリポップ(LoliPop)ライトでコストを極力抑える。Clipperでクラウドのファイル管理が超快適に!EvernoteがGoogleドライブと連携できるようになりました。うれしいことをやってくれるじゃないですかEvernoteさんというわけで、さっそく使ってみましたよ。いやいやありがたいけどさ」って感じで、狂喜乱舞であります。そのメリットは、Evernoteで仮想的に使えるデータ容量が一気に拡大したこと。両者のファイルを一括管理できるようになりました。587と安全性の低いアプリと2段階認証2019/12/18サービスAmazonで注文した商品を間違った届け先へ送ってしまった?2019/12/12パソコンExcelで「貼り付けのオプション(Ctrlキー)」が邪魔でペーストできない?2019/12/11sunnydayfunny初めてのパソコンはMacintoshQuadra700。ポストスクリプトのモノクロプリンターなど100万円超の大投資でした。その後MacはCUBE、G4までおつきあいしましたが、コスパ重視でWinに。日々の壮絶なブレイクスルーの成果をシェアしております。免責事項及び著作権Amazon.co.jpアソシエイトそらよりホームお問合せ本サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。