ふじろじっく
とあるブロガラーの取るに足らないブログ
コメント数がだいぶ増えてきましたので、こちらのコメント欄は閉じて新たにページを作成しました。
今後はこちらのふじ庵(4号店)をご利用くださいませ。
当サイトを快適にご覧頂くためにJavaScript を有効にしてください
100 件のコメント (新着順)
コメント数がだいぶ増えてきましたので、こちらのコメント欄は閉じて新たにページを作成しました。
今後はこちらのふじ庵 (4号店)をご利用くださいませ。
>なおなりさん
ごめんなさい！コメントフォームボタンのアイコンのホバー時のことを失念しておりました。
お手数ですが下記の手順でやり直して頂けませんでしょうか。
<symbol fill='var(--brand-font)' id='svg-comment-medical' viewBox='0 0 512 512'>
↓↓このように変更
<symbol id='svg-comment-medical' viewBox='0 0 512 512'>
このCSSを追加
.svg-comment-medical {
fill: var(--color);
}
#embed-form-button:hover .svg-comment-medical,
.comment-page-link:hover .svg-comment-medical {
fill: #fff;
}
これでホバー時にアイコンが白になるはずです。
適用されました！迅速にご対応いただきまして本当にありがとうございます。
今後もテーマ愛用させていただきますので、よろしくお願いします。
ご病気も快復されることをお祈りしております。
>なおなりさん
F-lightをご愛用頂きありがとうございます。
お気遣いありがとうございます。今は自宅療養中ですが喉以外は元気で暇を持て余しておりますので、ご対応させて頂きます(^^)
①検索窓の文字色に関して、CSSの下記の所を変更してください。(brand-font → color)
.search-box-text {
color: var(--brand-font);
}
↓↓
.search-box-text {
color: var(--color);
}
②コメントフォームボタンのアイコンの色に関して、下記のsvgコードを変更してください。検索文字と同じく brand-font → color に変えます。
<symbol fill='var(--brand-font)' id='svg-comment-medical' viewBox='0 0 512 512'>
↓↓
<symbol fill='var(--color)' id='svg-comment-medical' viewBox='0 0 512 512'>
以上です。もし変更が反映されないとか、他にご質問がありましたら、お気軽にコメントしてくださいね。
F-lightを使わせていただいているなおなりと申します。いつも大変お世話になっております。
ブログで入院されていると知り心配しておりましたが、退院されたとのこと、本当に良かったです。
さて、先日から自分のブログを（ド素人ながら）色々と弄っているのですが、どうしても分からないことがあったので、教えていただきたいです。
①ライトモード時、ナビバーの検索窓に打ち込んだ文字を他の文字と同じ「文字色」にする方法
②個別記事下部「コメントを投稿」欄の「埋め込みフォームが～」と「別ページに～」の左にある、吹き出しアイコンの色の指定方法（通常時とホバー時）
体調が回復されてからで構いませんので、可能であればよろしくお願いいたします。
（作成されたテーマをカスタマイズされ、不快に思われたら申し訳ありません）
上手くいっていないブログ： https://na0nnnnn.blogspot.com/
>BINUBALLさん
ありがとうございます。もう病院には戻りたくないです(笑)
無事に退院できてよかったですね。
> BINUBALL さん
ご心配ありがとうございます。
北陸地方では甚大な被害が出ているようですが、幸い私が住む東海地域では影響はありませんでした。
日本の地震は大丈夫ですか？
有難う御座いますm(__)m
> GOさん
返信遅くなってしまって申し訳ないです。
まずヘッダー画像に関してですが、レイアウト編集ページからヘッダーウィジェットを使って設定した画像の場合は、height width 属性は挿入されず、手動での対処はちょっと難しいのではないかと…
リンクリストの画像に関しては、下記のように <img> タグ(４枚分全て)に width height 属性を追加すれば PSI の指摘は回避できると思いますのでお試しください。
<img height='180' width='320' alt='タイトルのテキスト' src='画像のURL'/>
ふじやんさん、また教えてください！！
テーマ変更後、CLS に関する問題: 0.1 超（モバイル）が出てしまいました
PageSpeed InsightsとWebPageTestで見てみるとヘッダー画像とアイキャッチリンクが原因のようで、ネットで調べてると『width, height を設定する』というのが出てきたんでやろうととしたんですが自分の知識では無理でした。
CLSの問題に関して、なにか対策方法はあるでしょうか？
宜しくお願い致しますm(__)m
> GOさん
私もトータル1時間くらい調べたり悩んだりしてました。しかも新記事を(HTMLモードだけで)書きながら(笑)
私がもっと早く理解できてればよかったんですけどね(^^;
ほとんど存在を忘れかけてた「作成モード」の機能のこともちゃんと把握しとかないとダメですね…
F-light のカスタマイズに関することなら(たぶん)すんなりお答えできると思いますので、またお気軽にコメントして下さいね！
お返事有難う御座います。
記事編集をHTMLモードでしかやらないって所が素人には理解できない別世界です
凄すぎます。。。
了解しました！！
根本的な所で出来るで出来ないが判断できないもので、すみませんでしたm(_ _)m
Googleで検索もして、テーマのHTML、本文のHTML、探しまくったんですが、そもそもないんですね
軽く数時間は無駄にしました（笑）
何処の馬の骨ともわからない男にお付き合い有難う御座いました
思ったよりテーマ変更早くできそうな感じです
ブログでカスタマイズ紹介されているのも本当に助かります
本当に有難う御座いました
F-light有り難く使わせて頂きます
いえいえ、私の理解力が乏しくて申し訳ないです…
なるほど。そういうことでしたか。
実は私、記事編集は HTML モードでのみやっているのですが、作成モードの時でしかその機能は使えないため、全く考えもしませんでした(ていうかその機能のことを知らなかった)(^^;
で、結論ですが、残念ですが無理ですね…
「テキストの背景色」で挿入された HTML タグは以下のようになっていて、クラスや ID 等は付かないため、その部分だけ指定して色を変えるということは出来ないです。
<span style="background-color: #ff00fe;">背景色を付けたテキスト</span>
従って、GOさんが調べられた太字指定でマーカースタイルを当てるしか方法はないと思います。
どう言ったらいいのしょうか(^^;
ブログ記事本文を書く時に、テキスト背景色変更でまさに蛍光のマーカーのようなアイコンボタンを押してテキストの背景色を変更するじゃないですか
それをするだけで全体を塗ったようなマーカー装飾ではなく、アンダーラインのマーカー装飾にできないかな。って事です
説明が下手ですみません m(_ _)m
CSS じゃなくて、記事編集時に HTML の style 属性でマーカー装飾したいってことですかね？(また間違ってたらごめんなさい(^^;)
例えばこんな感じで
<span style="background:linear-gradient(rgba(255,255,255,0) 65%, pink 65%);">マーカーを付けたい文章</span>
如何でしょうか？ pink の部分を変えればどんな色にも出来ます。
このタグを辞書登録しとくとすぐ出せるので便利です。
ご丁寧に有難う御座います m(_ _)m
既に書いてある記事をCSSで変更できるとは思ってもいませんでした
今まで書いた記事ではなく
これから記事を書く時に太字に変更でマーカー風になるのではなく
『テキストの背景色』の変更をしたら、そのままアンダーラインのマーカー風になったらな、、、って事です
出来る出来ないが全くわからず言ってますが(^^;
テキストの背景色指定時に、CSSで透過部分と指定した背景色の割合指定できたらマーカー風になるなと思ったんです
解り難くてすみませんでした。
お手数かけましたm(_ _)m
既に style 属性で背景色指定されている箇所(<b style="...">～</b>)を変更せずに CSS でマーカー装飾に変更したいということでよろしかったですかね？(解釈が間違っていたらご指摘下さい)
下記の CSS でどうでしょう？
背景色は無効にして、下線を太くしてマーカー風にしています。
pink はお好みのカラーコードや色名に変えて下さい。
.post-body b {
background: none!important;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: pink;
text-decoration-thickness: 5px;
text-underline-offset: -1px;
}
今後太字指定された範囲も全てマーカー付きになります。
先ほど質問したばかりなんですが、、、
最後の最後ですm(_ _)m
ブログ記事を書く時にテキストの背景色で強調したい部分の背景色を変えているんですが
これをマーカーで線を引いたように変更はできないでしょうか？
背景色の割合を透過と指定した背景色で指定できれば、元々ある機能を使って凄く便利に使えるのに、、、
っと思ってしまいました
Googleで検索してみると
Bloggerの太字にする機能を使って、太字にすると自動でマーカーで線を引いたようじなるカスタマイズは見つけたんですが
テキストの背景色を使ってマーカーのようにするカスタマイズをしている人を見つけられませんでした
もし可能なら教えて頂きたいです
本当に何度もすみません。m(_ _)m
＞ふじやんさん
お返事有難う御座います。m(__)m
何度もすみません。
> GOさん
目次だけ、尚且つライトモード時のみの背景色を変えたいということでしょうか？
でしたら下記の CSS を追加して下さい。
:root[data-theme-mode="light"] {
#toc {
background: お好みのカラーコード;
}
}
:root[data-theme-mode="light"] { と } で囲うと、ライトモード時のみに反映させることが出来ます。
またまた、教えて頂きたいですm(__)m
今、色々好みにイジっているんですが、ライトモードの目次の背景色を変更できないでしょうか？
HTMLで目次の所を見ても、色変更をどうすればいいのかわからなくて、、、
宜しくお願い致します m(__)m
> BINUBALLさん
私が参照しているのははBloggerの統計だけで、Googleアナリティクスは利用していないので、その辺の仕様はよくわかりません(^^;
Blogger自体の統計には表示されるが、アナリティクスでは表示されない。
> BINUBALLさん
POSIEND 독블로그 ですか？
以前、私のブログのアクセス解析でこのブログを発見して以来、購読リストでフォローして、RSSリーダーでもチェックしていますよ！
つい先程も윤슬テーマの記事を拝見していました(笑)
私のブログにずっと訪問しているのはfujiさんですか？ google.comが統計にずっと表示されます。 www
> ヒデヒデさん
こんにちは。
引っ越しのご報告ありがとうございます。とりあえず「お知らせ」ページのRSSを(避難所noteと入れ替えて)登録しておきました。
更新情報チェックして覗きに伺いますね。
ああ、私の隠れ家ですか…あそこの場所は前よりさらに見つけ辛くなってますね(笑)
一応ここに入り口ありますので → https://fujilinx.blogspot.com
メモとか独り言のようなちょっとした日記として使うには重宝してます。ブログとTwitter(𝕏)の中間というかいいとこ取りと言うか…そんな感じで自分には合ってる気がしますね。
お久し振りです。
noteが個人的に合わなかったので、結局普通のテキストサイトに戻ったので、報告にきました。まだ引っ越し完全には終わってないですが。しかも色々あって、以前と違うURLになってたりしますが(^_^;)
そう言えば以前こちらのCOMMENTSを見て、隠れ家(？)を見つけたんですが、今探してみたら見つけられなかったり。
自分に合うネットサービスって、なかなか見つからないですねぇ…。
> ミラクさん
なんとか記事が表示されるように出来たようでよかったです。
本当はエラーにならないようテーマを修正対応出来ればよかったのですが、高機能な JetTheme でもダメだと分かって早々に匙を投げてしまいました(^^;
お手間を取らせてしまいましたが、結果オシャレな感じになったとのこと。怪我の功名って感じでしょうかね(^^)
ぶじやんさんへ
動画まで作ってくださってありがとうございました。
『半角数字だけ』が問題だったのですね。理解してなくてすみませんでした。
『’2023』という風にアポトロフィーを入れるようにしました。漢字にしてしまおうかと思ったのですが、厳つい感じにしたくなくて半角数字にしたことを思い出して西暦表示でも使われる『’』にしました。何だかオシャレな感じになったので気に入ってます。
色々と教えてくださり、本当にありがとうございました。
> ミラクさん
Twitterでもお伝えしましましたが、一応こちらにも。
ラベルガジェットも表示されなかったとのことで、もしやと思い検証してみた所、どうやら半角の数字だけのラベルが含まれているとエラーになってしまうようです。
例えば「2022」だとエラーになりますが「2022年」とか「#2022」とか全角の「２０２２」であれば問題なしという感じです。
ラベルの振り分け処理は JetThme でも同じ様なコードが使われているのですが、JetThme でも同じエラーが発生しました。というわけで申し訳ないですが私のスキルでは対応は無理そうです…
どうしても F-light をお使いになりたいのなら、お手数ですがラベル名を変えて頂くしかないかと。
ラベルの一括変更はこちらの記事をご参考にどうぞ。大量の記事でも左程手間なく出来ます。
こんにちは。
以前はルビのふり方を教えてくださりありがとうございました。
少し時間が経ってしまいましたが、やっとブログデザインを変え始めてます。いくつかのブログを持ってるのですが、他のブログではうまく行ったのに一つだけ記事が消えてしまいデザイン導入が上手くできないブログがあります。
このブログはラベルガジェットも表示されなかったのですが、こちらはレイアウトで表示数を絞る事で表示させることが出来ました。もしかして、記事数が多すぎても導入が出来ないのでしょうか？関係がないかもしれませんが、他のブログとの差は記事数の多さ（800記事以上）と、このブログだけ（10年以上前の日付の）古い記事があるという事くらいしか思いつきません。
デザインがうまく行ってないブログはこれです。
https://tokiai.blogspot.com/
――――――――――――――――
ガジェット「FeaturedPost1」を表示できませんでした。 There was an error processing the markup.
ガジェット「Blog1」を表示できませんでした。 There was an error processing the markup.
―――――――――――
上記のエラーが表示されていました。
お手数ですが対処法がありましたら、教えてくださると嬉しいです。
ありがとうございます。
無事変更できました！
> ピスっち さん
拙作テーマをお使いいただきありがとうございます。
ヘッダーに背景色を付けるには CSS の以下の箇所の var(--light-bg) をお好みのカラーネームやカラーコードに変更してください。
ちなみにここを var(--brand) とすると濃い方のブランドカラーになり、var(--brand-light) だと、薄い方のブランドカラーと同じ色になります。
/*==== ヘッダー ====*/
header {
background: var(--light-bg);
}
ブランドカラーにされた場合、ライトモードで黒文字のブログタイトルが見づらい時は以下の CSS を追加してください。
#header-title {
color: var(--brand-font);
}
初めまして！
ふじやんさんの『F-light』を使わせていただいているのですが、ふじやんさんのブログのように、ヘッダーを特定の色で塗りつぶすことはできませんか？よければ教えていただきたいです。(*m_ _)m
> 暇人さん
お久しぶりです。
私も諸事情で今後は更新が滞りがちになるかもしれません。
ブログタイトルの変更に関して、私に意見を求められても困りますが…とにかく名前よりも大事なのは中身ですよね。
リセットされてどのような内容にリニューアルされるのか楽しみにしています！
こんにちは。お久しぶりです。
暇人なんて名前ですが、最近かなり忙しくブログも書けていませんでした(-_-;)
今回一度ブログをリセットすることにしましたのでご報告します。
また、ドメインは変える予定はありませんが、名前を「ひまろじっく」から「ひまろじっくブログ」のように変更しようと思っています！
そこのところご意見頂ければなと…！
> ヒデヒデさん
わざわざご報告ありがとうございます。
それにしても note とは予想外でした(^^;
早速RSSリーダーやBlogger閲覧リストに(旧ブログと入れ替えて)登録しましたので、また時々覗きに伺いますね。
こちらではお久し振りです。
ブログ引っ越したので、報告に来ました。色々と面倒臭いので、結局レンタルブログに引っ越す事になりました(^_^;)
> djug さん
さめさんがサブブログ方でお問い合わせページを用意されたそうですので、ご質問はこちらの方へ送ってみてください。
このコメントの追加情報です。
どうやらアルバムアーカイブの「Bloggerの写真」で取得した lh3.googleusercontent.com の URL なら投稿者以外でも問題なく見れるようです。
一覧ページのサムネ上の右クリックから取得できますし、URL は短いです。
> djug さん
一応確認ですが、こちらのリモスキさんの記事の手順に従って、フォームと各質問の値を取得されましたか？
その点は問題ないというのであれば申し訳ないですが私の方では原因はわからないです。
というわけで、さめさんのメインブログの方のお問い合わせフォームからでもお尋ね頂けませんでしょうか。
質問です！
こちらの記事を見て同じようにカスタマイズしましたが、Bloggerに適応するとエラーが出てしまいます。
Google フォームのリンクも貼った状態です。
補足です。
どうやらこのやり方で取得した URL には画像投稿者しかアクセス出来ないようです。
シークレットモードだとログインを要求され、別アカからだと⛔になってしまいました。
> BINUBALL さん
有益な情報ありがとうございます。
こちらでは右クリックでの URL 取得はできませんでしたが、F12 開発者ツールから取得できました。
想像以上に URL が長いですね。
速度を取るか、短い URL を取るか迷うところです😅
…余談ですが、TWitter では
1.bp.blogspot.com
3.bp.blogspot.com
4.bp.blogspot.com
以上の3つはスパム扱いされてしまい投稿不可ですが
2.bp.blogspot.com
これなら大丈夫ですよ。
画像の追加 > BloggerでBloggerに上げた画像を右クリックすると、lh3.googleusercontent.com形式のURLを取得することができます。1.bp.blogspot.comに変更すると、うまく動作します。欠点はファイル名が表示されず、リンクが長いことです。 速度は速いです。
(twitterで送れなかったのでここに書きます)
>ミラクさん
お役に立てたようで何よりです。
また何かしらご不明な点がありましたら、お気軽にお尋ね下さい。
ふじやんさん
ありがとうございます。ルビがちゃんと表示されました。
>ミラクさん
F-light をお使いいただきありがとうございます。
ルビのスタイルに関してご不便をおかけしてしまったようで申し訳ありません。
最近のアップデートでルビの文字サイズの CSS を追加したつもりでいたのですが、どうやら当ブログの CSS には追加したものの、肝心の F-light テーマの方に追加するのを忘れてしまっていたようです…(後ほど追加しておきます)。
お手数ですが CSS の /*==== 共通 ====*/ のところに以下のコードを追加してください。
font-size はお好みで微調整を。
rt {
font-size: .7rem;
}
はじめまして。
F-light テンプレートを導入してみたのですが、記事内のルビタグが上手く表示されなくなってしまいました。ルビ部分の文字サイズが元の文字と同じサイズになってしまうのです。
色々と調べて弄ってみましたが、分かりませんでした。お時間ありましたら、変更箇所を教えていただけると嬉しいです。
小説用にブログを使っているので、ルビは綺麗に表示させたいのです。よろしくお願いします。
> djug さん
おお、アップデートできたんですね。以前より快適になったのなら何よりです。
僕のAndroidタブレットのChromeのバージョンアップしたらWeb P画像が表示されるようになりました。
> djug さん
ご指摘ありがとうございます。
当該ページは既に削除していたのですが、リンクを削除するのを忘れておりました(^^;
あのー「サイトマップ」内にある「フォロー中のブログ」のリンクが、404になっていますよ！
> 暇人さん
無事ログインできたようでよかったです。
Twitterに関しては了解です(^^;
> ふじやんさん
電話番号の２段階が何故かできずログインできませんでした（；^ω^）
ちょっとしたらブログの更新をしたいと思います。
Twitterのリプ気付いてましたよー(・∀・)
ありがとうございますー！
(反応する癖が付いてないので…m(_ _;)m)
> 暇人さん
アカウントにログイン出来ないってこと？ だとするとブログの更新は出来るのかな？
状況がよくわかりませんが、Twitter での DM もお気軽にどうぞ。
あ、そういえば以前 Twitter でリプ(挨拶程度で大した内容じゃない)したんですけど、気付かれてますかね？(^^;
ふじやんさん、こんばんは。
ひまろじっくとひまろじっくらふとの暇人です。
最近色々あってアカウントにアクセスできない状態です…。
ブログの更新も止まってしまっていますがしばらく待って頂ければと思います。
今後twitterのDM等でご連絡させて頂くかも知れません。
そのときは是非、宜しくお願いします。
> kono さん
お役に立てたのなら良かったです。
また何かご不明な点などありましたら遠慮なくコメントして下さいね。
ふじやん様。早速の対応ありがとうございました。
F-lightにコピペ機能の追加、おかげさまで出来ました。
僕の場合はコピペ機能と色の変更の最小カスタマイズで利用させてもらってます。
改めてありがとうございました。感謝しております。
> knoo さん
はじめまして。拙作テーマをお褒め頂きありがとうございます。
「pre-codeのコピペ機能」のテーマへの実装に関しては申し訳ないですが、もう今後は機能的なアップデートはしないつもりでおりますので、ユーザー側でカスタマイズして頂く形となります。
ちなみに当ブログのコードコピーは すたすた式 さんのコード(常時表示するタイプ)を使わせて貰っています。
→ 【Blogger】コードのコピー用にボタンを作成してみました【highlight.js + Copy Button】
highlight.js が導入されていなくても <pre></pre>内のコードコピーが可能です。
はじめてまして。「F-light」すばらしいテーマです。
早速ですが本題です。
「pre-codeのコピペ機能」を内包するご予定、
または勧めのカスタマイズ方法ございますでしょうか。
自分でカスタマイズしましたが、他のサイトや更新された情報が多すぎて
正解がわかりませんでした。それなりには出来ます。
現時点でのfujilogicの方法が理想です。
人それぞれで対応が大変かと思いますが、よろしくお願いします。
ありがとうございます！いつも最高過ぎます！
コメント内の外部リンクを別窓で開かせる JavaScript を調べて実装してみました。
pj さんにコードをメールで送りましたのでご確認下さい。
先ほどsを消して修正しました。別窓の件も承知しました。こればっかりは仕方ないですね。いつも本当にありがとうございます！m(__)m
> pjさん
まず、うちからコピーしたコードを消して下さい。(うちは QooQ じゃないので構造やコードが違います)
代わりに以下のコードを適用してみて下さい。
.comment-content a {
text-decoration: underline;
}
別窓の件ですが、Blogger のコメントでは使えるコードに制限があって target="_blank" は使えないため、リンクを新しいタブで開かせる事は出来ません。
また大変失礼致します。この記事のコメントでアンダーバーつけるcssをふじやんさんブログの検証真似してみると、まずワテのpjと日付と返信に余計なアンダバーがついてしまいます。さらに欲を言えば、できるだけ他人様のブログの場合外部リンク別窓で開きたいのですが、そのhtmlたぐを入力すると「使用できない」の表示が出てきます。
ちょっと色々お聞きしてこれまた難題で不可能でしたらかまいませんのでお時間ある際にまた教えていただけますと幸いです。厚かましく大変失礼いたしました。
ご返答大変ありがとうございますm(__)m メモ帳にふじやんさんのお言葉貼り付けさせていただきますm(__)m
> pjさん
内部リンクでもリンクアイコンが出てしまう原因は単純な事です。ブログの URL を変えたのに CSS に反映させてないからです。
/* 外部リンクアイコン表示 */ の以下の所を変更してみて下さい。
#single-content a:not([href^="https://777biblepj"]):not([href^="#"]):not([href^="java"]):after {
↓↓
#single-content a:not([href^="https://injah888pjbible"]):not([href^="#"]):not([href^="java"]):after {
エフェソス4章8節と詩篇68篇18節の「捕虜」とは何か
例えばこちらの記事で内部リンクを配置してるのですが。外部リンクアイコンが表示されて可能なら外したいなと思っていました。無理なら全然お気になさらないでくださいm(__)m もしかして前に聞いて無理と言われたかもしれません。今回からきちんと無理なら無理とメモ帳に書いておきます_(._.)_
ふじやんさんいつもありがとうございます。ちなみにどうでもいいことで解決しなくとも大丈夫なのですが、内部リンクにおいても外部リンクアイコンマークが出てきてしまうのですが、こちらって外せましたでしょうか。以前にお聞きした気がするのですが、忘れたのか何かコードコピペした気がするものの適用されてなくていつかお聞きできればと思っていました_(._.)_こちらも何度も何度も情報クレクレ大変申し訳ありません_(._.)_
> pjさん
こんにちは
コメントにリンクを入れたいってことでしょうか？でしたらこんな感じで→
<a href="https://injah888pjbible.blogspot.com/">関西人pjの聖書勉強ブログ</a>
これをそのままコピペしてコメントを投稿するとこうなります→
関西人pjの聖書勉強ブログ
大したことない解決可能で以前教えてくださったことについてご質問させてくださいm(__)m コメントする文章についてなのですが、これらに例えば下記のようにhttps://injah888pjbible.blogspot.com/ワテのブログリンクを貼り付けたとしますが、こちらをクリックしただけで外部リンクに飛んでサイトブログがブラウザで表示されるためには、何をしたらよかったでしょうか。何かに文字列変換とかありましたよね。すみません聞きまくりで。文字列変換エンコードとか検索してもどちらがその説明なのか見当たらなくて以前に、htmlタグをそのまま入力するのやめてくれとご注意いただいたので、ふじやんさんにお聞きしてしまいました。大変何度も失礼いたしました_(._.)_
> pjさん
了解😑
こんにちは、また諸事情でリンク変えましたｗ
https://injah888pjbible.blogspot.com/
> 暇人さん
いや、Bloggerに限らずどこのブログサービスでも画像が入れられるのは普通かと…とりあえずお役に立てて良かったです(笑)
あ、カスタマイズ済みテーマと入れ替えたのではなく、地道にカスタマイズされてたんですね。もしもの時の為にバックアップを取っておくことはほんと大事ですよ～
困ったことがあったら可能な範囲でサポートしますのでお気軽に相談して下さいね。
暇人さんも充実した冬休みをお過ごし下さい！
> ふじやんさん
画像ファイルをコピペするとBase64になってしまっていたのでphotoを使っていたのですがよくよく考えたらbloggerって直接写真入れられますね(^.^;
そのことを完全に忘れていました…
一度貼り付けるところを間違えてどうなることかヒヤヒヤしましたがなんとかカード化に成功してホッとしましたε-(´∀｀*)
ひまろじっくのときから色々助けて頂いて心から感謝しています！
これからもいろいろなことで相談させていただくかも知れませんがそのときはよろしくお願いします！
ブログアドレスはhimalogicraft.blogspot.comになりました。
今度ブログのロゴ画像を作成しないといけませんね(*_*;
明後日から長期休み中(9日間)に作れたらいいなと思っています。
> 暇人さん
普通に Blogger にアップした方が手っ取り早いですし、パラメータを弄れば WebP 化や 圧縮 jpeg 化も出来ますから、別に Base64 にするメリットはないような？
早速記事を御覧頂いたようでありがとうございます。いやいや、相変わらず拙い記事でお恥ずかしいですが…お役に立てれば幸いです！
「ひまろじっくらふと」(ちょっと言いづらいかもw) 覗いてみたら早速カードバージョンにされてましたね。特に問題ないようで安心しました(^^)
追記です。
コロコロURL変えているとGoogleに嫌われそうですがまた名前を変えて「ひまろじっくらふと」にしたいと思います…
ブログアドレスはまだ変更していませんが現在のアドレスが使えない場合「himalogicraft.blogspot.com」になっていると思います。
> ふじやんさん
メリークリスマス！
reCAPTCHAのことすっかり忘れていました…。
ご指摘ありがとうございます！
以前ひまろじっくのときもご指摘頂いていつも本当にありがとうございますm(_ _)m
検証してみるとBase64画像は正しく表示されないようでした。
今はGoogle photosにアップロードして画像を表示しています。
F-lightのカードレイアウト化の記事、拝見させて頂きました。
1日でこんなにもハイクオリティなカスタマイズ記事を見てやはりふじやんさんは凄い人だなと再認識しましたΣ(・∀・；)
早速試させていただきます！
最高のクリスマスプレゼントありがとうございます！
(ひまろじっくブログですがなんとGoogleの検索結果の最上位に来ていました！)
またカスタマイズが終わったら(今日はちょっと時間がないので明日？)またこちらにてご報告させて頂きます。
> 暇人さん
こんばんは & メリークリスマス！
やはりフリードメインは不安定なんですかね。それか Blogger との相性が悪いとか。
新ブログのお問合せフォームの reCAPTCHA がエラーになってますけど、ここのドメイン変更忘れてませんか？
未検証ですがおそらく F-light は base64 画像はサムネ処理出来ないと思います。
F-light のカードレイアウト化の記事を書いてみましたので参考にしてみて下さい。
連続になってしまい申し訳ございません。
F-lightテーマを適用したのですがトップ画面のサムネイル画像が表示されなくなってしまいました。
Base64画像が悪いのでしょうか…
あと、表示速度を早めるためブログアドレスをhimatown.cfからhimatown.blogspot.comに戻しました。
>ふじやんさん
（クリスマスですね…(゜゜)）
私もPSIで測定不能だったのですがほっとけば治ると信じて放置していました(-_-;)
表示速度が遅い原因は、
・フリードメインの使用
・大量のbase64画像
・（そもそもテーマ？）
とかですかね…
色々変更して改善していきたいと思います。
無理してBFBを使わずにF-lightを使わせて頂こうかと思います。
今後のカスタマイズ記事の投稿を楽しみにしています。
> 暇人さん
お久しぶりです。前回コメント頂いたのが9月ですけど、うちのブログデザインそんなに変わってますか？ ブランドカラーがグリーン系に変わったくらいでそれ以外は大して変化ないはずですけどね(^^;
新ブログのドメイン .cf ということはひょっとして無料ドメインとか？
ところでトップページは問題ないのですが、記事ページへのアクセスがえらい重くて数十秒ぐらい掛かるんですけど何故でしょう？ PSI もエラーで計測不能でした(^^;
ちなみに BFB テーマは「埋め込み」だとコメントが機能しないようなのでご注意を。「フルページ/ポップアップ」にしか対応してないようです。
ブロック表示とは BFB (Bulma) や QooQ の通常版のようなカードスタイルということでしょうか？
リストスタイルが F-light の個性といっても過言ではなく、人気の記事や注目の投稿等も全て同じデザインで統一していますので、もしそういうデザインが好みなのであれば、ユーザー側でカスタマイズして頂くか、他所のテーマを使って下さい…とホントは言いたいところなのですが…
まあ気が向いたらカスタマイズ記事を書きますので、あまり期待しないで気長にお待ち下さい(^^;
お久しぶりです。
しばらくこのサイトにアクセスしていなかったので、デザインが大きく変わっていて驚きました…！
最近bloggerで新しいブログを立ててみました。
URLはhttps://himatown.cfです。
今回はF-lightにしようか迷ったのですがBFB（Bulma版）というものにしてみました。
F-lightをブロック表示にする方法等ありましたら教えていただけると泣いて喜びます。
＞ふじやん。さん
大変わかりやすい説明ありがとうございます。
またわかなかったら質問させていただきます。
> djug さん
ラベルをハッシュタグとして分類させたいと言うことですかね？
記事ページのカテゴリの下やハッシュタグガジェットに表示されるラベルはラベル名の頭に # が付いているものです。
記事編集でラベルを付ける時にラベル名の頭に # を付けて下さい。
例えば以下の画像のような場合は、「カスタマイズ」はカテゴリに分類されて「#F-light」がハッシュタグに分類されます。
説明用画像1
あと補足ですが、ラベルガジェットを設置する場合はレイアウト設定で「リスト」の方にして下さい。
説明用画像2
まだご不明な点がある場合はまたコメントしてくださいね。
こんばんは(^^/
ハッシュタグのことなんですが、投稿の編集画面でどこにハッシュタグの内容を書くと、ブログのカテゴリーのしたに表示されますか？
分かりにくい説明ですが、解答お願いします。
ありがとうございます！！早速使ってみます！
> しゃびちゃん さん
拙作テーマをお使いいただきありがとうございます。
追加 CSS が適用されないとのことですが、お使いの F-light のバージョンは 1.25 以上でしょうか？ でしたら、追加の CSS は
/*==== ユーザー カスタム CSS ====*/ の直下に追記して下さい。もし古いバージョンをお使いで、既にガッツリとカスタマイズ済みで最新版との入れ替えが大変という場合は、お手数ですがこの記事を参考にご自身で対応をお願いします。→ 追加の CSS コードを挿入する位置と方法
ところで吹き出しのコードですが、F-light 用に最適化(ダークモード対応など)してみましたので、宜しければこちらを使ってみて下さい。
/*****会話のCSSここから*****/
.talk-wrap {
display: block;
clear: both;
margin:0 auto 3px auto;
}
.talk-wrap p{
margin: 0;
}
.left-icon,
.right-icon {
width: 100px;
height: 100px;
border-radius: 50%;
background: no-repeat;
background-position: center;
background-size: 100%;
float: left;
display:inline-block;
box-shadow: 1px 1px 5px var(--shadow);
border: 3px solid #fff;
margin-bottom: 10px;
}
.left-icon,
.talk-right {
float: left;
}
.right-icon,
.talk-left {
float: right;
}
.talk-left,
.talk-right {
position: relative;
background: var(--light-bg);
border: 2px solid var(--color);
padding: 3%;
border-radius: 10px;
width: 75%;
margin-top:10px;
box-shadow: 1px 1px 5px var(--shadow);
margin-bottom: 10px;
}
.talk-left::before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: var(--color);
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px;
}
.talk-left::after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: var(--light-bg);
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px;
}
.talk-right::before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: var(--color);
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.talk-right::after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: var(--light-bg);
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear: both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px) {
.left-icon,
.right-icon {
width: 80px;
height: 80px;
}
.talk-left,
.talk-right {
width: 70%;
}
}
@media screen and (max-width: 380px) {
.left-icon,
.right-icon {
width: 60px;
height: 60px;
}
.talk-left,
.talk-right {
width: 65%;
}
}
/*****会話のCSSここまで*****/
F-lightにて、吹き出しを使用しようと思い、https://www.yamacho-blog.com/2017/09/blogger-fukidashi-css.html このURLのコードを指定の場所にコピペしたのですが、適用されませんでした。これってどうしたら適用出来たりしますか？
おかげで2カラム化出来ました本当にありがとうございます
説明がわかりにくかったみたいですいません(^^;
下記の太字の数値を変更してください！
/*==== 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;
}
}
>ふじやんさん
教えていただきありがとうございます
> djug さん
CSS の以下の箇所の数値を小さくして下さい。djug さんの端末の幅はわかりませんが、760px 前後ぐらいで 微調整してみて下さい。
/*==== 2 カラム レイアウト ====*/
(中略)
@media(max-width :1024px) {
もしサイドバーが細すぎて見ずらいようなら、以下の数値で調整して下さい。
※合計で100%になるように。例: #main-content が 60% で #sub-content が 40%
/*==== 2 カラム レイアウト ====*/
#main-content {/*メインの幅*/
width: calc(68% - 20px);
}
#sub-content {/*サイドバーの幅*/
width: 32%;
}
こんばんはdjugです。エフライトテーマでタブレットも2カラム化したいんですけどこをいじればなりますか？いつもふじやんさんの記事見ています！
削除ありがとうございます(´；ω；｀)ｳｯ…
>>お互い Android や Windows での表示不具合等、気づいたことがあったら情報交換しましょう(^^)
ですね！
よろしくお願いしますー！
>暇人さん
新スレに早速のコメントありがとうございます！
フライング(？)の方の1コメは削除しておきました(笑)
お互い Android や Windows での表示不具合等、気づいたことがあったら情報交換しましょう(^^)
新スレあけましておめでとうございます。
1コメ頂きました！( ･ิω･ิ)
間違って公開してしまいました(´-﹏-`；)
私はAndroidでもhtmlの編集等行っていますのでWindowsもレイアウトする上での敵です…。
今度半透明も試してみます！