スマホにてグローバルメニューを常にフッター位置に固定で載せたい。

モバイルのデフォルトのメニューを使われているんですかね？

> スマホ版のみフッター位置ぐらいに常に固定したいのですができますか？

これはできなくはないですが、そしたらどうやってそのメニューを開く考えですか？

ひとまず必要なこととしては、どのメニューを使っているのかなど、現在のサイトの状態を具体的に書いて下さい。デフォルトのアコーディオンタイプのものであれば、それをどう開くつもりかを具体的に書いて下さい。

夜分申し訳ありません返信ありがとうございます。

なるほどです(;^ω^)
メニューは残したまま（今の状態でも）いいのですが

フッター位置に固定で配置しているリンク
をモバイル版のみ、カスタムしたいことが一番の目的です。

PCではサイドバーにカスタムメニューを使い配置していますが、
モバイルで見たときにもう少しオシャレにできないかなと思い質問させていただきました。

サイトはこちらになります。
http://aquakoke.com/

初心者なにかとお手数をおかけしていますが、宜しくお願い致します。

おしゃれがどういうものかが問題ではありますが、例えばのサンプルとして。

サンプル: ナビをモバイル時にパネルで表示 | codepen
※ cssはscssで書いてあります。css欄のview compiledでcssに変換できます。

jQueryの最初の方に書いてある、var sidebarMenuを通常のグローバルメニューから拾うようにしていますが、何かしらサイドバーの中にあるメニューがメインのメニューと異なる場合は、それを指定すれば適用できます。
ひとまず現在のサイトのサイドバーのメニューを拾えるようにもしてあります。var sidebarMenuの前の//を付け替えるだけです。

panelは右からも左からもできます。

jQueryの中の、

$("body")
	.append("<div class='panel-switch'>")
	.append("<div class='panel left'>");

この部分で、「panel left」のleftをrightにするだけです。

一応、パネルが出現した時にパネル以外をクリックしたらパネルが閉じているようにしています。あわせて背景がボケるようにしていますが、単にcssでぼかしているだけなので、要素をクリックできてしまいます。
クリックできないようにもできますが、とりあえず「おしゃれ」が何か？と言う所に引っかかってあまり手を入れていません。

パネルが出現した時に、bodyをスクロールしないようにしてありますが、iosなどではできてしまうかもしれません。

ひとまずこんな感じでどうでしょうか？

返信ありがとうございます。
おしゃれ　という曖昧な言葉を使ってしまい申し訳ないです。
明確にします。

上が現在で、下のようなデザインにしたいのと、色は文字がみやすい
青系がいいなと考えています。
これをするには子テーマに追加するようなのみの作業では難しいのでしょうか？？

> 下のようなデザインにしたい

下のようなデザインのどの要素にしたいと考えられてますか？
まんま同じにもできますが、

メニュー部分だけ背景濃グレーにすると他とのデザインの兼ね合いもありますから、ページ全体を濃グレーにしたいかどうか？
メニュー部分だけそうするという場合は、その上にあるカテゴリ部分はどうするか？
背景が暗いと青とだと見えないだろうと思うので水色っぽくてもよいか？

など不明な点もありますが、

サンプル: 前のサンプルのフォークで、サイドバーのナビを表示したままモバイル時、スタイル変更 | codepen

だいたいでやってるので、もう少し上手く書けそうですが、ひとまず疑問点がまだ残っているので、こんな感じかと。

Hidekichi様
お手数をおかけしています(´;ω;｀)すいませんありがとうございます。
スマホからサンプルみさせていただきました。
すごいです（笑）ありがとうございます。

メニュー部分だけ背景濃グレーにすると他とのデザインの兼ね合いもありますから、ページ全体を濃グレーにしたいかどうか？
ページはこのままにしたいです。

その上にあるカテゴリ部分はどうするか？
このことをまったく考えもしないで発言していました。

カテゴリーは背景　青　文字　白
メニュー　背景　このしてもらった色　　文字現在青→→白

に変更できますでしょうか？？
宜しくお願い致します。

これを作ってもらい、みさせていただいてますが
完成した場合は子テーマに追加で変更できるのでしょうか？？

詳しくやり方、変更方法など
書いていただけたらとおもいます。

無知ですいません。
宜しくお願い致します。

#51341のサンプルをアップデートしました。

カテゴリ部分にも背景色をつけるのであれば、元々のPC表示時に.widgetのmargin-bottom: 45pxと設定してある分は不要かと思いましたのでモバイル時にはくっつくようにしました。もしmargin-bottomをとるとすれば、青背景とグレー背景の間に白背景が見えるようになってしまいます。

これら理由から、他のウィジェットをサイドバーに入れたりした場合に、それらウィジェット間にはスペースが開かないので、何かしら背景色を入れるようにして下さい。
※ PCの時は元通り45pxの隙間があきます。

これからはモバイルファーストで書くべきだろうということで、Simplicityのオリジナルのスタイルを打ち消して、例えば

#sidebar .widget {
  margin-bottom: 0;
}
@media (min-width: 60em) {
  #sidebar .widget {
    margin-bottom: 45px;
  }
}

このような書き方がしてあります。
通常は、サイドバーのウィジェットのボトムマージンを0にしておいて、メディアクエリ(@media内の書き方)で、60em(≒960px)以上の時は45px開けるというような書き方です。
通常時をモバイルのスタイルで書いて、メディアクエリで最低画面幅がn以上の時にどうすると言うような書き方です。

まずはcssをいじる前にこの仕組みを覚えておいて下さい。

Simplicityではmobile.cssがありますが、完全レスポンシブoffの時有効になります。これはPCメインの時はモバイル時の書き方ということでわかりやすいと言えばそうですが、ファイルを分けると管理がしやすいかどうか人それぞれで、かつできるならcssは1つにまとめたほうが良いということからも、子テーマstyle.cssで管理するほうがわかりやすい場合もあるということもあり、細かくメディアクエリを分ける場合を除いて、今回のように60em基準で表示が変わるという事なら子テーマstyle.cssだけで書くほうが良いかと思います。

今時のPCなら60emでなくて64em(≒1024px)としても良いと思います。しかしその場合は、僕の記憶違いかも知れませんがSimplicityのタブレットに変わるポイントが960pxあたりだったと思うので、#mainやらのサイズを変える必要があります。

サンプルの「/*元のcssから変更、ここから*/」〜「/*ここまで*/」が、今回のサイドバー内カテゴリおよびナビのcssになりますが、「/*レスポンシブ用 不要*/」以下に書いてあるようなスタイルを入れる必要があるかも知れません。

またサンプル内の記事下にあるfacebookのパーツは、モバイル表示にした際に#mainからはみだすので「/*レスポンシブ用 不要*/」部分で非表示にしています。ここらもcssを利用する際は注意して下さい。

関連記事も10件表示の内、先頭4件しか表示させていません。単にコピペするだけではなく、関係する部分をよく見て、全部をコピペではなく、おおよその関係するであろう塊でコピーして、必要な部分をデベロッパーツールで確認しつつ、修正や追加をしていって下さい。

jQueryとcssの.panelなんちゃら〜のスタイルは、パネルを利用しない限り必要ありません。何かしらで使えるかも知れないので一応残しておきます。

わかりました詳しくありがとうございます。
スタイルシート (style.css)へここまで！を追加し確認しようと思いましたが反映しないです。
キャッシュは関係ないとおもいますが他に原因ありますか？？

子テーマが読み込まれていないようですが、どこのstyle.cssに書きましたか？

子テーマを利用されていないようであれば、ダウンロードしてzipごとテーマ画面からアップロードした後、子テーマを有効化して下さい。

で、そのstyle.cssに必要部分を追記して下さい。

cssは読み込み順が重要です。
もしカスタマイズを親テーマに追加cssということで書かれているようであれば、それらを子テーマstyle.cssに追記した後にサンプルのcssを追記して下さい。
もちろん移植後は追加cssを削除して下さい。

追加cssなどは親・子テーマの後に出力されるので子テーマの内容を上書きしてしまうことがあります。
全ての必要なcssは子テーマstyle.cssに集約させるのがベターです。分けられているcssも本来は親テーマstyle.css1枚にしてしまうのが良いですが、それだと管理が大変なのでファイルを分けてある仕様です。

なるべく管理がしやすいように工夫する必要があります。

管理目的で必要なスタイルを各cssファイルに仕分けるのはアリですが、どこに何を書いたかをわかるように、慣れるまではコメントを付けておくのが賢明です。

サンプルのscssをcssに変換するのをお忘れなく。
scssはそのままだとブラウザが読み込めません。

子テーマ　(style.css)です。
PCでみたらカスタムメニューの文字色がデフォルトのリンク色から黒に変わっただけで、モバイルでは変化なしでした。変換はSassMeisterです。
お手数をおかけしますがご指導宜しくお願いします。

最近ワードプレスを始めた超初心者です。

固定ページだけ日付を消したいのですが、何処をどう弄っていいのか悩んでいます。

子ページのpage phpをカスタマイズするのは分かるのですが、

子ページにpage phpをコピーする方法がわかりません。

どなたかご教授をいただけますでしょうか。

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

Hidekichi様反映していました！！！！
少し左、右に動くようになったのと、
PC　版で　カスタムメニューが黒文字のみに
なり、リンクとわかりにくいのですが、
これはモバイルの今のデザインを重視するにはあきらめるしかないでしょうか？？

> リンクとわかりにくいのですが

cssをいじれば直せます。デベロッパーツールみたらわかりますが、カテゴリ部分は212行目、メニュー部分は127行目あたりにある色を好きな色にするだけです。

> 変換はSassMeisterです

codepenでcss欄下向き三角からcssに変換してくださいと書いてあるように、これ以外でも変換できますが動作を保証したものではないです。
codepenでの変換はAUTOPREFIXERが動作しています。これによって例えば、

#sidebar .widget_categories ul a::after,
#sidebar .widget_nav_menu ul a::after {
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(51, 51, 51, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px);
}

こういう今のcssが、

#sidebar .widget_categories ul a::after,
#sidebar .widget_nav_menu ul a::after {
  background: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0.2), rgba(51, 51, 51, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px);
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(51, 51, 51, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px);
}

こう変わります。

background: repeating-linear-gradient 部分で
background: -webkit-repeating-linear-gradient も追加されていますよね？

その他の部分では大きく変わりませんが、-webkit-が入るだけではなくその中の値も変わります。これらはブラウザの解釈の違いで必要であったり必要なかったりもするわけです。-webkit-とつくものは大きく問題にはなりませんが-ms-とつくものは確実に問題になります。

そうでなくてもIEとかedgeとか面倒くさいだけなのにそれらで問題が出たらそれようのcssを別途用意する必要も出たりするかも知れません。僕の場合、OSがlinuxということもあってIEなんぞは何年も前から対応していないため(確認もできませんし)、そこらは無視してますが、コンパイラーの違いで出力される内容が変わるというのは覚えておいて下さい。

例えばgulpや他のタスクランナーを利用してローカルでscssからcssに変換される際も、適切な設定のauto prefixerを導入するべきです。ここらは質問外の話になりますので割愛しますが、僕が保証できるのはサンプル表示が全てです。これを正しく見れないブラウザは僕は切り捨てます。

> 横山さん

質問内容が変わる時は別途トピックを立ててくださいと言われると思うので、次からはそうして下さい。
これらは初めての方は必ずお読みくださいにも書かれていたと思います。

> 固定ページだけ日付を消したいのですが、
> 何処をどう弄っていいのか悩んでいます。
> 子ページのpage phpをカスタマイズする…

page.phpはいじらなくても子テーマstyle.cssに該当の日付の部分を消すスタイルを書けばよいかと思います。その日付がどこのことなのかがわからないので消せるかどうかはそこにセレクタがついているかどうかですけれども。

codepenで作っていただいたサンプルのｃｓｓを変換するやり方がわからないです。

フリーでcodepenにログインし3画面（ｃｓｓ、HTML、ｊｓ）の画面まではいきました。
そこから変換のやりかたがわからないでいます。

もしかして、サンプルのページから変換できるとかでしょうか？

お手数ですかまたまた宜しくお願い致します。

> 変換のやりかたがわからないでいます

最初のサンプルの所に注意書きで書いてあります。

codepenでcss欄下向き三角からcssに変換してください
view compiledで変換できます。

> サンプルのページから変換できるとかでしょうか？

その通りです。別途ログインする等は必要なく、サンプル画面内のcss欄の話です。

>Hidekichiさん(#51364)
念のためご報告です。
後からトピックが追加されています
(解決済み)
子ページのカスタマイズについて

codepenでcss欄下向き三角からcssに変換してください
view compiledで変換できます。

すいません。かなり簡単にできました。

前回質問した
リンクとわかりにくいのですが
cssをいじれば直せます。デベロッパーツールみたらわかりますが、カテゴリ部分は212行目、メニュー部分は127行目あたりにある色を好きな色にするだけです。

スマホは今のデザインのままで、
PC版サイドバーのカテゴリとメニューの（カスタムリンクで作った）リンク色なんですが、
#1111ccに変更したいとおもいまして、
変換前のｃｓｓをいじって下のページで確認したがらやりましたが、
119行目　カテゴリーという文字が#1111cc色になり。
126行目　リンク色を#1111ccに変更できました！

しかしながら、カスタムメニューのリンク色が
どうも変わりません。
ご指導宜しくお願い致します。

説明すると面倒な部分があるので前回サンプルをアップデートしました。
どちらも、

セレクタ ul {
  color: なにがし;
}

をいじるだけです。リンクの色は親要素(ul)から継承してます(inherit)。

全体的なaの色を指定するなら、子テーマの最初の方に、

a:link {
  color: #1111cc;
}

としておいて、サンプルから貼っつけたメディアクエリ(60em)内のulのaのcolorを取り除けば良いです。スマホ時は背景色青ということもあるので、それをするとリンクがわからなくなってしまいますけどね。
ここかな？と思う部分に/*color: xxx; */としてコメントアウトするのが良いかと思います。

しかし#1111ccってまた結構前のGoogleのリンク色ですよね？7年ぐらい前でしたっけ。
今はまた変わってます。linkは#1a0dabでvisitedは#609ですね。

aタグに色を付けてはいけないという事はないんですが、リンク色は統一した方が良いようにも思います。そのために、全体的に色を指定しておいて、該当箇所のみ色を変更するという方が効率的でもあり分かりやすいと思います。
Simplicityのスタイルは予めaタグに色指定してあることが多いので、そのままだとそちらが優先されて色が上書きされてしまいます。なのでサンプルでは明示的に親に色を指定しておいて、それを継承するということをしています。

サンプルの更新ありがとうございます。

リンク色は統一した方が良いようにも思います。
そのために、全体的に色を指定しておいて、該当箇所のみ色を変更するという方が効率的でもあり分かりやすいと思います。

例えばですが
リンク色を#1111ccで統一し、
スマホのカテゴリ背景色を#1111ccでも見やすい色に変更する方が、
効率的でわかりやすいし、サイト表示速度、CSSの読み込みなども早いということになりますか？？
本能に無知ですいません。

> リンク色を#1111ccで統一し、スマホの
> カテゴリ背景色を#1111ccでも見やすい色に
> 変更する方が、効率的でわかりやすいし、
> サイト表示速度、CSSの読み込みなども早いと
> いうことになりますか？

リンクの色はブラウザの設定で変えられますし、cssは単なる見た目の話ですので、速度を求めるならスタイルしないというのが答えかと思います。フォントの種類にしてもOSにそのフォントが入っているかどうかで変わりますし。

が、cssはテキストファイルであって、それ1つで言えばページ内の画像を1つ取り除くだけで何万行も書けたりします。なので速度を気にするのであれば、その内容よりも、多くのcssファイルを読み込まないという方が(httpリクエストとレスポンスの関係からも)効率的です。

理屈的にはよりファイルサイズが少ないほうが良いけれども、素のhtmlの表示では意図とした表示ができないというもあり、cssは上手く設定するのがベターですが通常はブラウザがcssをキャッシュするので、速度面で強く意識することもありません。

外部からの読み込みと、画像や動画をたくさん利用しなければ必要以上に重くはなりません。

結果的にcss自体を気にすることはないです。

僕が言う「効率的」や「わかりやすい」というのは管理の方法です。
例えば任意のaタグに、

セレクタ a {
  text-decoration: none;
}

としていくよりも、最初に、

a {
  text-decoration: none;
}

セレクタ a {
  text-decoration: underline;
}

こうしておけば、aタグは全部アンダーライン無しで、特定のセレクタの子要素のaだけにアンダーラインが入ります。つまり修正するのは「特定のセレクタの子要素のaだけ」で良いということになります。効率的というのはこういうことです。

色などのスタイルは好きにしてもらえばいいですが、例えば、

<ul>
  <li>
    <p>何かしらのテキスト:<a href="#">そのリンク</a></p>
  </li>
</ul>

このようにあった時、pのテキストとaのリンクの色は同じにしておき、例えばホバーした時に色を変えてアンダーラインを入れるというのも方法ですし、ul li a::beforeということで、何かしらリンクにはアイコンを付けるということもできます。

pとaが同じ色だからということで、

ul li p,
ul li a {
  color: #333;
}

こうするのは間違いではありません。しかし、pにもaにも色を付けて置かなければ、親要素から色は継承されるのです。ミニマムにcssを書くのであれば、クラスは同じ機能のものを再利用するべきですし、必要以上の内容を書かないと言うのが正解です。

なので、
ul li { color: #333; } あるいは、 ul { color: #333; }としておけば、pにもaにも色を指定する必要はありません。ただしソレまでに指定してあるのであれば、指定し直す必要があります。aはブラウザのデフォルトで色情報があるため、上書きする必要があります。
同じ色にするなら、color: inherit;で親から継承しますし、何かしら指定しても良いです。

まずはその箇所だけをピンポイントにスタイルせず、大きな塊で共通して使えるものは使い、次第に範囲を狭めて、もうそこにスタイルをするしかないという所までいったらスタイルするべきです。

cssは助長に書こうと思えば書け、簡潔にしようと思えばある程度できるため、最適な書き方というのはプロでも多くはいないのではなかろうかと思います。css専門のコーダーがいるぐらいなんですから。

プログラムで言えばBASICのように上から順番に実行していくものと、javaのようにオブジェクト指向でパーツごとに再利用するという考えと言う感じに、cssも書き方は色々できるのです。基本仕様がシンプルなだけに書く人の考え方が強く反映するのがcssです。

結果的に同じ表示がされるならどう書いたっていいんですから、マジか…という書き方をしていても良いんですが、できるだけ上手に管理して、上手に書きましょうというのが言いたいだけです。