Glass_shore (配布終了 2018年8月6日)

タイトルの色変更について。

はじめまして。
vanillaice様のこちらのテンプレートをお借りしているものです。

お聞きしたいのですが、HP名の色を白から他の色に変更をしたいのですが…。そちらはどのようにすればよいでしょうか。

色々見てみたのですが、うまく行かなかったため、教えていただけないでしょうか？
宜しくお願いします。

@NICOさんへ

こんにちは

Glass_shoreのHP名(ブログタイトル)の色変更ですね。
変更するファイルは管理画面の下の段にあります

『Glass_shore のスタイルシート編集』

の方です。
そのソース内にそのものズバリの

.title_color {
color: rgb(255,255,255); /* ブログタイトル文字色 */
}

という箇所がありまして、その中の

rgb(255,255,255)

これが色コードです。
現在は『白』
私は10進数というのを用いて書いておりますが、16進数でもオッケーです。
その場合は
『白』
rgb(255,255,255)
#ffffff

『黒』
rgb(0,0,0)
#000000

同じ意味です。
あれでしたら、色コード作成ツールを別記事に載せておりますのでそちらをお使いください。
ちょっと待ってね。
URL引っ張ってきます(笑)

@NICOさんへ

http://vanillaice000.blog.fc2.com/blog-entry-35.html

こちらの記事の一番下に色コード抽出ツールがあります。
ソース内の文字列の探し方は、キーボードの

Ctrl＋F

キーを押しますと　文字列を検索するフォームが出てきますので。
先ほどの内容をコピペしてお探しください。
書き換えの際は他の文字列、特に記号を巻き込まないようにご注意くださいね。

教えてください。

はじめまして。

素敵なテンプレートなので使わせていただきたいと思いました。

画像の変更はできたのですが、スマホからPC表示に切り替えると
スマホ表示に戻れなくなってしまいます。
（スマートフォン版で表示）←のボタンをスマホで見たときに表示させるには
どのようにすればよろしいでしょうか？

できればスマホ版↔PC版と切り替えられるようにしたいのです。

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

@Kazさんへ

ありがとうございます
「スマホ版で見る」の表示を出すには、
CSSソース(管理画面『下』のボックス内文字列です)の上の方と下の方に(二箇所です)に

#change_mobile{
display: none;
}

という記述がありますので、そちらを削除すると出てきます。
管理画面内で操作される場合にはキーボードの
Ctrl＋F で検索窓が出ますので、上の文字列をそのまま入れて頂くとすぐわかると思います。
お手数おかけします。
よろしくお願い致します

ありがとうございます

ありがとうございました！
ちゃんと表示されました！

To Kaz

ご報告ありがとうございます。
お手数おかけしました

カスタマイズによる質問です

この度は大変素敵なテンプレートをご提供くださって誠にありがとうございます！
現在、自分なりにカスタマイズしようと奮闘しているのですが、２点ほど質問が
ございます。

①プラグインカテゴリ内の画像が薄くなってしまうので、プロフィール画像の
ようにハッキリ表示させたいです。

②一番下にある「RecentPics」をタイトルの下(記事一覧の上など)に移動させる
ことは可能でしょうか。

以上となります。
お忙しい中大変恐縮ですが、アドバイスいただけますと幸いです。
宜しくお願いいたします。

To MMMさん

ご相談内容拝見しました。
ちょっと出る用事がありますのでしばらくお待ちくださいね。
ごめんねー！

To MMMさん

その前に。

>プラグインカテゴリ内の画像が薄くなる～

の件ですが、サイドバー内に画像があり、その画像にリンクが付いている
ということでしょうか。
リンク無し画像の色が薄くなることはありませんので、そういうことかしら？

サイドバー内のリンクは一度押すと色が薄くなって二度押しができないようにしてあります(同ページリンク防止のため)
ちょっとその画像がどういう扱いになっているのかが不明ですので、

・リンク付き画像なのかどうか
・対象画像がリンク付きならば該当aタグにidまたはclassの指定があるかどうか
(あるのならば教えてください)

この二点の確認をお願い致します　(*_ _)
また後程！

To MMMさん

プラグイン内画像の件はご回答を待つとして。

>Recent picsをタイトル下へ移動したい件

手順数2です。
以下の文字列をCtrl+F検索(htmlソース内)

<!--not_permanent_area--><!-- 注)写真 不要な方はここから削除(この行含む) -->
<!--not_titlelist_area-->
<!--not_edit_area-->
<article class="images">
<p class="recent_pic">Recent Pics</p>
<div class="image_wrap">

<!--topentry-->
<!--body_img-->

<a href="<%topentry_link>#warped" class="non_style">
<figure>
<%topentry_image>
<figcaption>
<h3><%topentry_title></h3>
<p><%topentry_description></p>
</figcaption>
</figure>
</a>

<!--/body_img-->
<!--/topentry-->

</div>
</article>
<!--/not_edit_area-->
<!--/not_titlelist_area-->
<!--/not_permanent_area--><!-- 注)ここまで削除(この行含む) -->

上記を「カット(切り取り)」して以下の場所へ移動。

<div id='warped'>
<span class='w0'>S</span><span class='w1'>e</span><span class='w2'>e</span><span class='w3'> </span><span class='w4'>m</span><span class='w5'>o</span><span class='w6'>r</span><span class='w7'>e</span><span class='w8'> </span><span class='w9'>d</span><span class='w10'>e</span><span class='w11'>t</span><span class='w12'>a</span><span class='w13'>i</span><span class='w14'>l</span><span class='w15'>s</span>
<a href="<%url>archives.html"><div class="w16">Title List</div></a>
</div>

ここにペースト

<div id="container" class="cf">

-------------

続いて以下の文字列を検索(CSSソース内)

.images {
position: relative;
border-bottom: 1px solid;
border-bottom-color: rgb(204,204,204);
border-bottom-color: rgba(255,255,255,.1);
background-color: rgba(255,255,255,.1);
width: 100%;
height: 400px;
margin: 0 auto;
overflow: hidden;
padding: 50px 0 80px;
}

赤字の部分に一部追加して以下の通り。

.images {
position: relative;
border-bottom: 1px solid;
border-bottom-color: rgb(204,204,204);
border-bottom-color: rgba(255,255,255,.1);
background-color: rgba(255,255,255,.1);
width: 100%;
height: 400px;
margin: 0 auto 一番上の要約記事との間に設けたい空白px;
overflow: hidden;
padding: 50px 0 80px;
}

この空白を入れないと記事と密接してしまいます。
ちなみに記事と記事の間の空白は 70px ですので、それに倣うならば

margin: 0 auto 70px;

という指定をします。
この移動ですりガラスの表示・レスポンシブ時のレイアウト崩れ等の問題は発生しないかと思います。
一度お試しくださいませ

To MMMさん

「リンクのidやclassを教えてください」
の意味と意図を書いておきますね。
意味がわかれば何をすれば良いかわかると思いますので。
私がてんで間違った予測をしていればアレですが(笑)

idやclass名が<a>にあれば、クリック後の挙動を解除することができます。
例えば

<a href="移動先" id="○○"><img src="対象画像"></a>

とあれば、その○○というidを認識してクリック後透過を避けることができます。
idもclassも無い！という場合には付けて頂く形になりますです　(´・ω・｀)

ありがとうございます！

お世話になっております。早速のお返事ありがとうございます！

●プラグインカテゴリ内の画像が薄くなる～
の件は、リンク設定ではなかったのに薄くなるという現象でしたが、
Akiraさまのアドバイスですぐ解決いたしました！

というのも私のブログ内にリンク付画像と、リンク無画像もあり、両方とも
<a href="移動先" id="○○"><img src="対象画像"></a>
をコピペしており、リンク無画像が
<a href="" id="○○"><img src="対象画像"></a>
↑この状態で使っていたため、<a href=""を消したところ、
薄くなる現象は解決いたしました！

当方のミスでしたm(__)m


●Recent picsをタイトル下へ移動したい件
こちらも、ご丁寧なご回答ありがとうございます！
大変助かりました…！

また何かありましたらご相談させていただきたいと思います。
今後のご活躍も楽しみにしております！

To MMMさん

解決して安心しました
ありがとうございます。
お疲れ様でした

To あやさん宛です

ソース内容は以下の通り。

--- ご本人の確認が終わりましたので消去しました ---

To Akiraさん

ありがとうございます！無事に反映されました
本日は長時間にわたり助けて頂いてありがとうございました
また分からない事が有りましたら質問させて下さい
Akiraさまに感謝の気持ちで一杯です
それでは失礼します　お付き合いありがとうざいました

To あやさん

ご丁寧にありがとうございます。
何かありましたらお気軽にどうぞ

Akiraさま　返事遅くなりすみません。
FC2の方にも書かせて頂きましたが
もうご覧にならないかもと思いこちらにも転機させて頂きますね

はい、Akiraさまのおっしゃるとおりですね。
記事は徐々に直していこうと思います
そして今回このようにお手伝い頂きとても感謝しております
本当にありがとうございました
ブログでもAkiraさまのブログを紹介させて頂きました
http://aya8801.blog.fc2.com/blog-entry-785.html#warped

To あやさん

あららー。
お気持ちとっても嬉しいです
こちらこそご丁寧にありがとうございますー！

メニュータブについて

Akiraさま
先日はありがとうございました！
この画像とても気にいっています♪
今日はカスタマイズで困っているので質問させて下さい（色々やってみましたが、お手上げです。受け付けていないようでしたらはっきりとおっしゃってください💦）


メニュータブをつけてみたのですが質問させて下さい

①ＰＣ上で、メニューバーと丸いtitle listとの距離を縮めたい

②スマホにしたときに（ｉＰｈｏｎｅ）レイアウトが崩れてしまいます。何か方法はないでしょうか？あるいは難しいようならスマホではＰＣ画面にならないように切り替えしないようにできないでしょうか？

③記事に関して
read moreではなく、１記事を展開した形にすることは可能でしょうか？


※　ＨＴＭＬとＣＳＳを貼ります
Akiraさまが確認頂いたら削除でお願いします

お忙しい所恐れ入ります💦

ＨＴＭＬ
https://www.dropbox.com/s/itl7b4w8fds6mq5/glass%20HTML.txt?dl=0

ＣＳＳ
https://www.dropbox.com/s/d4sbv061tnbjd09/Glass%E3%80%80%EF%BD%83%EF%BD%93%EF%BD%93.txt?dl=0

To あやさん

こんばんは　(●'ω')ﾉ

細切れになるかもしれません。ご容赦ください。
(まだ仕事中でスタッフルームからお送りしています(笑))

① タイトルリストとの距離
CSSソース内

#dropmenu が該当です。
こちらはあやさんが追加した内容です。

margin: 30px auto 300px;

赤字部分が円形ボタンとの距離ですので、小さい数字に変更してください。
0にするのならば

margin: 30px auto 0;

0にした場合には私のソース内容で80pxの距離を取るように設定してあります。

--------

②レスポンシブが崩れる

これはドロップダウンメニューの横幅指定が原因です。
こちら後述します。

--------

③一記事を展開、というのはどういう意味だろう　(´・ω・｀)
「一番上の記事だけを展開させる」 ---　出来ません
あるいは
「全文表示に変更する(一記事まるまる見せる)」
ということかしら。
後者の場合は基本的にお断りしています(笑)
帰宅してソース確認しないことにはなんとも　(´・ω・｀)
簡単にできるようでしたら考えます　←

--------

一旦投稿しますね。

To あやさん

えーと。色々指摘箇所はあるのですが。

(i) アクセス解析のソースコードが間違っている気がします。

通常のアクセス解析は「画像」で行いますが、テキストに変更してしまったのではなかろうか。
FT2になってます(FC2でなく(笑))
アクセス解析の画像には意味がありますのでユーザーがテキストに変換すると機能が失われます。
元サイトkaiseki.comがunder construction(整備中)ですので私の方からは確認できませんでした。
一度ご自分でソースコードが正しいかどうかご確認お願いします。

(ii) パン屑リスト

パン屑リストはこの位置ではまずいです。
画面上部にあるものは<body>の直下に入れたくなりますが、実際には<body>下には全体構造をまとめるラッパーあるいはコンテナと呼ばれる包括要素が存在しています。
それよりも「前」に入れてしまうと全体レイアウトが押し下げられて狂ってしまいます。
パン屑の位置は

<header id="banner">

の直下でお願いします。

(iii) ドロップダウンメニュー

これはもうレスポンシブには圧倒的に不向きです　(´・ω・｀)
ドロップダウンをレスポンシブで使うときにはかなり高度な技術を要します。
スマホやタブレットは「マウスオーバー」というのができません。
全て「タップ」で行います。
お使いのドロップダウンの仕様を拝見しますと、スマホで一応タップができるようにはなっていますので、折りたたまれたメニューを引っ張ることはできるようになってます(動作的には、という意味)。
ですがタイトルがページ遷移を行う<a>タグになっていますので、実際にはタップした時点でメニューが下へ降りるのと同時にページが移動してしまいます。

ドロップダウンはよくよく考えて作成しないとスマホユーザーさんにとって非常にストレスになります。
現在のこの仕様ですとモバイルでの動作は「不可」と言って良いと思います。

このドロップダウンがレイアウトを崩しています。
横幅が800px固定ですよね。
流動幅レイアウトで固定幅が存在すれば当然レイアウトは崩壊します。
これはpxを%に変更することで回避できますが、現状のものは仕様としてはできません。
かなり大掛かりな変更を加える、というか全変更って感じになるかと(笑)

このドロップダウンが存在しなければ辿りつけないページがある、というのならば仕方ありませんが、
そうでないのならばスマホでは非表示にされると良いと思います。
ぶっちゃけスマホにドロップダウンは有っても害にしかならない... (´・ω・｀)

固定幅レイアウトに、ということですが、こちらも基本的にはお断りしております　(*_ _)
(ソースの半分ほどの変更が必要です)

--------

ドロップダウンをスマホで非表示にする = レスポンシブを優先 = お手伝いできます
ドロップダウンを温存したい = 固定幅可 = 自己努力でお願いします
全文表示の件は少しお待ち下さい。

Akiraさま

遅い時間にありがとうございます

解析とパン屑直しました、ありがとうございす
なかなか難しいですね💦

タブはつけたいので
スマホの時はPC表示させないように出来ないでしょうか？
モバイル版だけにする使用で

タブを見れるのはPCの方だけなら大丈夫かな

ドロップダウンをスマホで非表示にする = レスポンシブを優先 = お手伝いできます

↑モバイル版にしなくてもPC版でも可能なら
そちらのやり方も教えて頂けると嬉しいです

すみませんが宜しくお願いします💦
もう遅いのでまたAKIRAさまのお時間が空いたときで宜しくお願いします

To あやさん

厳密な意味でスマホからPC版へのアクセスを防ぐ、ということでしょうか。
Javascriptで可能でありますが、たぶんGoogleから警告受けます(笑)
アフィリエイトをしておられるのならば絶対手は出さない方が良いですね。

単純に「スマホから見たら『なるべく』スマホ版へ誘導」ということならば、ブログ設定でスマホ版非表示を解除するだけです。
ただしユーザーがURL末尾に
?pc
と意図的に入力した場合、Google Chromeブラウザ(スマホ版)、FC2の一部サービス及び機能を使った後での訪問 etc.
などでは強制的にパソコン版表示になります。

そこはもうあやさんの割り切りだけです。
スマホユーザーはスマホ版で！
と割り切るならば、

・スマホ版が「非表示」になっていないかをブログ設定で確認
・できれば「スマートフォン版で表示」のグレーの帯も出しておく
(CSSソース内から

#change_mobile{
display: none;
}

を削除してください。
モバイル誘導ボタンは入れてありますが、こちらの方が目立つので誘導には役立ちます)

・スマホ版から「PC版で表示」を消しておく
(これは好ましくないと思います。私なら嫌です(笑))

このぐらいでしょうか　(´・ω・｀)
一応スマホでドロップダウンを非表示にしておくならば、簡単なのはCSSソース末尾に以下を追加

@media screen and (max-width: 854px) {
#dropmenu {
display: none;
}
}

簡単ではありますが、ブラウザ縮小で横幅854を割り込んだ場合でも表示されなくなります。

#dropmenuの

width: 800px;
を

width: 100%;
max-width: 800px;

に変更しておくと良いですね。

To あやさん

全文表示の件ですが、やはりヘッダー・フッターを含めた変更が必要ですので作業工程は多いです。
そしてスクリプトが多く積まれていますので、全文にされるとページの表示はかなり遅くなります。
今回はこのままでお願いします。
トップを全文にされた場合、「追記の編集」をご利用でない方は単体ページへのアクセスも減りますよ。
だってトップで全部読めてしまうわけですから(笑)
アクセス解析を入れてらっしゃるぐらいですから、ページアクセスも気にされている、と判断して書いています(笑)

Akiraさま
おはようございます(^－^)

一応スマホでドロップダウンを非表示にしておくならば、簡単なのはCSSソース末尾に以下を追加

@media screen and (max-width: 854px) {
#dropmenu {
display: none;
}
}

これで解消しました♪
ありがとうございます


全文表示は読者さまからの要望でした
はい、このままで大丈夫です


今回のAkiraさまのご回答で
全て解決となりました


親切にありがとうございます
感謝しております

これからのご活躍、楽しみにしています
また遊びに来ますね♪

To あやさん

OKでしたか。
安心しました

お疲れ様でした

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Glass_shore文字色の件 内緒さん

ありがとうございます

------
ブログタイトルはCSS末尾に以下を追加。

#blog-title a {
color: カラーコード;
}

------
記事タイトルも同じく末尾に追加。

.entry-title a {
color: カラーコード;
}

------
サイドバーの文字色
これはリンクのことでしょうか。

.sidebar-style a {
color: カラーコード;
}

テキストの場合は

.sidebar-style {
color: カラーコード;
}

です。全て修正ではなく「追加」です。
よろしくお願いします。

Akiraさん

早々にありがとうございます！分けれました♪
（遅ればせながら。GirlOnWire筆頭に本年もお世話になります。m(__)m＊）

To mさん

はい。こちらこそよろしくお願いします。
お疲れ様でした

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To 著作権云々の件 内緒さん

> 問い合わせの場所違いかもしれませんが、メールでの問い合わせフォームがないとのことでしたので、こちらから失礼します。

htt://night-sidedish.info/?p=70

こちらのページに載っている動画はプレステージに著作権があるものですので、記事及び動画の削除をお願いして致します。

htt://www.dmm.co.jp/digital/videoa/-/detail/=/cid=118yrz00040/?i3_ref=list&i3_ord=1

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

-------
私が何を手配するんですか？ (´・ω・｀)
リンク先は私のサイトではありませんし、そもそもFC2ブログですらないのですが。
ここにたどり着いた理由が全くもって不明です。
それにハンドルネームのリンクが指定アドレスと同じです。
非常に不快ですが一応返信申し上げます。

名前:こじま
タイトル:ちあき
ホスト:p226.net059084068.tokai.or.jp
IPアドレス: 59.84.68.226
AS: AS10010 TOKAI Communications Corporation
静岡