bloggerの画面
●画面（bloggerのContumpo）は、Bloggerのレスポンシブ画面（スマホに対応した）です。(制御が制限されていますので注意してください。)
●本ブログのスマホでサイドバーを表示させるとき
画面左上の「🉁」マークを選択してください。
●検索方法
・ブログの記事を検索する場合：本ブログの初期HPの上部にある検索ボックスに、検索したい文字を入力し検索をクリックする。
・記事内の文字を詳しく調べたいとき：記事内の文字を選択し右クリック→Googleで〇〇を調べたい。を選択→クリックする。
・ブログの記事内で項目を検索する場合：ブログ記事を開き[Ctrl]+Fキーで検索ボックスが開くため、そこに検索したい項目を入力し[Enter]を押す。
●本ブログのスマホで画面を折りたたむときは、「ホーム」を選択ください。
●【参考】スマホでページリスト表示を常に中央にする場合。
・概略の説明：ブログのスマホ画面でタイトルの下にページリストを表示させるようにしましたがページリストをクリックするたびに位置がずれスマホの画面から切れて選択できなくなってしまいました。
ＰＣでは、画面が広いので全く気にならなかったのですが、スマホで見て気づきました。
/* もっと見るリンクを中央に配置し、固定 */
@media screen and (max-width: 767px) {
.blog-pager.newer-link,
.blog-pager.older-link {
text-align: right;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: white; /* 背景色を設定 */
z-index: 999; /* 他の要素よりも前面に表示 */
}
/* もっと見るリンクのスタイル調整 */
.blog-pager a {
display: block;
position: fixed;
right: 0;
bottom: 0;
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
z-index: 999;
}
@media(max-width: 750px){
.overflow-popup {
left: 0!important;
}
}
・【参考】768px以下の画面ではページを折りたたみ769px以上の画面では全ページ表示とするcss。
/* ページを折りたたんで表示 */
@media screen and (max-width: 768px) {
/* ここに折りたたむためのスタイルを追加 */
/* 本文の幅を100%に設定 */
.post-body {
width: 100%;
}
/* 見出しのフォントサイズを調整 */
h1, h2, h3, h4, h5, h6 {
font-size: 16px;
}
}
/* 全ページ画面で表示 */
@media screen and (min-width: 769px) {
/* ここに全ページ画面で表示するためのスタイルを追加 */
/* 本文の幅を固定幅に設定 */
.post-body {
width: 800px; /* 任意の幅を設定 */
margin: 0 auto; /* 中央に配置 */
}
/* 見出しのフォントサイズをデフォルトに戻す */
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
}
}
●ブログのページを常に展開するCSS。
/* ページを常に展開して表示する */
.PageList { max-height: none !important; overflow: visible !important; }
.PageList .widget-content { display: block !important; }
・【参考】ブログタイトルの背景高さを固定する場合。
/*背景の縦幅を固定（スマホでもっと見る）が消えないため*/
bg-photo-overlay, .bg-photo-container {
height: 800px; /*適宜値を変更*/
}
●【参考】ページを折りたたんで表示したページと全ページで表示したページタイトルに
アンダーラインを引く場合。
/* ページタイトルにアンダーラインを引く */
/* .blog-posts .post-outer-container .post h3.post-title a {
text-decoration: underline;
color: #F000000; /* 赤色 */
}
@media screen and (max-width: 767px) {
.post-title{
border-bottom:1px solid #F00000;
}
}
@media screen and (min-width: 768px) {
.post-title{
border-bottom:1px solid #F00000;
}
}
●テーマ画面が急に変わった
上図の様に「Contumpo」から「custom」に理由は不明だが変わった。
しかし、レスポンシブ対応であることには変わりが無いようですし、カスタムしたHTMLやCSSも変わっていません。
●エラー
Bloggerで<style></style>の構文はエラーです。自動生成されるため記載の必要はありません。
デフォルトである場合は、エラーですので何か他で不具合が発生した場合は削除してみてください。
コメント
コメントを投稿
貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。