- このトピックには22件の返信、2人の参加者があり、最後に
により8年、 4ヶ月前に更新されました。
-
投稿
-
-
スマホで表示されるボタンのカスタマイズについて
Simplicity2の最新版を利用している初心者です。
PHPは分かりませんが
HTML、スタイルシート、プログミングの
初歩的な知識は有ります。質問内容です。
外観 → カスタマイズ → レイアウト（全体・リスト） → モバイルメニュータイプで「スライドイン」を選択すると、スマホ画面の上か下に「メニュー、検索、前へ、次へ、トップへ、サイドバー」の6つのボタンが現れます。
１．ボタンの文字の変更
「前へ」→「前の記事」
「次へ」→「次の記事」
「トップへ」→「ページトップ」と変更したいです。
２．ボタンの機能の変更
「前へ」「次へ」ボタンを押したとき、パソコンのブラウザの様に、直前に見たサイトに戻る様にしたいです。
３．ボタンの追加
トップページに戻れる「ホームボタン」を追加したいです。
（家のアイコンと「ホーム」の文字のボタン）４．スライドインメニューの表示幅の変更
「メニュー」「サイドバー」を押すと、左右からメニューが現れます。
これらの表示幅を変更したいです。以上です。
難しければ、どれかいつでも構いません。出来れば、テーマをアップデートしても
変更が消えない方が良いです。よろしくお願いします。
-
どれも実現できると思いますが、1と3の時に画面内におさまりますかね？
3は過去のトピックに回答はあると思います。2つか3つぐらい同じような内容を答えた記憶があるので。
4は例えばどれぐらいにと言うのを何かしらで書いてもらえることはできますか？
chromeの携帯エミュレーター等でjustサイズのスクリーンショットをとって、何かしらのソフトで、線を引いてもらいここらぐらいまでとか。具体的にpxなりでサイズがわかれば尚良しです。あとスライドインはlight,darkのどれを使ってますか？
また上下はどっちでも良いですが念の為に書いておいてもらえると助かります。 -
1はfooter-mobile-buttons.cssを変更すればできます
-
footer-mobile-buttonsの205行目ぐらいから
-
画面内に収まるかの内容は、つまり、たわばさんはiphone6plusとかを使ってて比較的広い画面を利用できるかもしれませんが、世間では320pxギリと言う人もいます。なので、個人的に満足行くように実装しても、見に来る人は320pxギリな人かも知れないと言うことです。
ここらをどうするか、何かしらアイデアがあれば。
もちろん問題なく収まるようならそれでできると思いますけれども。 -
ただ、管理画面から変更ができないので
面倒です
親テーマなのでアップデート時に書き換えられますし・・・ -
Bliskを使ってみたのですが
iPhone6plusとかiPhone4でも切れたりしませんでした -
お世話になっておりますm(__)m
wordpress自体初心者なので
用語などが間違っていたらすいません。hidekichiさんへ
＞3は過去のトピックに回答はあると思います。
サイト内検索で「ホームボタン」で検索したのですが
イマイチよく分かりませんでした。スペースや技術的に難しければ
このサイトのフッターの様に「トップ お問い合わせ サイトマップ」
といった感じで表示したり
記事の一番最後にサイト名（トップに戻る）
みたいな感じで表示してもOKです。
＞4は例えばどれぐらいにと言うのを何かしらで書いてもらえることはできますか？
今の所、260ピクセルぐらいなのですが
300ピクセルぐらい欲しいです。もしくは、画面幅の90％といった感じでも構いません。
メニューは今の所、問題無いのですが
サイドバーを表示すると、カテゴリ名が長い場合
記事数の表示が２行目になってしまい見づらいからです。
こんな感じになります。Simplicityの使い方（30）
Simplicityの便利なカスタマイズ方法
（51）
Simplicityをオススメする100の理由！
（100）
Simplicityの裏技（20）＞スライドインはlight,darkのどれを使ってますか？
スライドインダーク（ボタン下）
を使っています。みきさんへ
有難うございます。
調べて見ます。 -
いろいろ項目が多くあるので、とりあえず1だけ書くと、子テーマのstyle.cssに以下のスタイルを貼り付けて、テキストを変更すればいけるかと思います。
.menu-caption-menu::before{ content: 'メニュー'; } .menu-caption-search::before{ content: '検索'; } .menu-caption-prev::before{ content: '前へ'; } .menu-caption-next::before{ content: '次へ'; } .menu-caption-top::before{ content: 'トップへ'; } .menu-caption-sidebar::before{ content: 'サイドバー'; }もし、変わらないようであれば、CSSセレクタを工夫するか、!important（作法とは外れますが）などを使用してみてください。
-
-
3について、hidekichiさんが書かれているのは、このトピックかと思います。多分。
モバイルメニューカスタマイズについて -
それを更に改造して、
サンプル: ホームボタン挿入、prev、nextで履歴操作 | jsFiddle
2の、
> 「前へ」「次へ」ボタンを押したとき、パソコンのブラウザの
> 様に、直前に見たサイトに戻る様にしたいです。と同じようにしましたが、直前に見たサイトに戻ると言うことは、例えばSimplicity公式を見てからたわばさんのサイトを見たとして、その時にprevボタンを押すと、Simplicity公式に戻ることになります。もちろんそこには同じメニューで進むボタンがあっても、Simplicityのサイトに行ってしまっているのでSimplicityの次の記事に移動します。
ブラウザと同じ挙動の進む、戻るができるのはたわばさんのサイト内だけです。
4はcssの変更なので、利用しているsliknavのcssを変えても良いですが、上記jQueryで、bodyタグに.sidr-loadを入れるようにしましたので、
.sidr-load #sidebar { width: 300px; }でスタイルできると思います。他の部分についてもボタン部分のセレクタがわかれば、上記方法にて子テーマstyle.cssでスタイルできます。
例えば、トップへをトップへ戻るにするなら、
.sidr-load .menu-caption-top::before {
content: ‘トップへ戻る’;
} -
うほう、送信押してもた。
.sidr-load .menu-caption-top::before { content: ‘トップへ戻る’; }こんな感じで、文字も変えることはできます。
jQueryは子テーマjavascript.jsに追記します。スタイルは子テーマstyle.cssです。もし上記のようにして変わらない場合は、!important付きで書けばいけると思いますが、多分書き換えられます。
-
あ、わいひらさんも書いてたんですね（笑）
文字は、別に.sidr-loadは必要ないかも知れませんね。わいひらさんの書き方で上書きできます。理由としては子テーマstyle.cssが該当のcssより後で読み込まれるからです。
#sidebarは.sidr-loadが必要かと思います。メディアクエリで携帯の画面サイズでやってもいけます。メディアクエリでするのであれば、jQueryのbodyにaddClassしているのは必要ありません。
-
わいひらさん、hidekichiさん
有難うございますm(__)mお陰様で
「１．ボタンの文字の変更」
は「Simplicity2 child: mobile.css」に記述して実現出来ました。「２．ボタンの機能の変更」
は、今回は変更は見合わせます。「３．ボタンの追加」
これに関しては、リンク先の質問者の「テツ」さんと同じで
私のスキルでは無理そうです。「スライドイン」を選択した時に
上または下に表示されるボタンの編集機能「ホーム」などの需要が高そうなボタンを配置したり
逆に「←前へ」「→次へ」などの需要が低そうなボタンの削除が出来る様になることを期待して
待っていますm(__)m「４．スライドインメニューの表示幅の変更」
に関しては、１同様に
「Simplicity2 child: mobile.css」に記述しました。
キャッシュが残っているのか、今の所反映されませんが
暫く様子を見てみます。 -
2,3については、子テーマjavascript.jsにサンプルのjs欄のコピペだけですけどね。
自分サイトのアドレスを一部入れる必要がありますが、サンプル内のjs欄のコメントを見てもらえれば何をするのかはパッと解ると思います。コピペした内容を消せば元に戻るわけですから、試しにやってみられてはどうですか？
で、4については、このコピペを入れればbodyタグにクラスが入るので、各部位のセレクタさえわかれば、このメニューが読み込まれている時だけスタイルできるcssが書けると言うことです。「←前へ」「→次へ」メニューがいらなければ、cssで消せばよいだけですし、そんなに難しいことではありません。cssだけでホームボタンの追加はできても機能はもたせられないのでjQueryが必要ですが、ホームはメニューからもたどれればパンくずにもありますし、そもそもホームへ戻ることはそんなに無いと思うので僕は重要度は低いと思います。
-
hidekichiさんへ
＞子テーマjavascript.jsにサンプルのjs欄のコピペだけですけどね。
お陰様で出来ました。
Bliskで「Home」ボタンが表示されているのを確認しました。
有難うございますm(__)m手持ちのスマホには表示されていませんが
こちらは、キャッシュが残っているのかも知れません。「２．ボタンの機能の変更」
については、hidekichiさんのご指摘通り
直前に訪れた他サイトにまで
飛んで行きそうなので
今の所、保留致します。＞「←前へ」「→次へ」メニューがいらなければ、cssで消せばよいだけですし、そんなに難しいことではありません。
これに関しては、
「simplicity 前へ 次へ 消す」
「simplicity スマホ 前へ 次へ 消す」でgoogle検索したのですが分かりませんでした。
（記事本文下の「前へ 次へ」を消す方法が出てしまいます）ジャンルがバラバラの雑記ブログなので
「←前へ」「→次へ」ボタンは無くても良いのですが
逆に、有っても困らないので、消せなくても大丈夫です。＞ホームはメニューからもたどれればパンくずにもありますし
＞そもそもホームへ戻ることはそんなに無いと思うので僕は重要度は低いと思います。このサイトの様に
素晴らしい内容のサイトなら良いのですが
私のサイトは、大したサイトでは無いので
一番下まで行った後に、そのままページを閉じられる可能性が
高いです(;^ω^)「４．スライドインメニューの表示幅の変更」
についても出来ました。
（先程は、スタイルシートに記述した内容が、コメントタグの閉じ忘れで全てコメントアウトされてました・・） -
とりあえず、次のバージョンでは、ホームボタンのHTMLは仕込んでおこうと思います（CSSで指定するだけで表示できるように）。
すると、表示するボタンが多くなりすぎるので、「ホーム」を表示するか「前へ」「次へ」を表示するのかが悩ましいところです（どちらもあまり使用するボタンではなさそうなので）。
僕は、あまりスマートホンでサイトを見ないので、ここら辺は、スマホユーザーの方の意見をいろいろ聞いてみたいところです。「前へ」「次へ」ボタンの非表示は、以下のようなコードでできるかと思います。
a#footer-button-prev, a#footer-button-next{ display: none; }CSSセレクターを調べるには、デベロッパーツール等で以下の方法などで調べることができます。
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方 -
> 一番下まで行った後に、そのままページを閉じられる可能性が
> 高いです(;^ω^)homeに戻れる選択肢を増やすのは悪いことではないですが、今時はホームから辿って各記事を見ると言うのは昔に比べるととても低くなっていると思います。
まとめあんてなや、ある記事のブログカードやリンク、twitterなどのSNSからというような、サイトのトップページへのリンクより、各記事へ直接来ることがかなり増えていると思います。yahooでさえディレクトリサーチを無くすとか何とか言う時代ですから。世間では直帰率を下げるために、サイドバーに最新記事を入れたり、記事下に関連記事を入れたりと色々やるわけです。
つまり各ページがトップページの代わりをしているわけです。
Simplicity形式のブログでトップページへ戻った所で、そこには最新記事のリストがあるだけです。トップページにしか無い情報があれば別ですが、トップページにある情報は記事ページの中にもあるはずなのです。
たいていの人は、お気に入りのサイトがあれば記事単体をブックマークするよりも、サイト全体を見れるようにトップページをお気に入りに入れることがあるかと思いますが、どのページをお気に入りに入れられたとしてもページ全体が見回せるような構造になっている方が良いかと思います。Simplicityの公式であったとしても、僕のサイトでも世間的に有名なブログでもどこでもパッと読んでみて気に入らなければそこで閉じられると言うのは避けられるものではありません。それを回避するためにホームボタンを入れたとして、選択肢が増えるだけでおそらくは閉じられてしまうことがほとんどだと思います。
初めてサイトに来る人はもしかすると他に何かあるかも知れないと一度ぐらいはホームを押すかも知れませんが、そこでダメだと思ったら次からの訪問も危うくなるかも知れません。
理屈は簡単なことです。週刊ジャンプを買うのにそこにこち亀もワンピースもなければ買わないでしょう？別に他のものでも良いですが、目的のものがなければ本体は買わないんですよ。仮に読んだことのない新人の漫画が20ページ増刷とあって本体の値段を下げたとしても、購買に走るかは疑問点です。
ただ、安くなってるし試しに読んでみようと言う人もいるはずです。何がその人にヒットするかはわかりませんが、多くのブログはコンビニに積まれている週刊ジャンプなんです。そのほとんどが全部を読むことはなく、ある漫画をペラペラと、つまりは何かしらの記事を立ち読みになってしまうんです。なのでどんな漫画を掲載するか、どんな内容の話にするか、有名作家を取り込もうかとアレヤコレヤを考える必要があります。最も重要なのはその中身です。
-
お世話になっております。
わいひらさんへ
＞次のバージョンでは、ホームボタンのHTMLは仕込んでおこうと思います
有難うございますm(__)m
＞「ホーム」を表示するか「前へ」「次へ」を表示するのかが悩ましいところです
「前へ」「次へ」は、日記ブログや
こちらの、わいひらさんのサイトの様に
テーマが明確なサイトは有った方が良いと思います。逆に、テーマがバラバラなサイトの場合は
あまり必要無いかも知れません。「進撃の巨人」で検索して来て、記事を見た後
「次へ」を押したら
「WordPressのインストール」
「WordPressのカスタマイズ」
などの記事が出ても、需要無さそうです(^-^;＞「前へ」「次へ」ボタンの非表示は、以下のようなコードでできるかと思います。
お陰様で出来ました。
有難うございます。＞CSSセレクターを調べるには、デベロッパーツール等で以下の方法などで調べることができます。
使ったことが無いのですが、便利そうですね。
研究してみます。hidekichiさんへ
私は、人様のトップページを見ることが多いので
ホームボタンを希望したのですが
私が少数派なのかも知れません(;^ω^)面白いサイトや、情報が古いサイトなど
とりあえずトップページを見て
今も更新されているか
確認したりします。ドラゴンボールを途中から見て面白かったので
「最初から見てみたい」
という気持ちの様なものです(^-^;ホームボタンですが
Bliskでは表示されているのですが
スマホでは、未だに表示出来ません。
恐らく、私のコードの記述が
中途半場なのだと思います。 -
> ドラゴンボールを途中から見て面白かったので
> 「最初から見てみたい」それですよ。面白いと思わせることで他のページヘの回遊に繋がるんです。
記事が面白くない場合はデザインが優れていようと、どれだけお金をかけたサイトであったとしても問答無用に閉じられるのです。
訪れたページが希望のものでない場合でも、書き方が面白いとか関連記事に面白そうなものがあると思わせることが重要です。ドラゴンボールを読み終えた後に開いたページがたまたま面白かったら候補が増えるわけです。
その候補を増やす必要があるわけです。それがリピーターに繋がると僕は思います。ホームボタンの設置と言うのは、多少なりともその意味はありますが全てではありません。記事の途中からでも別ページに行ける道筋を作っていけるように、記事単体がトップページの役目をできるようにしておく事が大切です。
トップページ起点で行くのであれば、トップページからそれぞれのページに流れるような演出が必要ですが、面白いかどうかは中を見ないとわからないんです。ほらアフィリエイト目的ですんごい短い2chまとめで、広告ばっかり載ってるサイトってあるじゃないですか、そこに好んでいく人はいないでしょう？またそのページのホームを辿って他のページを見ようと思うでしょうか？
同じことが書いてあるなら内容が充実したページを探しますよね、そういうことです。 -
-
お世話になっております。
先程、スマホでも無事
ホームボタンが表示されました。
どうやらキャッシュが、ずっと残っていた様です(^-^;他にも、カスタマイズしたい箇所がいくつか有るのですが
Chromeデベロッパーツールなどを使って研究してみます。皆さん、色々有難うございましたm(__)m
-
- トピック「スマホで表示されるボタンのカスタマイズについて」には新しい返信をつけることはできません。