モバイルメニューカスタマイズについて

> ホームには「家のマーク」が一般的ですが、合わせて追加は可能でしょうか？

jQueryで、追加すればいけます。
ただし、htmlの構造をよく理解して追加する必要があります。

#33232では、cssのflexの機能を利用して、メニューアイコンとその文字をorderにて位置変更しています。そのため、追加する順を間違えるとアイコンと文字が逆になるかも知れませんので注意が必要です。

追加方法としては、

$(“追加する親セレクタ”).append(“追加するidやclass”);の様な感じで追加できます。.appendは親セレクタの最後尾に要素を追加します。

[div id="parent"]
  //1回目のappend
  //2回目のappend
[/div]

このように追加されていくので順番に注意が必要です。

> ホームには「家のマーク」が一般的ですが、合わせて追加は可能でしょうか？

jQueryで、追加すればいけます。
ただし、htmlの構造をよく理解して追加する必要があります。

#33232では、cssのflexの機能を利用して、メニューアイコンとその文字をorderにて位置変更しています。そのため、追加する順を間違えるとアイコンと文字が逆になるかも知れませんので注意が必要です。

追加方法としては、

$(“追加する親セレクタ”).append(“追加するidやclass”);の様な感じで追加できます。.appendは親セレクタの最後尾に要素を追加します。

[div id="parent"]
  //1回目のappend
  //2回目のappend
[/div]

このように追加されていくので順番に注意が必要です。

Hidekichi様

ご返信、ありがとうございます。
思ったより難しそうですね。

可能な範囲で一度トライしてみます。
ありがとうございました。

再び申し訳ありません。

もう少しシンプルにご質問です。
素人なので、難しい用語が理解できていませんので・・。

１．スライドインライトのメニュー項目を並べ替えたり、文字を変更するにはテーマ編集のどこをカスタマイズすればよいでしょうか？

全てのページに対して必要な項目は、『①ホーム、②メニュー、③検索、④トップへ』だけにしたいです。
よって、次の２と３の作業が必要かと思います。
２．サイドバーは必要ないので、代わりに『ホーム』にしたいです。
３．記事ページの「次へ」「前へ」を削除したいです。

４．jQueryでホーム（家マーク）追加（シンプリシティに反映）する方法をよろしければ初心者でもわかるように教えてほしいです。

５．項目を並び替えるにはテーマ編集のどこを触ればよいかを教えてほしいです（１と重複するかもしれませんが）

きっと難しいカスタマイズとは思うのですが、どこを編集すればよいのかもよくわかっていないため、よろしくお願い致します。
あまり難しいようでしたらあきらめます。

1:

/css/footer-mobile-buttons.css でスタイルは変更できますが、直接書き変えてしまうと何かしらあった時に面倒なので該当部分をコメントアウトしておいて、新たに追記します。
あるいは、できるかどうかは試してみないとアレなんですけど、子テーマにcssフォルダを作ってその中にfooter-mobile-buttons.css を新設し、そこに追記して行く方法でも構いません。

が、この場合は、親テーマのcssを継承している可能性があり、子テーマ側に必要のない親テーマのプロパティを打ち消すスタイルを書く必要があるので注意して下さい。

2:

サイドバーが必要ない場合は、サイドバー部分のセレクタをdisplay: noneすれば消えます。情報的にはメニューに存在することになりますが、小さな画像を追加するよりも軽いので気にしなくても大丈夫です。
また、スライドインのセレクタは、スライドインを使用していないと使われないものなので、常時display:noneしておいて問題ありません。

3:

これも2と同じことです。PHPで消してしまう(初めから出力させない)と言う方法も取れますが、プログラムに慣れていないと余計面倒なことになる可能性があります。

4:
jQueryでホーム画像を追加するためには、htmlでホーム画像を追加する内容をjQueryで追加します。
サンプル: ブロックにホーム画像を追加する | jsFiddle

サンプル左上がhtml、右上がcss、左下がjQuery、右下がresultです。ここでは、元々html内にある.testと言う中身のないブロック内に、.innerと言うブロックを追加して、その中にfontAwesomeのホーム画像を2倍サイズで表示するタグを追加し、表示させています。

chromeが簡単なのでchromeで説明すると、F12キーよりデベロッパーツールのパネルを開きます。開いたパネルの上部左側にモバイルエミュレーターのボタンがあるので、それをクリックしエミュレーター画面の上部サイズが書いてある所のドロップダウンメニューより、iPhone6あたりを選んだとします。

選んだ段階で、何かしらメッセージが画面上部に出ると思うので、F5キー等で画面をリロードします。するとスマホの画面になるかと思うので、スライドインのメニュー上で右クリックをし、「要素を調査」みたいのをコンテキストメニューから選びます。
すると、パネル左側にhtmlが出て、右側には現在選択されているセレクタのプロパティが出ます。これらを駆使して、目的のセレクタを探します。あとはそのセレクタに対してcssを構築していくという感じです。

右側に表示されているプロパティ部分は、リアルタイムで数値等の変更を反映させる機能があります。ここらでやりたいことを順番に試していき、それを実際のcssに書き込んだりしてテストしていきます。

5:

項目の並び替えはcssのflex機能のorderと言うプロパティで自由に行うことができます。flexを機能させるためには、目的の要素の親になる要素にflexを仕込みます。

サンプル: flex並び順の変更 | jsFiddle(ベンダープレフィックスを付けてないので一部のブラウザでは動作しません。chrome,firefox推奨)

サンプルではulの中のliに何かしらしたいと思った場合、liの親であるulに対してflexを仕込みます。

ご連絡ありがとうございます。

/css/footer-mobile-buttons.css とは
style.cssの中にfooter-mobile-buttons.cssが存在するということでしょうか？

よろしくお願い致します。

オリジナルの在処はSimplicityの親フォルダの中のcssフォルダです。
footer-mobile-buttons.cssの他にも色によってdarkとlightがあるので、darkとlightのcssは色情報やらで、基本的なスタイルはfooter-mobile-buttons.cssに書かれているかと思うんですが、もしかするとdark、lightそれぞれにpaddingやらmarginが書かれていた場合はそれらも修正しないといけません。

まぁ修正というか、子テーマ側のfooter-mobile-buttons.cssあたりで打ち消せばいいんですけどね。

cssは後から読み込むほうが優先されるので、!important付きのセレクタ以外はどこに書いても後から書いてある方(後から読み込む方)が動作します。

お返事ありがとうございます。
そうなんですね。
下手に触ると動作にも影響する可能性もゼロではなさそうですね。。私にはやはり難しそうでした。
いろいろ教えて頂いたのに申し訳ありません。

今後のバージョンアップでスライドインにホームボタンが追加されることを期待して待つことにします。
現状、スマホでホームボタンにたどり着くためには、一番上に戻るか、一番下までいくか、メニューに入っていくかなどの最低２アクションが必要なので、常に表示されている（常に１アクションで戻れる）スライドインにホームがあるのが理想かなと個人的に思いました。

また、記事ページのスライドインでの「次へ」「前へ」もホームページの内容によっては全く必要ないので、今後検討頂けるなら、スライドインの中身を自分で組み合わせが可能になれば、もっと理想です。

少数意見かもしれませんが、是非ともご検討のほどよろしくお願い致します。

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

ホームアイコンをいれるだけなら、

サンプル: スライドインメニューにホームアイコンを入れる | jsFiddle

だけの話なんですけどね。

jQuery部分で、homeAddressのところには、自分のサイトのアドレスを入れて下さい。
cssは子テーマstyle.cssでもイケると思います。

ただ、最も良いのは、メニューからホームに戻るのではなく、記事から別の記事へと誘導できることだろうと思うんですよね。
いくつか記事を読んで、サイトが気に入ったら勝手にホームに行ってブックマークなり何かしらすると思うんですが、ホームから何かしらの記事→またホーム→何かしらの記事と言う流れを作ってしまうとかえって面倒だと思ったりする人もいるかも知れません。

意識の高い系の人たち(笑)は、pocketやevernote、はたまたfeedlyのようなものを多用すると言われているので、サイト単位というより記事単位でいわゆるブックマークしていることも多いと思うんですよ。feedlyはまた違いますが。
シェアボタンから仮にtweetされたとしてもやはり記事単位ですし、なかなかfollowまではしてくれなかったりってありますよね。

rssとか便利なのでfeedlyをもっと活用してもらえると、ホーム(トップページ)すら必要なくなるんですが、そうは問屋が卸さないためなかなか難しい所です。

中身が気に入ったら、おそらく訪問者が勝手に手間かけてホームは探してブックマークなりをすると思うので、2ステップぐらいなら特別問題があるわけではないと僕は思います。

僕はリンクからトップへ戻ったりとか、前のページ、次のページヘの移動とか面倒臭いのでたいていマウスジェスチャーで済ましますけども(笑)
なのでスマホやタブレットは余程のことがないと使いません。

確か、スマホとかもtouchmoveとかというイベントがあったと思うので、それでマウスジェスチャーみたいにしたら1アクションで色々できますけど、それを説明するページを作らないといけないというのが逆に面倒臭いという。仮に説明があってもそれを読むのも面倒ですしね(笑)

あれをやるとこれが疎かになるみたいのは案外あるので、ベストな解答というのはなかなか見つからなかったりもします。誰でもどんな環境でも便利と思えるUIを作るのは難しいもんですね。

このフォーラムにはいつもお世話になっています。

トップへ戻るボタンを画像で設定しています。
スマホでサイトを表示したとき、トップへ戻るボタンの画像がパソコンで表示した時と同じサイズで表示されているので、スマホで表示するときの画像サイズをcssなどで小さく設定したいと思っています。

どこで画像が設定されているのか、少し見てみたのですが、よく分かりませんでした。

すみませんがよろしくお願いします。

ごめんなさい。違う場所に投稿してしまいました。。