サイトマップ
更新履歴をサイドバーに位置替えしたがカスタマイズが反応しない
更新履歴をサイドバーに移動したが、カスタイズの指令が反映されないという趣旨の
お問い合わせが寄せられました
Ｑ......
ご用件 】 ご質問・お問い合わせ
ＩＮ様より......
初めまして。
一昨年の12月からシリウスにてサイトを作っており、貴サイトをいつも参考にさせて
頂いております。
沢山の情報を載せて頂いており、本当にありがとうございます。
さて今回、レシポンシブで2つ目のサイトを作っており、以下の問題を解決できず
困っております。
＜行ったこと＞
・サイト仕様で作成
・サムネイル画像付きで更新記事を表示させたく、ブログモード更新記事を
freeSpace4 下に貼り付け。
＜問題＞
・フォントサイズ、色等を変更したいのですが、CSSのブログモードを変更しても
反映しない。
（サムネイル画像も当初の設定のまま（150px））
・スマートフォンの横画面で、サムネイル画像の途中に枠の下線が表示され、
サムネイル画像が枠の中に納まっていない。
（当方PCとアンドロイドスマホの2機種のみ確認ができます）
以上、お手数おかけし大変申し訳ございませんが、お時間の取れました時に
解決法を教えて頂けますと助かります。
どうぞよろしくお願い致します。
Ａ.....ＮＯ１
ご連絡ありがとうございます
出張で2日ほど開けておりご返事が遅くなり申し訳ございません
まず、一つ目
・フォントサイズ、色等を変更したいのですが、CSSのブログモードを変更しても
反映しない
ですが、ブログモードいじっても反応しません
ＣＳＳでは、ＰＣとスマホで記事をこべつにフォントサイズ 色違いする指定のコード
までは入っていないのですね
見出しなどは入っています
正確にいえば、メディアコードを新たに追加して
こんな感じ
media screen and (max-width: 640px)で、この中で指定をするよう項目を作るのです
{
ここに指定コード入れる
}
でも、これだけではわかりませんよね
そこで、大変申し訳ないのですが、今日は疲れ果てておりまして頭が動かないのです
明日までには、フォントと色違いを指定するコード作って再メールしますのでお待ちください
もう一つ
ここなんですが、サイドバーに表示させるということですか？
サイト仕様で・サムネイル画像付きで更新記事を表示させたく、ブログモード更新記事を
% freeSpace4 %下に貼り付けとございますが、ネイバーさんサイトみたいな...でしょうか
https://matome.naver.jp/odai/2143886757419017501
さほど面倒はないと思いますが正確にご返事したいので、もしよろしければ対処する
サイトＵＲＬ教えていただけませんか
そうすれば、当方の検証用サイトで同じ反映を確認し対処できます
明日の夜9時ごろまでにはメール送りますのでよろしくお願いします
遅ればせのご返事です
サムネイル画像のサイズ変更
そこで、大変申し訳ないのですが、サムネイル画像は操作画面から入れるのでサイズが
指定されないコードなんですね
すると、ＣＳＳでレスポンシブ指定しても自動縮小しないんです
試しにサムネイル画像にサイズ指定してＣＳＳでレスポンシブ作動させようとしましたが、
自動縮小しませんね
で、そんなときは、６４０のサイズになったら画像を小さくする方法をとります
とりあえず通常サイズのＰｃでは、150サイズ
やや画面が小さくなる899px（アイフォン）では、100サイズ
次に640からのスマホサイズでは、80にしてみました
数値は好みで変更してください
ブログモード
==================================================
*/
.blog {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 15px;
overflow: hidden;
padding: 10px;
}
.blog .thumb {
float: left;
margin-right: 15px;
}
.blog .thumb img { width: 150px;}
ここからを追加しました
@media screen and (max-width: 899px) {
.blog .thumb img { width: 100px;}
}
@media screen and (max-width: 640px) {
.blog .thumb img { width: 80px;}
}
ここまで
フォントサイズとカラー あと少々お待ちください
再質問
大変お忙しい中ご返信頂きありがとうございました。
さてまず表示の件ですが、そうですね、ネイバーさんのようにです。もう少しインパ
クトは欲しいですが・・。
ちなみに現在作成中のサイトURLは、http://catfoodplus.com/ （キャットフードぷ
らす）になります。
記事を入れる気持ちを減退させるデザインを何とか・・・と思いながら放置してお
り・・・言い訳ですね・・。
見て頂く価値は全く無く恐れ多いのですが、どうぞよろしくお願い致します。
そしてCSSの件ですが、ご回答の中に、
”ＣＳＳでは、ＰＣとスマホで記事をこべつにフォントサイズ 色違いする指定の
コードまでは入っていないのですね”
とございますが、例えばblockquoteのように、PCとスマホを同時に変更する場合は、
今の記述でもかまわないのですよね？？（ですが本来求めている表示は聞いて頂いた
ように、PCとスマホで分けたいです。）
CSSは以下のようになっていますが、プレビュー、PC、アンドロイドスマホ全て文字
の色やフォントサイズが、変更できず困っています。（本当は関連記事と同じ表示に
したいのです）
・・・・・・・・・・・・・・・・・・
.blog .title {
background-image: url(img/h6.png);
background-position: 10px 1px;
background-repeat: no-repeat;
color: #83705e;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 14px;
margin: 3px auto;
padding-left: 34px;
line-height: 100%;
}
.blog .title a { color: #83705e ; }
.blog .info {
color: #666;
margin-bottom: 10px;
padding: 0 10px;
}
.blog .info a { color: #666; }
.blog .body {
line-height: 150%;
padding: 0 10px;
font-size: 12px;
}
.blog .more {
font-weight: 700;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 5px;
text-align: right;
color: #83705e;
}
・・・・・・・・・・・・・・・・・
そして先日お伺いした件とは別件です。
お忙しい所恐縮ですので、お時間を取ることができれば、下記の件についても教えて
頂ければ大変に助かります。
１．引用内容によって表示を変更したく、blockquoteを2種類作れないかしら？と
思っています。無理でしょうか？
２．blockquoteが、commonstyles.cssと、textstyles.cssの両方にあり、適用される
のはtextstyles.cssと言うのはなぜなのでしょうか？
３．関連記事一覧のタイトル表示を、H3ではなく他のメニューと表示を揃えたいので
すが難しいでしょうか？（新しいスタイルを作れば良い？？）
本当にお忙しい中申し訳ございません。
出張の間に私以外にも多くの問い合わせが来ておられると思います。
当方も記事入れの最中ですし、訪問数もほぼゼロですので、お時間の取れました時に
ご回答いただければ幸いです。
どうぞよろしくお願い致します。
Ａ.....ＮＯ２ （ミスアリかもしれません）
サイドバーに移動したブログモードの記事文字色とサイズ変更
なぜ、反応しないか？
まず、
以下記載の記事表示指定は<div class="body">のように、サイト内記事指定が直接指示されるように
なっています
<!-- ★ブログモードここから★ -->
<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="nmlbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body">ここですね <% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>
<!-- ★ブログモードここまで★ -->
ですので、単独指示できるようクラス指定コードを追加しました
body2としたのです
これです body2に書き換えてございます
<!-- ★ブログモードここから★ -->
<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="nmlbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body2"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>
<!-- ★ブログモードここまで★ -->
次にスタイルシートでも指示コード追加します
上が原本 下が追加コード
==================================================
基本スタイル
==================================================
*/
body {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
}
ここだけ追加してください
.body2 {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #FF0A0A;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 32px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
}
ここまで
color: #FF0A0A;赤にしてます
font-size: 32px;フォントサイズ 大きくしてますが、確認のため
あとで書き換えてください
後説明 理由
ブログモード、エントリー カテゴリーは、通常ＣＳＳ指定で変化は作用するのですが、
サイドバーに移動した、menu枠内に移動したため指示が遮断されて反応しないみたいです
一部、動くものはございますけど.....
ですので、クラス指定としました<div class="body2">のです
<div id="menu"></div>
<div id="menu">ここから囲まれていますね
<% freeSpace3 %>
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% freeSpace4 %>
<!-- ★ブログモードここから★ -->
<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="nmlbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body2"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>
<!-- ★ブログモードここまで★ -->
</div>ここまでです
今日は、疲れましたのでその他はあとでメールします
ミスアリに気が付いて再送（質問の趣旨を理解違い...
前回のの送信内容なのですが、ブログモードのフォントサイズ 色替えについて..
ＰＣ画面で違いを出すまでの解説でした
私の理解ミスかもしれませんが、スマートフォンで閲覧する際の変化かもしれないということまで
読み切れずの内容でした
==================================================
基本スタイル
==================================================
*/
body {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
}
ここは、ＰＣ画面での変化指定をしています
.body2 {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #FF0A0A;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
}
ここはスマートフォンでの指定です（スマホ対応も必要ならこのコード追加してください）
わかりやすいように文字色を青にしてます
@media screen and (max-width: 640px) {
.body2 {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #0A15FF;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 10px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
}
}
ＨＴＭＬのbody2書き換えもお忘れなく
再度のお便り3
更新記事のカスタムについて問い合わせをさせて頂いておりますINです。
大変お忙しい中、沢山の貴重なヒントを、しかも、とても丁寧にわかりやすく教えて
頂き、心から感謝申し上げます。
頂きましたコードを基本として、titleとmoreをそれぞれ個別指定したかったため、
下のように、title用に body2、more用に body3として書いてみました。
なおフォントの色、サイズに関しては思ったとおりに反映はされているようなのです
が、この書き方（作り方？）をしてもコード的に問題は無いのでしょうか？（ペナル
ティとかは？？）
↓ 関連記事一覧と更新記事一覧が、ある程度同じ見栄えになりました。
http://catfoodplus.com/catfood/
当方、エクセルのVBAを使ったことがあるだけのWEB素人ですので、とても不安に思っ
ています。
ですので、良いか悪いかだけでも教えて頂けますと嬉しいです。
＜ CSS ＞
メニュー内更新記事表示用
==================================================
*/
.body2 {
background-image: url(img/h4-border-Bottom.gif);
background-position: left bottom;
background-repeat: repeat-x;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro',
sans-serif;
font-size: 14px;
line-height: 180%;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間へ
の対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能
のキャンセル */
font-weight: 700;
margin-bottom: 10px;
overflow: hidden;
padding: 5px 0;
}
.body2 a {
background-image: url(img/category_title.png);
background-position: left 9px;
background-repeat: no-repeat;
color: #6d5d4e;
font-size: 14px;
line-height: 1.6;
text-decoration: none;
padding: 6px 22px 13px;
}
.body3 {
background-color: #F8F8F1;;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro',
sans-serif;
font-size: 14px;
text-align: right;
line-height: 180%;
letter-spacing: -0.001em; /* iOS4でのテキストの隙間へ
の対応 */
-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能
のキャンセル */
}
.body3 a {
background-image: url(img/button_more2.png);
background-position: right 6px;
background-repeat: no-repeat;
display: block;
padding-right: 19px;
color: #83705e;
}
・・・・・・・・・・・・・・・・・・・・・・・・
＜ HTML ＞
<!-- ★ブログモードここから★ -->
<div class="title"><span>最新記事</span></div>
<% AQNewEntries %>
<div class="nmlbox">
<div class="blog">
<a href="<% permaLink %>"><% pageThumbnail | tag_insert(div class="thumb") %
></a>
<div class="body2"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="body3"><% pageBody | tag_strip | str_replace( ,) | oneline
| shorten(70,true) %><div class="more"><a href="<% permaLink %>">続きを読む
</a></div></div>
</div>
</div>
<% /AQNewEntries %>
<!-- ★ブログモードここまで★ -->
・・・・・・・・・・・・・・・・・・・・・・・・・・
以上です。
出張から戻られたばかりで疲れも取れない中、貴重なお時間を頂いており誠に申し訳
なく思っております。
お手すきになることは無いと思いますが、もしお時間が取れましたらどうぞよろしく
お願い致します。
Ａ....ご返事
なおフォントの色、サイズに関しては思ったとおりに反映はされているようなのです
が、この書き方（作り方？）をしてもコード的に問題は無いのでしょうか？（ペナル
ティとかは？？）
私のサイト群では、これ以上の改変をしておりますが、何ら全然、まったく
グーグルアドセンスも警告すら受けたことはありません
グーグルウェブマスターから警告受けたことありません
巡回クローラー様からは、問題なしと報告を受けています
ペナルティにかかるのは、何らかのＳＥＯ関連、だましリンクとか、非難されるべき
意図的操作を組み込んだ場合のこと......
１．引用内容によって表示を変更したく、blockquoteを2種類作れないかしら？と
思っています。無理でしょうか？
引用内容によって表示を変更とございますが、さらなる指示コード追加となります
どのようにしたいが明確でないため対応できません
２．blockquoteが、commonstyles.cssと、textstyles.cssの両方にあり、適用される
のはtextstyles.cssと言うのはなぜなのでしょうか？
ここは、シリウスをお買い求めにいただいた方にお願いします
３．関連記事一覧のタイトル表示を、H3ではなく他のメニューと表示を揃えたいので
すが難しいでしょうか？（新しいスタイルを作れば良い？？）
今回の質問内容からの流れでいうと、サイドバーに移動した場合のことか
記事内巻末に表示される一覧のタイトル表示なのかが、判断付かず...です
参考までに...
一つのサイトであまりにもあちこちで変化を多くするというのは、サーバー負担が過重になる
読み込み速度に影響するかもしれません
多くの変化を願うなら、ある程度記事が増えたらですが、サブディレクトリーで一つのページ、
一つのサイトとして構築するという手立てもございます
例 以下はバラバラですが、一つの親サイト内にある子ページです
http://www.affiliateno1.com/ 親
子サイト
http://www.affiliateno1.com/sirius.customize/
http://www.affiliateno1.com/designer/
お便り...
何度も丁寧にご返信頂きありがとうございました。
これ以上は恐縮ですので、blockquote やH3につきましては、”可能”ということで
今後少しずつ勉強をし、程ほどにカスタマイズしていきたいと思います。
そして下記の質問の答えについては、当方が知識不足の為刺す意味を理解できないの
ですが、きっと、とても重要な事なのですね？
こちらも勉強いたします。
・・・・・・・・・・・・・・・・・・・・
＞ ２．blockquoteが、commonstyles.cssと、textstyles.cssの両方にあり、適用さ
れるのはtextstyles.cssと言うのはなぜなのでしょうか？
＞ ここは、シリウスをお買い求めにいただいた方にお願いします
・・・・・・・・・・・・・・・・
また、さらに今回も沢山の重要なヒントと共に、
http://www.affiliateno1.com/designer/ を紹介頂きありがとうございます。
こちらのサイトに関しては把握しておりませんでしたので、拝見させて頂くのが楽し
みです。
シリウスの購入先の重要性については、購入後2か月程で痛いほど知らされました。
素人だからこそ、その後に何が起こるのかが予想できない。
この経験から、もしシリウスの購入を希望する方に出会いましたら、貴サイトを迷わ
ず紹介したいと思っております。
今回の質問は、私も意図としていない、理解していない更新履歴の使いようや
不作動について気付かされました
ありがとうございましたと感謝いたします
巻末の更新履歴をサイドバーに移動した際のＣＳＳ不指示について
レスポンシブサイト専用のサポートまとめ
トップページ
関連ページ
- テーブルランキングのレスポンシブ不具合エラー
- テーブルランキングを導入以降、レスポンシブ作用後は、適合した比率で狭まらない、ある程度で作用が止まるという質問が寄せられました
- ブログモードでサブ階層の更新履歴が表示されない
- シリウスレスポンシブテンプレートのブログ仕様で3階層にした場合、2階層の関連ページが表示されない。対応策はこちらで....
- サイト幅いっぱいの画像を記事カラムに設定したい？
- レスポンシブの一カラムでＬＰを作っているが、サイト幅いっぱいの画像を記事カラムに設定できませんか？という質問です。ご返答はこちらで.....
- サイドメニューを右配置にしたはずが、保存されない
- 右サイドメニューでテンプレートを選択したはずが、 ＣＳＳ改行して保存すると元の左位置に戻ってしまう デフォルトに戻す、保存、いずれを指定しても結果は反映されない
- H1テキスト、背景スペースともに非表示にしたい
- h1 テキストおよび背景のスペースをPC,スマートフォンでも非表示したいが表示される部分の幅の調整（縮小）の方法がわかりません...という質問です...お答えはサポートで,,,
- ipone横画面ではPC画面が表示されるがスマホ対応にできないか
- シリウスのレスポンシブサイトをiponeの横画面で見ると正常反映なのですが、横にするとPC画面が表示されている。スマートフォン対応にできませんか？
- 記事巻末と更新履歴とのスペースが狭まらない？
- シリウス記事画面で巻末の隙間を排除しているのですが、閲覧では、更新履歴とのスペースが空きすぎる空間が見られるのですが狭めることはできないのでしょうか？詳細はこちらでご覧ください..
- ヘッダー画像のみワイド化できませんか？との質問です
- レスポンシブテンプレートのイチカラム対応でヘッダー画像のみワイド化、拡張できませんか？との質問が寄せられました
- ヘッダー画像をページごとに個別表示設定はしたが反映されない？
- シリウスレスポンシブＴＰで、ヘッダー画像をトップ、カテゴリー、エントリーとも個別に表示したい..解説サイトを例にするとコードのみが表示されてしまうのです。解決策をお願いします....
