djug's blog
知的障害者(B2)が書く高校生のブログ
ようこそ「話し合い広場」へ
こちらは、「話し合い広場」です。
※2023/4/10に、「BBS」から「話し合い広場」に変えました。
ブログ内容に関係ないこと、投稿に関係ないこと、好きなことをはなしあってください
※下のコメント欄からどうぞ！
そろそろ埋まってきたので今後は、「話し合い広場2号店」へどうぞ！
当サイトを快適にご覧頂くためにJavaScript を有効にしてください
34 件のコメント (新着順)
>ふじやんさん
カスタマイズのミスのご指摘ありがとうございました。
ごめんなさい、訂正です🙇♂️
上下ジャンプボタンCSSの修正範囲に関してですが、
/*]]>*//*<![CDATA[*/ の上までの所と書きましたが、正しくは
/*==== 番号ページャー ====*/ の上にある
/*]]>*/</b:if><b:if cond='data:view.isMultipleItems and !data:view.search.query and !data:view.isArchive'>/*<![CDATA[*/ の上までの誤りでした。
おそらく変更範囲を間違えて余計な所を消しちゃった？ためか、番号ページャーのCSSが効いてない状態になってしまってます。
バックアップがあるならそこから再度修正してください。もしバックアップがなくて戻すことが困難なようでしたら、こちらで何とかしますのでお知らせください。
>ふじやんさん
おかげで無事直せることができました。
ありがとうございます。
あ、上下ジャンプボタンもおかしくなってますので、以下のコードと置き換えてください。
(/*]]>*//*<![CDATA[*/ の上までの所)
/*==== 上下ジャンプボタン ====*/
#scroll-button svg {
transition: .5s;
fill: currentColor;
}
#pagetop,
#pagebottom {
display: none;
position: fixed;
right: 0;
z-index: 1;
color: var(--dark-color);
}
#pagetop {
bottom: 70px;
margin-bottom: .5em;
}
#pagetop svg {
transform: rotate(180deg);
}
#pagebottom {
bottom: 20px;
margin-top: .5em;
}
#pagetop svg,
#pagebottom svg {
height: 40px;
width: 50px;
}
#scroll-button svg:hover {
cursor: pointer;
color: var(--dark-color);
}
@media (max-width: 1024px) {
#scroll-button {
display: none;
}
}
/*==== ナビバー ====*/
nav {
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
opacity: .9;
box-shadow: 0 3px 6px -4px var(--shadow);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
min-height: 2em;
margin-top: -1px;
}
#nav {
position: relative;
margin: auto;
width: 100%;
max-width: 1160px;
min-width: 960px;
}
#nav-button,
#nav-label {
display: none;
}
#nav-content ul {
display: flex;
flex-wrap: wrap;
max-width: 640px;
}
#nav-content li {
line-height: 1.5;
list-style: none;
ransition: .3s;
}
#nav-content li a {
display: block;
font-size: 1.4rem;
padding: .5em 10px;
color: var(--brand-font);
}
#nav-content li a:hover {
background: #eef;
color: #333!important;
}
@media (max-width: 1024px ) {
nav {
height: 2em;
}
#nav {
box-shadow: 0 3px 6px -4px var(--shadow);
background: var(--light-bg);
padding-left: 8px;
min-width: 0;
}
#nav-content {
max-height: 0;
overflow: hidden;
transition: .2s;
}
#nav-button:checked ~ #nav-content {
max-height: 500px;
transition: 1s;
}
#nav-content ul {
margin-top: 30px;
max-width: 100%;
}
#nav-content li {
width: 200px;
margin-bottom: 5px;
margin-right: 8px;
}
#nav-content li a {
width: 100%;
display: block;
color: var(--brand-font);
text-align: center;
background: var(--brand);
border-radius: 3px;
}
#nav-label {
float: right;
position: relative;
display: flex;
height: 30px;
width: 30px;
align-items: center;
margin-left: 5px;
cursor: pointer;
z-index: 1;
}
#nav-label span,
#nav-label span::before,
#nav-label span::after {
position: absolute;
content: "";
display: block;
height: 2px;
width: 24px;
border-radius: 2px;
background: var(--brand-font);
transition: .3s;
}
#nav-label span::before {
bottom: 8px;
}
#nav-label span::after {
top: 8px;
}
#nav-button:checked ~ #nav-label span {
background: transparent;
}
#nav-button:checked ~ #nav-label span::before {
bottom: 0;
transform: rotate(45deg);
background: var(--color);
}
#nav-button:checked ~ #nav-label span::after {
top: 0;
transform: rotate(-45deg);
background: var(--dark-color);
}
}
スマホやタブレットだと気づかないかもしれませんが、PCで見た時ナビバーのレイアウトが崩れてしまっています。
スクリーンショット
原因はうちのテーマデザイナー実装記事の変更CSSをそのままコピペしまっているせいです。(私の説明不足が原因でもあるので申し訳ないですが…)
そのままコピペではなくて、赤文字の箇所(3か所)だけ変更して欲しかったんです。なのでコピペした箇所を一旦削除して修正して…と言ってもややこしいので
/*==== ナビバー ====*/ から
#mobile-home { の上までの部分を次のコメントのコードと入れ替えてください。(文字数オーバーのためコメントを2分割しました)
>ふじやんさん
またカスタマイズミスってしまいましたw
色指定で以下の1行が消えちゃってますよ
--brand-light: rgba(106, 90, 205, 1);/*薄いブランド色*/
>ふじやんさん
ナビバーの件でありがとうございます。
また困ったことがあったら質問させていただきます。
色指定でミスってるせいです。以下の3箇所、こうしてみて。
--brand-t: rgba(72, 61, 139, .9);/*濃いブランド色(半透明)*/
--brand-light-t: rgba(106, 90, 205, .9);/*薄いブランド色(半透明)*/
--brand-font: #fff; /*ブランド色背景用文字色*/
なんかナビバーがおかしくなった
うわーんありがとー！！
>smileJP77さん
忘れてなんかいないよ！
たぶんコメント専用ページから来てくれてありがとう！
この文章読んだら、涙が出てきそうになったわ
またScratch活動再開したら、一言かけてね！
えー。お久しぶりです。誰w？って思うかもしれないけど昔はとっても仲良かったよ！(俺にとってはだけどね。)まえ、ピカファイヤーのチャット部屋で色々話してた。覚えてるかな？feeder. 覚えてないかもな。もうなんだろう1年以上君と話していない気がする。前、シンガポールに住んでた奴。これで思い出せるかな？いまタイだけどねw。あーあ。w絶対誰？って思われてる。。。俺のスクラッチ見てみ。思い出すから。絶対。フォローしてるでしょ俺のこと。俺もしてるけど。ほんと仲良かった。引退してから一切話してないね。うん。なんか悲しいけど思い出してもらえてるといいな。またね。smileJP77
ごめんなさい…私、勘違いをしていました。
スクショ画像をよく見たらグレーのダミー画像(これもWebP)は表示されてるんですよね。
つまり djug さんの端末のブラウザは WebP には対応しているということ。となるとサムネ画像が出ない原因はおそらく (遅延読み込みの？)JavaScript が機能していないためではないかと。
というわけで、こちらでのサポートはちょっと難しいですね。
お役に立てず申し訳ないです。
こんばんは。
Twitter でもリプでお伝えしましたけど一応こちらでも。
F-lightで使われているWebP画像に非対応の古いブラウザでサムネ画像を表示できるようにする方法です。
ご使用のテキストエディタに一括置換機能があるなら、テーマのXMLファイルの以下の箇所を全部置き換えてみて下さい(18箇所くらいあるはずです)。
これで古いブラウザでもサムネが出るはずです。(先にバックアップを取っておくのを忘れずに！)
-rw
↓
-rp
例えば -rw-e365 となっている所は変更後は -rp-e365 になります。
このコメントは投稿者によって削除されました。
明けましておめでとうございます❗今年も、よろしくお願いいたします
当ブログのファビコンを丸くしました～
Bloggerアイコン変えたよ！
要するにご自身専用のGoogleフォームを作成して、各項目のIDを調べて、
うちの記事のサンプルコードの●●●を調べたIDに置き換えるという(ちょっと面倒くさい)作業が必要なのです。
https://www.google.com/intl/ja_jp/forms/about/
迷ったけどもうひとつ…どうしても見過ごせなかったのでご指摘を(^^;
djug links のお問い合わせフォームですが、うちの記事のサンプルコードをただコピペしただけでは意味がなくて全く機能しません！
うちの記事よりこちらのリモスキさんの記事のほうが詳細に書かれていますので参考にしてみて下さい。
https://www.limosuki.com/2021/03/googleform-customize.html
連投失礼します。
djug links の方、消さなくていいCSSが消えちゃってます。以下のCSSを追加して下さい。
body {
background-image: var(--bg-img);
}
なんかさっきまたおかしなことになってましたね(^^;
まず、追加の CSS の挿入位置に関してですが
/*==== ユーザー カスタム CSS ====*/ の直下に追加して下さいね。
で、djugさんがさっき追加されてた CSS ですが、ひょっとしてコメントに返信ボタンを付けたいのですか？
だとしたら申し訳ないですが F-light では返信ボタンを表示させることは出来ませんのご了承下さい。
ついでにですが…どうしても気になったことがあったのでアドバイスを。
djug Links の方の背景画像カスタマイズで表示がおかしくなってるようですので、正しく表示させる方法をお伝えしておきますね。
まず /*== ライトモード配色 ==*/ と /*== ダークモード配色 ==*/ の所を丸ごと下記のコードと入れ替えて下さい。これで明暗切替えに連動して背景が正しく表示されるはずですのでお試し下さい。
/*== ライトモード配色 ==*/
:root {
--bg-color: linear-gradient(to bottom, #fff, lightblue);
--font: #333;
--dark-font: #666;
--link-color: royalblue;
--brand: #afddfa;
--brand2: lightskyblue;
--shadow: #ccc;
--bg-img: url(https://img.freepik.com/premium-photo/blue-sky_87394-3227.jpg?w=2000);
}
/*== ダークモード配色 ==*/
:root[data-theme-mode="dark"] {
--bg-color: linear-gradient(to bottom, #346, #013);
--font: #eee;
--dark-font: #c0c0c0;
--link-color: deepskyblue;
--brand: dodgerblue;
--brand2: #1e50a2;
--shadow: #000;
--bg-img: url(https://img.freepik.com/premium-photo/beauty-of-the-night-sky_168058-16.jpg?w=2000);
}
>1カラムがおかしかったから本家からコピーして張り付けたら直りました。
余計な心配しちゃったようで失礼しました。先程覗いた時個別ページのレイアウトがおかしくなっていたので。
>ふじやんさん
2カラム化は、個別ページにも反映は、させようとは、考えていませんトップページとかのページは、2カラムにしようかなと考えておりました。
あの…念のために補足ですが、個別ページは簡単には2カラム化はできませんのでご了承ください(^^;
やろうと思えば出来なくはないですが、トップページ2カラム & 個別ページ1カラムというスタイルが一応 F-light の特徴の一つですので。
説明がわかりにくかったみたいですいません。下記の太字の数値を変更してください！
/*==== 2 カラム レイアウト ====*/
main {
width: 97%;
max-width: 1155px;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
#main-content {
margin: 3.5em 20px 1em 0;
width: calc(68% - 20px);/*60%*/
flex-shrink: 0;
}
#sub-content {
margin-top: 3em;
width: 32%;/*40%*/
flex-shrink: 0;
}
#sub-content .widget {
margin-bottom: 1.2em;
}
@media(max-width :1024px) {/*760px前後で調整*/
main {
display: block;
width: 100%;
padding: 0 .5em;
}
#main-content {
width: 98%;
margin: 3em auto 1em;
}
#sub-content {
width: 100%;
display: flex;
flex-direction: column;
}
#sub-content .widget {
margin-bottom: 0;
}
}
@media(min-width :960px) {
#BlogArchive1 {
padding: 0!important;
}
}
もう少ししたらコメントじゃなくてチャットのhtml作ってここに埋め込もうとしてます
ふじやんさん-メニューの「about」の部分を修正いたしました
こんにちは。
ナビバーの「about」のリンク先URLが、うちのブログ(しかも404)になってますよ～
自由に話してもらえれば嬉しいです