ふじろじっく
とあるブロガラーの取るに足らないブログ
コメント数がだいぶ増えてきましたので、こちらのコメント欄は閉じて新たにページを作成しました。
今後はこちらのふじ庵(2号店)をご利用くださいませ。
当サイトを快適にご覧頂くためにJavaScript を有効にしてください
52 件のコメント (新着順)
コメント数がだいぶ増えてきましたので、こちらのコメント欄は閉じて新たにページを作成しました。
今後はこちらのふじ庵(2号店)をご利用くださいませ。
お役に立てて何よりです。
ちなみに後からタイトルを編集(アイコン変更とか)できないため、一旦リンクを削除して再登録する必要があります。(HTML編集で出来なくはないですがちょっと面倒です)
ありがとうございます、こんなこと思いつきませんでした。
しかし何でもわかっておられてすごすぎます。
今回教えていただいたこともブログにまとめておきたいと思います👍
>pjさん、簡単に手順を説明します。
レイアウト編集の「ページリスト設定」で表示するページを選択するのではなく「+外部リンクを追加」でページを追加します。
説明用スクショ
例えばpjさんとこのサイトマップであれば、URL欄に
https://888bible.blogspot.com/p/sitemap.html と入れて、
ページタイトル欄にこんな感じでページ名と FontAwesome のタグを入れてリンクを保存します。
<i class="fas fa-sitemap"></i>サイトマップ
これでわかりますでしょうか？
こんばんは、また質問お許しください。
皆様結構、メニューバーにfontawesomeのアイコンを導入されてらっしゃるのですが、どうされてるのですか。自分はパンくずリストには導入できましたけど、メニューバーの固定ページのタイトルに入れてもパンくずリストに反映されたのみで、なすすべなく反映されてる方の技術に驚いてます
またよければお時間ある際に教えていただけますと幸いです。
色々検索したのですが、出てこなかったです
満足いただけたようで良かったです。
今回も難題かなと思ったら意外とシンプルな対処法で上手くいって拍子抜けしましたw
当ブログではスマホではスニペットは非表示にしてますけど、文字数を減らすという手もありますよね。タイトルの長さとかサムネのサイズとの兼ね合いもあるのでやり方はケースバイケースでしょうけど。
またお困りの時はいつでもお気軽に(ただし難易度は低めで)どうぞ(^^)丿
はい、ツイッターは何度か確認いたしましたが、難題という言葉をツイッターでお見かけしたかはわかりませんｗ
たまたまと思います。それにしても何でもおわかりなんですね。すごいです。完璧にキレイになっています。
スマホ表示にしたときに画面幅がかなり小さいときになんとなく変な感じがしたんでそんなデザインができればと思いました。それでもやはりスマホ表示のときには、スニペットとかいらない気もしますね。
でも上記のやり方を教えてくださり大変ありがとうございます。アイフォンだとふじやんさんが教えてくださったデザインはすごく整っています。いつもありがとうございますm(_ _)m
pjさん、こんばんは。
難題というキーワード…ひょっとしてTwitter見られちゃったかな(^^;
当人は楽しんでやってますのでどうぞお気遣いなく。
さて、今回のお題に関してですが、こんな感じでどうでしょうか？
数値はお好みで微調整してください。
たぶんレイアウト崩れとかはないとは思いますが、もし問題がありましたらまたお知らせください。
@media ( max-width : 768px ) {
.list-item-title{
position: absolute;
top:.5em;
left:1em;
}
.snippet-body{
margin-top: 2.5em
}
}
こんばんは。
また厚かましいですがご質問させていただければ幸いです
スマホ表記のときにぼくのブログでは左側に画像があり、右側にタイトルとスニペットがあるのですが、これをスマホのときにタイトルだけを画像サムネイルの上に回してその下に画像その右にスニペットみたいな形にするcssみたいなのってありますでしょうか
また難題かもしれませんから全然無理されないでくださいm(_ _)m
.container{position:relative} を追記したら上手くいったみたいです。
ただし、他の箇所でレイアウト崩れが出てくるかも？(^^;
ご指摘ありがとうございます。
色々やってみましたが、結局 right:340px に広げることで対処しました。これでも4Kモニターとかだと重なるのかな？(^^;
ボタンコードの位置を変えれば、position の兼ね合いで検索ボックスと一定間隔を保てるようにはなるのですが、モバイルの方の調整が面倒だったので一番簡単な方法で妥協しました(笑)
mode-switchが1920ピクセルの画面では、検索ウィンドウで重なって見えます。right: 320px;この問題になって見えるpx単位を交換する他のユニットを使用する必要があります。
トップページの記事一覧を更新日順で表示したいということでしょうか？
調べてみましたが、私にはちょっとわからないですね。お役に立てず申し訳ないです。
ちょっと考えが私なのにpost.date.lastUpdated順に投稿をソートする方法が存在するでしょうか？
HTML編集のこのストレスの溜まる挙動は仕様変更か不具合なのかはよくわかりませんが、私も困っています。
ヘルプコミュニティにも投稿されていますが、改善されるかどうかはわからないですね。
Bug on the new blogger code editor - Blogger Community
fujiさん、テーマを変更して保存したら、自動的に最上部にスクロールされます。 fujiさんは、この問題をどのように対処していますか？
たぶんフィード情報を配信するために本文を読み込む必要があるんじゃないですかね。
Bloggerのリアクションウィジェットが廃止されてしまったために変えざるを得ませんでした(^^;
ShareThisリアクションボタンの設置はこちらを参考にしました。
Bloggerの記事下に絵文字 リアクションボタンを設置する方法 | Blogger101@ブロギングライフ
設置手順はさほど難しくはないです。
ボタンの表示は韓国語にも対応してますよ。
トップページではpost.bodyを表示させていないのにも制限がかかるんですね。 ジャンプブレーキ（Jump Break）を設定したらよく表示されます。
++
新しいリアクションウィジェットができましたね。 それをどのように設置すべきか、最低限はどこに設置すべきか教えていただけますか？
1ページ当たりの表示可能サイズを超えているとかじゃないですかね？
試しに各記事の適当な位置(なるべく上の方)に追記区切りの <!--more--> を入れてみてください。
私のブログに何か問題が生じました。ラベルCalculatorをクリックすると、max-result = 6であるにもかかわらず、最初のページに記事が5つだけ表示されます。 fx-570EXラベル度以上です。
また同じミスをやってしまったようですね(笑)
修正しました。
習慣通り、最近のコメントページを入った404が表示されます。
リンクがhttps://fujilogic.blogspot.com/p/p/comments.html?m=1でpが二回入っね。
Firefox でレイアウトが少し崩れてたけど、display:flex を使ったらうまい具合に調整できたみたい。
この記事に貼ってるコード内のCSSもアップデートしておきました。
https://fujilogic.blogspot.com/2019/05/sitemap.html
いいアイデアありがとうございます。
試してみましたが、1行ならいい感じで問題ないんですけど、タイトルが折り返したときの行間が開き過ぎるのがちょっと好みではないです(^^;
自己解決してみました。padding-top の値を変更し、padding-bottom を追加しています。
.toc-entry-col1 a {
...
padding-top: 12px;
padding-bottom: 12px;
...
}
line-height トリックを使ってみました いかがでしょうか。
.toc-entry-col1 a {
...
(削除)padding-top: 2px;(削除)
...
line-height: 40px;
text-indent: -1.4em;
}
もう知っていらっしゃるか分かりませんね。
サイトマップに関してですが、番号は中央寄せにできたものの、タイトルだけは上手く出来ませんでした。私はこのレイアウトでも気になりませんけどね(^^;
コメントウィジェットの aタグによるレイアウト崩れに関しては前から認識しています。
この仕様(不具合？)と JavaScript に document.writeが 使用されていることがこのウィジェットの残念な点ですね。
https://fujilogic.blogspot.com/2019/05/recent-comment-widget.html#1
上記のコメントを作成してからこそ、aタグが入ったコメントをhttps://fujilogic.blogspot.com/p/comments.htmlで確認してみると、デザインが崩れます。
aタグ（リンク）がコメントの内容フォントサイズよりも大きく表示されます。
이전부터 조금 불편한 점이 존재합니다. 사이트 맵의 기사 제목이 중앙 배치되지 않습니다.
https://1.bp.blogspot.com/-7jNZY3fGeX0/YEITn0_PIZI/AAAAAAAAAqk/QyXVeOFquUEvaZqcT5vWizoPBXvvQy3MgCLcBGAsYHQ/s0/Screenshot%2B2021-03-05%2Bat%2B20.17.11.png
この記事のフォーマットAのコードの YYYY を yyyy に変更しました。
https://fujilogic.blogspot.com/2019/05/timestamp-format-customize.html
調べてみたら「暦週の基準年」が要因のようですね。
https://qiita.com/kzak-plusbox/items/046df8ecea2d2b4707d6
yyyyは今年をそのまま出力するのに対して、YYYYの場合は「暦週の基準年」による処理がされるようで、1/1が属する週は12月であっても翌年として扱われるため、翌年が出力されるようです。
fujiさん、このような問題を経験して見た敵ありますか？ expr = 'format(data:post.date, "YYYY.MM.dd HH:mm")'を活用して、スレッドの発行日を表示する今日文を書いてみると2021.12.30に表示ますね。悩みをして形式の中のYYYYをyyyyで変えたら解決しました。年末になるから、エラーが発生するでしょうか？
原因判明！
親要素に display:inline-block を付けたら直りました。
たぶんもう崩れていないはず…(^^;
スクリーンショットありがとうございます。
Pagespeed Insights のスクリーンショットでも確認できました。モバイルだけでなくPC
の方も崩れてますね…
https://1.bp.blogspot.com/-meejimOVm3Y/X9mjHKqhSCI/AAAAAAAAUJY/19KtRFi-GQg2nVq2V7tkClFeFZ-v1uyKwCLcBGAsYHQ/s0/PagespeedInsights_sc.jpg
とりあえず思いつくことを色々やってみたものの今の所改善方法がわからないです。
もうしばらくCSSと格闘してみます!
https://1.bp.blogspot.com/-pwcHmjxPe9I/X9lEZhMs_WI/AAAAAAAAAZc/eTWESxN2ohYvLRE8HG0QcY05cvGvTFMhACLcBGAsYHQ/s0/20201216_081817.png
モバイルChromeでラベルのデザインが崩れます。真五里霧中ですね。
表示がおかしいということであれば、スクリーンショット等が見られればいいのですが…
昨日カスタマイズした箇所でバグがあったようで色々ご指摘ありがとうございます。(モヤンルルって何？？^^;)
モバイルの「最新コメント」リンクは修正しました。
上部のナビゲーションメッセージのラベルデザインの件ですが、私はスマートフォンを持っていないためChromeのデベロッパーモードでしかモバイルでの見た目のチェックが出来ません。
ラベル型の背景のデザインが崩れて見えるということですか？
P.S.
私が唯一対応できるPCが不調なため、お返事が遅れたり、出来ないことがあるかもしれませんのでご了承ください。今日もさっきまでPCの起動に苦労していました(^^;
また、不合理なことは、モバイルページから最新のコメントページに入ろうとしたときに404が表示されます ^^;;
ラベルのモヤンルル変更したようだが、モバイルでのラベル検索をすると浮かぶ上部の「ラベルデザインの投稿を表示しています。」でラベルの形状が異常です。
なるほど、他のブログサービス用のコードでも工夫次第でBloggerにも転用できるんですねえ。私も今後、カスタマイズの参考にしたいと思います。
フォームが機能してないことに気づいてない方、他にも結構いると思います。
滅多に来ることはないとは言え、肝心な時に使えないと困りますよね。早いとこ直して欲しいもんです。
はい、Jugem用に誰かが書かれたコードを使って、あとはQooQさんのテンプレにもともと入っていた日付用の変数を入れたら、できました。
なので、QooQさん限定のカスタマイズなんですが^^
概要文は、Bloggerのもともとの変数タグを使って、文字数をjsで減らしました。
お問い合わせフォームは、確か設置したときに、自分で送ってみたらできていたはずなのに、今日やってみたらできなかったので、教えていただいて、助かりました^^
おお、自力で実装されましたか。 概要文もスクリプトで表示させてるようですが、私より遥かに高いスキルをお持ちのようですごいですね！私ももっと勉強せねば(^^;
フォームは FC2 を導入されたんですね。手軽に導入できそうでいい感じですね。
そうでしたか、ありがとうございます。確認してみます。
なお、New!は、何とか自力でつけることができました。
お騒がせいたしました^^
お問い合わせフォームですけど、Bloggerの不具合で今現在も機能しなくなっているようで、Squirrelさんとこのフォームもたぶん使えない状態なのではないかと…試しに自分宛てに送信してみると確認できると思います。
ウチではGoogleフォームで代用しています。宜しければこの記事も御覧ください。
https://fujilogic.blogspot.com/2020/01/Google-Form-customize.html
そうですか、ありがとうございます。
トップページのタイトルの横に、つけたいのですが…笑、なかなか、自分でjsを書くのは、難しそうというか無理そうなので、探しているのですが、なかなか見つからなくて^^
お手数をおかけいたしました。
拙ブログは、コメント欄は閉じておりますが、問い合わせフォームがございますので、情報がありましたら、お手数ですが、お願いいたします^^
Squirrelさん、こんばんは。
確かにBloggerのようなXML式のテンプレートは慣れないうちは戸惑うことも多いですよね。
私もココログからこちらに来た時はだいぶ勝手が違ってて、少し弄るのでもちょっと腰が引けましたから(^^;
さて、お尋ねの件ですが、 NEW! を表示させたいのはどの部分でしょうか？
サイトマップ(記事タイトル一覧表ページ)で新着記事に NEW の表示を出すのであれば
https://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html
などがありますけど、トップページの記事一覧やサイドバーの最新記事ガジェットだとするとちょっと現時点では私にも思い当たるところはないですねえ。お役に立てず申し訳ないです。
今後もし何か情報得られましたらお伝えしますね。
Bloggerをいじるのは、ほかとはぜんぜん違っていますので、難しいです。
ときに、最近調べてみたのですが、見つからなくて、困っているのですが、新着記事に「New!」という赤い文字をつけたいのですが、そういうjsを配布しているサイトさんは、どちらか、ご存知でしたら、教えていただけますでしょうか。
CSSは、ほとんど自分で書けますが、jsは、なかなか、自力では、書けないもので…。
Squirrelさん、いらっしゃいませ～
そちらのブログも拝見させていただきましたけど、ぱっと見QooQに見えないくらいに Squirrelさんも相当弄られてるようですね。
配色やデザイン、めっちゃ素敵だと思いますよ(^^)
ウチは他所様の作ったものにちょっとだけアレンジ加えただけですけど、それでも何かしらお役に立てた？のなら幸いです(^^ゞ
こんにちは。私も、qooqさんを使わせていただいています。
こちら様でも、いろいろと勉強になりました。
カスタマイズ、かなりガッツリされていて、すごいですね^^
キリエさん
まあ、ここは開設したばかりでスパムもまだ当分来ないでしょうし、そういうのが来出したら対策考えますね。
私は相変わらずPCメインのガラケーユーザーなので、スマホでの事情を教えていただけると大変助かります。
デザインやレイアウトなどの見た目は Chromeのツールで何とかなりますけど、実際の操作まではわからないですからね。
お団子喜んで頂けてよかった。今度はまた違う何か用意しときますね。
ここ、ブロガラーに限らず色んな人に利用して欲しいです。
ふじやん。さん
Googleセンセェの仕様ですから仕方ないですよね。
コメント炎上や嫌がらせ、スパムのこともあるのでコメント管理はゆるゆるでなくてもいいと思います。
PCから書き込むにはどうってことはないのですが、スマホからは面倒だし認証がどんどん複雑になっていて、笑ってしまいました。
Googleセンセェは最先端をいっているようで、えらくレトロ感覚な部分もあるんだなぁ、と改めて思いました。
さて、お団子ご馳走様でした。
お腹を冷やし過ぎるとダメージをくらうので、夏でも冷たいのと熱いのと両方飲みます。
お手数かけました。
ここがゆるゆるした場所になりますように。
キリエさん、コメントありがとうございます。
そして色々ご不便お掛けしたようで申し訳ないです。
お茶ですけど、ホットとアイス交互に飲まれるの？
実はお菓子は「各自持参で」と書こうとして忘れておりましたが、今回は特別にお団子だけご用意しましたのでごゆっくりお召し上がりくださいませ。
さて、コメント投稿の件ですが、基本的にGoogleアカ以外でコメント(しかも自分とこ以外で)するのは色々めんどくさいです。
ログイン推奨ではありますけど、それぞれ事情もあるでしょうからねえ。Googleさんにはもうちょっと緩めにして欲しいもんです。
主人(あるじ)、茶をくれ。
玄米茶の熱いのと麦茶の冷たいの。
それから水無月とお団子と煎餅と「ロボットではありません」の確認作業、ひらがなや英数字を入力するのではなくて、びっくりしたぞ！も頼む。