ホーム > サポートメニュー > ユーザー助け合い掲示板
  • JUGEMスタッフからの回答はおこなっておりません。
  • 旧ユーザー助け合い掲示板は こちら です。

最新の投稿一覧

【質問】 スマホテンプレートのデザインをカスタマイズ 投稿者:佐伯

スマートフォン用のテンプレートについてです。

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

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

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

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

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

  • 記事ID:No.7510
  • 投稿日時:2017年03月26日 18:48
  • 返信:4件
【回答】 Re: スマホテンプレートのデザインをカスタマイズ 投稿者:3steps

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

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

この該当箇所は、外部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;
}

以上です。

  • 記事ID:No.7514
  • 投稿日時:2017年03月30日 00:42
【回答】 返信ありがとうございます 投稿者:佐伯

free-sp様、3steps様

質問に対しての返信、ありがとうございます。
URLを載せるということをすっかり失念しておりました。ご指摘ありがとうございました。

只今仕事先でPCが無くCSSの編集がしづらいので、URLだけ先に載せさせていただきます。
記事などまだ何もない状態なので、プロフィール部分で確認して頂ければ幸いです。


質問後にまた少しいじったので、質問時に

>Category等の文字部分だけはリンク色の変更ができているのですが…。

と書きましたが、現在は文字部分のリンク色も変更していない状態になっています。


帰宅したら自分でもソース確認してやってみようと思いますが、もし何か適切な対処の仕方がわかるようでしたらご教授頂ければと思います。
どうぞよろしくお願いします。

【質問】 記事同士の間隔変更について [解決済み] 投稿者:******

※ この質問記事は削除されました

  • 記事ID:No.7507
  • 投稿日時:2017年03月20日 21:21
  • 回答:2件
【回答】 Re: スマホテンプレートのデザインをカスタマイズ 投稿者:3steps

有料テンプレートは回答側も購入しなければソース(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のソースを全て貼り付けてみて下さい。
より正確な回答を得られると思います。

  • 記事ID:No.7512
  • 投稿日時:2017年03月29日 20:58
【回答】 Re: スマホテンプレートのデザインをカスタマイズ 投稿者:free-sp

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の場合はシャープ# 間違えないようにね。

  • 記事ID:No.7511
  • 投稿日時:2017年03月28日 20:18
【回答】 Re: 記事同士の間隔変更について [解決済み] 投稿者:那智

3steps様

丁寧なご説明ありがとうございました。
ご指導いただいた部分を変更し、無事自分がイメージしていたテンプレートの形にすることができました。

色々確認していただいてありがとうございました。大変助かりました。
HPの編集はよくやっているのですが、やはりブログの編集となると難しいですね。もっと勉強していきたいと思います。

またどうしてもわからない点がありましたら質問させて頂きたいと思います。重ね重ねではありますが、ありがとうございました。

  • 記事ID:No.7509
  • 投稿日時:2017年03月21日 20:06
【回答】 Re: 記事同士の間隔変更について 投稿者:3steps

今回は間隔の増減に関してのみの説明とし、システム云々の説明はなるべく省きますが説明は少し煩雑な物となります。

このテンプレートはMasonryというスクリプトが組み込まれています。
このスクリプトで作られたシステムの根底にあるのがグリッドシステムなので、大きく変更するにはまずここから理解する必要があります。
なおJUGEMで使われているスクリプトは(なぜか)かなり古いバージョン2なので、テンプレートを大きく編集する場合にはそちらの説明ページが必要になるかもしれません。

URL貼っておきます。http://masonry.desandro.com/v2/


CSSの662行目にある

/* item */
.item {
z-index: 1;
float: left;
margin: 10px 5px;
width: 358px;
height: auto;
}

の部分を編集します。
(※CSSを元の状態から編集している場合は行番号がズレるかもしれません。適宜読みかえて下さい)

具体的には「margin」の後半【5px】と、「width」の【358px】の数値を変更します。
この数値の合計が368pxになるように変更してください。
「左右マージンを増やすと記事表示部分の幅が狭くなる」ということですね。

注意したいのは、「margin: 10px 5px;」というのは
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
の4行の省略形であるということです。
上記の例だと右マージン5px、左マージン5px、幅358pxなので「5+5+358=368」となりますね。


例として…
/* item */
.item {
z-index: 1;
float: left;
margin: 10px 10px;
width: 348px;
height: auto;
}
…のように変更します。
この場合は右マージン10px + 左マージン10px + 幅348pxの合計が368pxになっています。


記事表示部分の幅が変更されるので、以下の行の「max-width」の値も変更した方がいいかもしれません。
671行目、676行目、682行目のmax-widthの数値を変更してください。
それに加えて687行目のwidthと、690行目のwidthの数値もそれぞれ縮小した方がいいかもしれませんが、そこまでの影響は調べ切れませんでした。


なぜ368なのか?という理由の回答としては「グリッドシステムのcolumnWidthの数値が(たぶん)368だから」となります。
この数値から大なり小なり外れるとレイアウトがどんどん崩れていきます。
「カラム幅と左右マージンの和を368pxとする」として編集すれば大きなレイアウトの崩れは起きないはずです。

以上です。

  • 記事ID:No.7508
  • 投稿日時:2017年03月21日 19:50
【質問】 ツール 投稿者:戎 博志

ブラウザのキャッシュ、Cookieを削除しようと思うのですが、指示によると『[ツール]→[インターネットオプション]をクリックします』となっているのですが、そのツールを画面上部に出すにはどうすればいいのでしょうか。

【回答】 Re: ツール 投稿者:tamy1990

ブログ作成にはあまり関係無い気もしますが…お困りのようですのでお答え致します。

お使いのブラウザにもより、呼び出し方が異なります。

InternetExplorerをお使いでしたら、まずはキーボード内のAltキーを押してみてください。
そうするとアドレスバーの下にメニューバーが出ますので、その中のツールを押せばインターネットオプションが見つかるでしょう。

GoogleChoromeなら、アドレスバーの右側に&#65049;があるので、その中の設定からクッキーなどのキャッシュ削除のページが有ります。

最悪ブラウザでなくても、コントロールパネルからインターネットオプションは出せますので以下のページを参考にしてください。

http://upsilon-y.com/pc/internetoption9.html

  • 記事ID:No.7506
  • 投稿日時:2017年03月13日 16:07