憩い処 ふじ庵 (BBS) 3号店

> kono さん

お役に立てたのなら良かったです。
また何かご不明な点などありましたら遠慮なくコメントして下さいね。

2023/01/03 9:33

kono さん

ふじやん様。早速の対応ありがとうございました。
F-lightにコピペ機能の追加、おかげさまで出来ました。
僕の場合はコピペ機能と色の変更の最小カスタマイズで利用させてもらってます。
改めてありがとうございました。感謝しております。

2023/01/03 9:29

> knoo さん

はじめまして。拙作テーマをお褒め頂きありがとうございます。

「pre-codeのコピペ機能」のテーマへの実装に関しては申し訳ないですが、もう今後は機能的なアップデートはしないつもりでおりますので、ユーザー側でカスタマイズして頂く形となります。

ちなみに当ブログのコードコピーは すたすた式 さんのコード(常時表示するタイプ)を使わせて貰っています。
→ 【Blogger】コードのコピー用にボタンを作成してみました【highlight.js + Copy Button】

highlight.js が導入されていなくても <pre></pre>内のコードコピーが可能です。

2023/01/03 7:51

knoo さん

はじめてまして。「F-light」すばらしいテーマです。
早速ですが本題です。
「pre-codeのコピペ機能」を内包するご予定、
または勧めのカスタマイズ方法ございますでしょうか。

自分でカスタマイズしましたが、他のサイトや更新された情報が多すぎて
正解がわかりませんでした。それなりには出来ます。
現時点でのfujilogicの方法が理想です。

人それぞれで対応が大変かと思いますが、よろしくお願いします。

2023/01/03 5:56

ありがとうございます！いつも最高過ぎます！

2022/12/30 16:34

コメント内の外部リンクを別窓で開かせる JavaScript を調べて実装してみました。
pj さんにコードをメールで送りましたのでご確認下さい。

2022/12/30 16:20

先ほどsを消して修正しました。別窓の件も承知しました。こればっかりは仕方ないですね。いつも本当にありがとうございます！m(__)m

2022/12/30 14:32

> pjさん

まず、うちからコピーしたコードを消して下さい。(うちは QooQ じゃないので構造やコードが違います)

代わりに以下のコードを適用してみて下さい。

.comment-content a {
text-decoration: underline;
}

別窓の件ですが、Blogger のコメントでは使えるコードに制限があって target="_blank" は使えないため、リンクを新しいタブで開かせる事は出来ません。

2022/12/30 13:56

また大変失礼致します。この記事のコメントでアンダーバーつけるcssをふじやんさんブログの検証真似してみると、まずワテのpjと日付と返信に余計なアンダバーがついてしまいます。さらに欲を言えば、できるだけ他人様のブログの場合外部リンク別窓で開きたいのですが、そのhtmlたぐを入力すると「使用できない」の表示が出てきます。

ちょっと色々お聞きしてこれまた難題で不可能でしたらかまいませんのでお時間ある際にまた教えていただけますと幸いです。厚かましく大変失礼いたしました。

2022/12/30 9:58

ご返答大変ありがとうございますm(__)m　メモ帳にふじやんさんのお言葉貼り付けさせていただきますm(__)m

2022/12/28 14:01

> 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 {

2022/12/28 13:43

エフェソス4章8節と詩篇68篇18節の「捕虜」とは何か
例えばこちらの記事で内部リンクを配置してるのですが。外部リンクアイコンが表示されて可能なら外したいなと思っていました。無理なら全然お気になさらないでくださいm(__)m　もしかして前に聞いて無理と言われたかもしれません。今回からきちんと無理なら無理とメモ帳に書いておきます_(._.)_

2022/12/28 13:30

ふじやんさんいつもありがとうございます。ちなみにどうでもいいことで解決しなくとも大丈夫なのですが、内部リンクにおいても外部リンクアイコンマークが出てきてしまうのですが、こちらって外せましたでしょうか。以前にお聞きした気がするのですが、忘れたのか何かコードコピペした気がするものの適用されてなくていつかお聞きできればと思っていました_(._.)_こちらも何度も何度も情報クレクレ大変申し訳ありません_(._.)_

2022/12/28 13:27

> pjさん

こんにちは

コメントにリンクを入れたいってことでしょうか？でしたらこんな感じで→

<a href="https://injah888pjbible.blogspot.com/">関西人pjの聖書勉強ブログ</a>

これをそのままコピペしてコメントを投稿するとこうなります→
関西人pjの聖書勉強ブログ

2022/12/28 12:22

大したことない解決可能で以前教えてくださったことについてご質問させてくださいm(__)m　コメントする文章についてなのですが、これらに例えば下記のようにhttps://injah888pjbible.blogspot.com/ワテのブログリンクを貼り付けたとしますが、こちらをクリックしただけで外部リンクに飛んでサイトブログがブラウザで表示されるためには、何をしたらよかったでしょうか。何かに文字列変換とかありましたよね。すみません聞きまくりで。文字列変換エンコードとか検索してもどちらがその説明なのか見当たらなくて以前に、htmlタグをそのまま入力するのやめてくれとご注意いただいたので、ふじやんさんにお聞きしてしまいました。大変何度も失礼いたしました_(._.)_

2022/12/28 9:43

> pjさん

了解😑

2022/12/26 20:16

こんにちは、また諸事情でリンク変えましたｗ
https://injah888pjbible.blogspot.com/

2022/12/26 20:12

> 暇人さん

いや、Bloggerに限らずどこのブログサービスでも画像が入れられるのは普通かと…とりあえずお役に立てて良かったです(笑)

あ、カスタマイズ済みテーマと入れ替えたのではなく、地道にカスタマイズされてたんですね。もしもの時の為にバックアップを取っておくことはほんと大事ですよ～
困ったことがあったら可能な範囲でサポートしますのでお気軽に相談して下さいね。

暇人さんも充実した冬休みをお過ごし下さい！

2022/12/26 19:30

> ふじやんさん

画像ファイルをコピペするとBase64になってしまっていたのでphotoを使っていたのですがよくよく考えたらbloggerって直接写真入れられますね(^.^;
そのことを完全に忘れていました…

一度貼り付けるところを間違えてどうなることかヒヤヒヤしましたがなんとかカード化に成功してホッとしましたε-(´∀｀*)
ひまろじっくのときから色々助けて頂いて心から感謝しています！
これからもいろいろなことで相談させていただくかも知れませんがそのときはよろしくお願いします！

ブログアドレスはhimalogicraft.blogspot.comになりました。
今度ブログのロゴ画像を作成しないといけませんね(*_*;
明後日から長期休み中(9日間)に作れたらいいなと思っています。

2022/12/26 19:21

> 暇人さん

普通に Blogger にアップした方が手っ取り早いですし、パラメータを弄れば WebP 化や圧縮 jpeg 化も出来ますから、別に Base64 にするメリットはないような？

早速記事を御覧頂いたようでありがとうございます。いやいや、相変わらず拙い記事でお恥ずかしいですが…お役に立てれば幸いです！

「ひまろじっくらふと」(ちょっと言いづらいかもw) 覗いてみたら早速カードバージョンにされてましたね。特に問題ないようで安心しました(^^)

2022/12/25 22:41

追記です。

コロコロURL変えているとGoogleに嫌われそうですがまた名前を変えて「ひまろじっくらふと」にしたいと思います…
ブログアドレスはまだ変更していませんが現在のアドレスが使えない場合「himalogicraft.blogspot.com」になっていると思います。

2022/12/25 21:46

> ふじやんさん

メリークリスマス！

reCAPTCHAのことすっかり忘れていました…。
ご指摘ありがとうございます！
以前ひまろじっくのときもご指摘頂いていつも本当にありがとうございますm(_ _)m

検証してみるとBase64画像は正しく表示されないようでした。
今はGoogle photosにアップロードして画像を表示しています。

F-lightのカードレイアウト化の記事、拝見させて頂きました。
1日でこんなにもハイクオリティなカスタマイズ記事を見てやはりふじやんさんは凄い人だなと再認識しましたΣ(・∀・；)
早速試させていただきます！
最高のクリスマスプレゼントありがとうございます！

(ひまろじっくブログですがなんとGoogleの検索結果の最上位に来ていました！)

またカスタマイズが終わったら(今日はちょっと時間がないので明日？)またこちらにてご報告させて頂きます。

2022/12/25 21:20

> 暇人さん

こんばんは & メリークリスマス！

やはりフリードメインは不安定なんですかね。それか Blogger との相性が悪いとか。
新ブログのお問合せフォームの reCAPTCHA がエラーになってますけど、ここのドメイン変更忘れてませんか？

未検証ですがおそらく F-light は base64 画像はサムネ処理出来ないと思います。

F-light のカードレイアウト化の記事を書いてみましたので参考にしてみて下さい。

2022/12/25 19:51

連続になってしまい申し訳ございません。
F-lightテーマを適用したのですがトップ画面のサムネイル画像が表示されなくなってしまいました。
Base64画像が悪いのでしょうか…

あと、表示速度を早めるためブログアドレスをhimatown.cfからhimatown.blogspot.comに戻しました。

2022/12/25 8:24

>ふじやんさん

（クリスマスですね…(゜゜)）

私もPSIで測定不能だったのですがほっとけば治ると信じて放置していました(-_-;)

表示速度が遅い原因は、
・フリードメインの使用
・大量のbase64画像
・（そもそもテーマ？）
とかですかね…
色々変更して改善していきたいと思います。
無理してBFBを使わずにF-lightを使わせて頂こうかと思います。

今後のカスタマイズ記事の投稿を楽しみにしています。

2022/12/25 7:49

> 暇人さん

お久しぶりです。前回コメント頂いたのが9月ですけど、うちのブログデザインそんなに変わってますか？ブランドカラーがグリーン系に変わったくらいでそれ以外は大して変化ないはずですけどね(^^;

新ブログのドメイン .cf ということはひょっとして無料ドメインとか？
ところでトップページは問題ないのですが、記事ページへのアクセスがえらい重くて数十秒ぐらい掛かるんですけど何故でしょう？ PSI もエラーで計測不能でした(^^;

ちなみに BFB テーマは「埋め込み」だとコメントが機能しないようなのでご注意を。「フルページ/ポップアップ」にしか対応してないようです。

ブロック表示とは BFB (Bulma) や QooQ の通常版のようなカードスタイルということでしょうか？
リストスタイルが F-light の個性といっても過言ではなく、人気の記事や注目の投稿等も全て同じデザインで統一していますので、もしそういうデザインが好みなのであれば、ユーザー側でカスタマイズして頂くか、他所のテーマを使って下さい…とホントは言いたいところなのですが…

まあ気が向いたらカスタマイズ記事を書きますので、あまり期待しないで気長にお待ち下さい(^^;

2022/12/24 23:21

お久しぶりです。
しばらくこのサイトにアクセスしていなかったので、デザインが大きく変わっていて驚きました…！
最近bloggerで新しいブログを立ててみました。
URLはhttps://himatown.cfです。
今回はF-lightにしようか迷ったのですがBFB（Bulma版）というものにしてみました。
F-lightをブロック表示にする方法等ありましたら教えていただけると泣いて喜びます。

2022/12/24 22:16

＞ふじやん。さん
大変わかりやすい説明ありがとうございます。
またわかなかったら質問させていただきます。

2022/12/24 12:19

> djug さん

ラベルをハッシュタグとして分類させたいと言うことですかね？
記事ページのカテゴリの下やハッシュタグガジェットに表示されるラベルはラベル名の頭に # が付いているものです。
記事編集でラベルを付ける時にラベル名の頭に # を付けて下さい。

例えば以下の画像のような場合は、「カスタマイズ」はカテゴリに分類されて「#F-light」がハッシュタグに分類されます。
説明用画像1

あと補足ですが、ラベルガジェットを設置する場合はレイアウト設定で「リスト」の方にして下さい。
説明用画像2

まだご不明な点がある場合はまたコメントしてくださいね。

2022/12/20 21:00

こんばんは(^^/
ハッシュタグのことなんですが、投稿の編集画面でどこにハッシュタグの内容を書くと、ブログのカテゴリーのしたに表示されますか？
分かりにくい説明ですが、解答お願いします。

2022/12/20 20:05

しゃびちゃんさん

ありがとうございます！！早速使ってみます！

2022/11/23 12:34

> しゃびちゃんさん
拙作テーマをお使いいただきありがとうございます。

追加 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ここまで*****/

2022/11/22 19:56

しゃびちゃんさん

F-lightにて、吹き出しを使用しようと思い、https://www.yamacho-blog.com/2017/09/blogger-fukidashi-css.html このURLのコードを指定の場所にコピペしたのですが、適用されませんでした。これってどうしたら適用出来たりしますか？

2022/11/22 16:44

おかげで2カラム化出来ました本当にありがとうございます

2022/10/19 22:46

説明がわかりにくかったみたいですいません(^^;
下記の太字の数値を変更してください！

/*==== 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;
  }
}

2022/10/19 22:32

>ふじやんさん
教えていただきありがとうございます

2022/10/19 21:10