ホーム > サポートメニュー > ユーザー助け合い掲示板

質問内容・回答一覧ツリー

Q. スマホテンプレートのデザインをカスタマイズ - 投稿者:佐伯(2017年03月26日 18:48) No.7510  
Q. スマホテンプレートのデザインをカスタマイズ [解決済み]
  • 投稿者:佐伯
スマートフォン用のテンプレートについてです。

スマホ用テンプレのカスタマイズの仕方をご教授ください。
有料のテンプレの方が色々とカスタマイズしやすいと聞き、有料のテンプレ「mushroom」を購入しました。

ネットで色々と調べ、エントリー部分などはほとんど編集できたのですが、下部にあるカテゴリーなどのメニュー部分の編集ができません。
何もしていない状態でのボタンの色は変更できるのですが、

Category
 カテゴリ名  ▶
 カテゴリ名  ▶

上記のようにクリックして詳細が出てくる時のメニュー部分全体の色の変更をどういうCSSにすればいいのかがわからずにいます。
Category等の文字部分だけはリンク色の変更ができているのですが…。

過去ログやテンプレ編集を紹介しているサイトなど自分なりに探したのですが、検索ワードが良くないのか同様の内容について書かれている所を見つけられなかったのでこちらで質問しました。
もし過去ログや他サイトで説明している所があれば誘導お願いします。
よろしくお願いします。

  • 記事ID:No.7510
  • 投稿日時:2017年03月26日 18:48 (2017年04月03日 05:47更新)

回答一覧(返信数 11 件)

投稿者:free-sp A. Re: スマホテンプレートのデザインをカスタマイズ

PC版はサンプルページのURLを書いてあれば、サンプルを見る事ができますが、スマホ版のテンプレートは
ブログのURLを書かないと、確認できないので一般的な例です。

リンク付きリスト部分の文字色、私の使ってるテンプレートではnav li a { color:#ff55aa; }でOKですが、
ダメならセレクタnavを.menu_list .select_menu .menu_area 等、、ソースを確認して試してみてください。
たぶんこれでいけると思いますが:例 
<style><!--
.menu_list li a { color:#fff !important; }
--></style>

テンプレートによっては、id="menu2"とか "navi_acc02_menu"のようにid=数字が付いてるのもあるので、これに指定すればカテゴリーとアーカイブ等々、個別に設定するのが容易です。  idの場合はシャープ# 間違えないようにね。

  • 投稿日時:2017年03月28日 20:18
投稿者:3steps A. Re: スマホテンプレートのデザインをカスタマイズ

有料テンプレートは回答側も購入しなければソース(HTMLとCSSの両方)が確認できないのがネックですね。
正確な回答を得るにはfree-spさんのおっしゃるようにURLを貼るか、HTMLとCSSをすべてコピペするかの2択になると思います。

無料テンプレートの「コットン」や「チェックグリーン」を例に挙げると、
下部メニューの最初に配置されているEntry部分のソースは以下の部分になります。

<article>
<div class="select_menu">
<dl id="select_menu_acc">
<dt><div class="triangle-right"></div><span class="select_menu_txt">Entry</span></dt>
<dd><nav>

そして質問内容の
> 詳細が出てくる時のメニュー部分全体の色の変更

これは上記の例だと<dt>と<dd>に指定されているスタイルが該当箇所です。

コットンやチェックグリーンのCSSの場合、CSSの(元の状態を参考に)
204行目の「.select_menu」
218行目の「.secelt_menu dt」
225行目の「.select_menu dd」
で背景色が指定されているのでこれを変更します。
その際、margin, padding, font-sizeに関しては変更するとレイアウトが崩れる恐れがあるので変更しない方がいいでしょう。

おそらく有料テンプレートも似たような構造だと思うのですが……。
まったく異なるようでしたらURLを貼るか、HTMLとCSSのソースを全て貼り付けてみて下さい。
より正確な回答を得られると思います。

  • 投稿日時:2017年03月29日 20:58
投稿者:****** A. 返信ありがとうございます

この回答は投稿者によって削除されました。

  • 記事ID:No.7513
  • 投稿日時:2017年03月29日 21:50
投稿者:3steps A. Re: スマホテンプレートのデザインをカスタマイズ

無料テンプレートとは全くの別物でしたね。失礼しました。

> クリックして詳細が出てくる時のメニュー部分全体の色の変更

この該当箇所は、外部CSSでは以下のセレクタで指定されているようなので、この部分を上書きしていきます。
「#navi_acc01」「#navi_acc02」「#navi_acc03」「#navi_acc04」
「.highlight」
「.menu_list li」
「.menu_list li a」

◆未クリック時のタイトル部分
(埋め込みスタイルの82行目から97行目を一つにまとめた方が管理しやすいかも)
#navi_acc01, #navi_acc02, #navi_acc03, #navi_acc04 {
background: #fff;
border: 1px #c0c0c0 solid;
}

◆クリック後のタイトル部分の背景色(展開後のリストの背景色と同一色にしないと違和感)
.highlight {
background: #f00 !important;
}

※クリック後のタイトル部分の文字色(必要かわかりませんが、一応)
.highlight a {
color: #f0f !important;
}

◆タイトルクリック後(展開後)に表示されるリスト部分
.menu_list li {
background: #f00;
color: #fff;
}

◆同、展開後に表示されるリストのリンク部分
.menu_list li a {
color: #ff0;
}

以上です。

  • 投稿日時:2017年03月30日 00:42
投稿者:佐伯 A. Re:

3steps様

アドバイスをくださりありがとうございました。
提示していただいたタグを入れたところ、無事色を変えることが出来ました。
ずっと悩んでいたので本当に助かりました。


すみませんが、もしもお時間があったらで結構ですので、もう3点程質問させていただいてもよろしいでしょうか。


.リック後のリスト展開のときに「Profile」を囲う枠の色をリスト展開の背景色と同色に変化するようにするには何処を変更すれば良いでしょうか?
現在の状態だと、クリック後の展開時にProfileの周りの枠だけ色が違って不自然に見えるので、できれば変えたいと思っています。

▲優奪噺〆でカスタマイズ方法を探した際、検索ボックスを消去する方法を見つけました。現在消去するタグをなくしたので表示されるようになっています。この状態だと「記事検索」「JUGEMブログ内検索」という選択肢が下に表示されるのですが、検索ボックスはそのまま表示して下の選択肢だけ消す方法はありますでしょうか。記事検索だけできるようにしたいです。システム的に難しいようでしたら諦めるのですが、もしも方法があったら教えてください。

Profileの「AAA」をクリックしていただくとプロフィール画面がでるのですが、これの見出し部分にボックスシャドウがついています。このボックスシャドウをなくす方法を教えてください。


何度も質問してしまって申し訳ありませんが、お時間があるときにでもアドバイスを頂ければ嬉しいです。
どうぞよろしくお願いします。

  • 投稿日時:2017年03月30日 20:33
投稿者:3steps A. Re: Re:

,硫鹽

.highlight {
background: #e8e8e8 !important;
}
を書き換えます。

.highlight {
background: #e8e8e8 !important;
border: none !important;
}
としてボーダーを消してください。
角丸の設定はそのまま残ります。



△硫鹽(ちょっと自信なし)

<div id="jugem_search_select">から対応する閉じタグの</div>までを以下のように変更。
(※掲示板の特性上、半角スペースなどは除去されてしまうので挿入時にスペースを入れるなどして下さい)

<div id="jugem_search_select">
<form name="search_select_form">
<ul><li><label><input type="hidden" id="search_user" value="記事検索" name="search_user" checked="checked">記事検索</label></li><li>
</form>
</div>

これで「JUGEMブログ内検索」の選択肢自体が消え、デフォルトで「サイト内検索」が選択された状態で、かつ閲覧者側には見えない状態になるはずです。
また、<div id="jugem_search_select">の中身が空になるので不自然な空行が出来てしまいますが、これが気になる場合は埋め込みCSSに以下の文を挿入します。

#jugem_search_select { display: none; }

※CSSが効いている場合に見えなくなるだけなので機能的には問題ありません。



の回答
埋め込みCSSに以下の一文を挿入します。

.profile_wrapper {
-webkit-box-shadow: none;
}

他にも
.entry_wrapper, .comment_wrapper, .trackback_wrapper, .full_pager_link,
.entry_link, .select_menu, .search_wrapper, .related_entry
でボックスシャドウが使われているので、これらも一緒に無効化するのであればこちらの一文(2行)を挿入します。

.entry_wrapper, .profile_wrapper, .comment_wrapper, .trackback_wrapper, .full_pager_link,
.entry_link, .select_menu, .search_wrapper, .related_entry { -webkit-box-shado: none; }

以上です。

  • 投稿日時:2017年03月30日 23:13
投稿者:佐伯 A. Re: Re: Re:

3steps様

何度も返信して頂き、ご迷惑をおかけしていますが本当にありがとうございます。

´について、無事編集することができました。的確なアドバイスありがとうございました。


すみません、△砲弔い討覆里任垢、なかなかタグ関連について理解しきれていないため上手く編集することができませんでした。
ご提示いただいた、<div id="jugem_search_select">から始まるHTMLタグはフリースペースの2〜5のbodyタグ内に設置するという形でよろしいのでしょうか。
また、上記タグを埋め込む場合「.jugem_search_wrap {display: none;}」というタグはheadから消去するのでしょうか。

フリースペース4にご提示いただいたタグを設置するだけしたのですが、フォーム関連のタグが元々よくわかっていないのでどのようにすればいいのかわからなくなってしまいました。

何度も何度も申し訳ありませんが、またご教授頂けると大変助かります。どうぞよろしくお願いします。

  • 投稿日時:2017年03月31日 21:43
投稿者:3steps A. Re: Re: Re: Re:

HTMLの編集欄で <!-- JUGEM検索の選択欄 --> の一文を検索してください。
ブラウザにもよりますが、Windowsの場合はCtrl+Fでページ内検索ができると思います。

その直後の行に <div id="jugem_search_select"> があるはずです。
そこから<!-- JUGEM検索(ブログ内検索)の検索結果 -->のすぐ上にある </div> までを、先に回答した△離魁璽匹斑峇垢靴堂爾気ぁ


<!-- JUGEM検索の選択欄 -->
<div id="jugem_search_select> ←ここから
(中略)
</div> ←ここまでを△離魁璽匹巴屬換える
<!-- JUGEM検索(ブログ内検索)の検索結果 -->



またフリースペースの方は不要ですので除去してください。
「2つあっても良い」ではなく「2つあると問題が起こる」のです。



> また、上記タグを埋め込む場合「.jugem_search_wrap {display: none;}」というタグはheadから消去するのでしょうか。

<head>〜</head>内にすでに埋め込みスタイルシートを使って記述していますよね?
その部分に #jugem_search_wrap {display: none;} の一行を挿入してください。
classではなくidであるため、頭は「.」ではなく「#」にして下さい。

このCSSでは、<div id="jugem_search_wrap">〜</div>の中に<ul><li>の各ブロック要素が含まれますが、<li>の中身が空に見えるのでブロック要素の部分だけ「場所が確保される」という状況になっています。
これが不自然な空白が生む原因となってしまうので、これで「場所を確保している<li>を内包する大元の<div>〜</div>自体を見えなくする」わけです。


以上です。

  • 投稿日時:2017年03月31日 23:27
投稿者:佐伯 A. Re: Re: Re: Re: Re:

3steps様

返信ありがとうございます。

スマホテンプレートはHTMLの編集ができないと思っていたのですが、できるんでしょうか…?勉強不足ですみません。
どの部分からやればいいのか少し勉強してきますね。ありがとうございます。

  • 投稿日時:2017年04月02日 13:27
投稿者:3steps A. Re: Re: Re: Re: Re: Re:

スマホはHTML編集できないんでしたか。
Plusから離れて久しいので誤解していたようです。すみません。

「#jugem_search_select { display: none; }」だけでOKです。
これを埋め込みCSSに記述するだけで該当部分の<div>の範囲がまるごと見えなくなります。
記事検索がデフォルトで選択されているので、見えなくする(=選択できなくする)だけで質問の通り「記事検索に固定する」が達成されるはずです。

  • 投稿日時:2017年04月03日 05:47
投稿者:佐伯 A. ありがとうございました

先程解決済みにしたと思っていましたが、チェックをしていなかったみたいなので解決済みにさせていただきます。

何度も質問してしまいましたが、そのたびに回答をくださりありがとうございました。
もっと勉強して編集できるように頑張りたいと思います。

もしまた何かありましたらよろしくお願いします。
ありがとうございました。

  • 投稿日時:2017年04月02日 21:39