HTML/CSS のどんな質問に必ず優しく答えるスレ 32 (982ﾚｽ)
上下前次1-新
抽出解除 必死ﾁｪｯｶｰ(本家) (べ) 自ID ﾚｽ栞 あぼーん
ﾘﾛｰﾄﾞ規制です｡10分ほどで解除するので､他のﾌﾞﾗｳｻﾞへ避難してください｡
862: Name_Not_Found [] 2025/01/13(月) 06:25:01.88 ID:m/E7o/l9(1/24) AAS
>>860
ありがとうございます
こちらも試しましたが私には反映できなかったです
>>861
もちろん試行錯誤しました
cdn方式がもうサービス終了している感じがしましたのでfontawesomeにアカウントをつくりkitという今主流のやり方でも試しましたし
アイコンセットをダウンロードしてそれをlivedoorブログにアップロードして
fontawesomeに提示してあったスクリプトコードを表記したりなどをやりました
それだとアイコンを表示させる事は成功出来ても、今度は表示のさせ方がcssでの記述conent /f10d(これは引用符のunicode)ではなく
<i class="fa-solid fa-quote-left"></i>
という具合にhtmlに記載して、ただ引用符一個だけを表示させる事には成功はしています
しかしこれをどのようにしてcssのcontentの所に入れるのかが分からないのです
ですのでここのcssに詳しい方に聞いてあわよくば先程のように実際に実現していただいてやり方を教えてもらいたいという思いに至った次第なのです
863: Name_Not_Found [] 2025/01/13(月) 06:40:56.29 ID:m/E7o/l9(2/24) AAS
こんな事言うのはあれなんですが色々と試してみた結果、私の能力ではお手上げだと感じたんですよね
あと他のデザイン、例えば見出しだったりテーブルデザインだったりはcssとhtmlのコピペだけで大体は実現できたのですが
この引用符のデザインだけは表示させるのにこんなに大変な事だとは思いませんでした
>>858で提示したサイトの私がやりたかったデザインにしても
なぜか右下はfontawesomeの引用符記号の表示は成功しても、
左上だけはデフォルトの引用符記号が表示されてしまってもう意味が分からない状態になったりしていました
ちなみになぜか下書きプレビューでは記号の部分は□になっていて
下書きではなく実際に投稿をしてから確認するとちゃんとfontawesomeの記号が表示されてたりなど、意味不明な挙動になったりもしててもう頭痛がしてくる状態になってましたね
866(1): Name_Not_Found [] 2025/01/13(月) 13:13:44.99 ID:m/E7o/l9(3/24) AAS
>>865
アドバイスありがとうございます
スタイルが当たってるか当たってないかは線が引いてあるものが無効になっているという事ですね？
そして左のチェックマークを外すと意図的に無効にできてそれが反映されたものを確認できるという事ですね
なるほど
867(1): Name_Not_Found [] 2025/01/13(月) 13:53:11.84 ID:m/E7o/l9(4/24) AAS
どなたかこちらのページ中頃の
https://0forest.com/css-blockquote/
『上下のラインに引用符をつける』
https://imgur.com/WmGrn7Y
をlivedoorブログの記事中に表示させていただけませんでしょうか
一つだけ確かな事はこのサイトの通りにやってもできないという事です
>>852様、できませんでしょうか
868: Name_Not_Found [] 2025/01/13(月) 14:05:15.08 ID:m/E7o/l9(5/24) AAS
>>860
サルワカさんのこちらの通りに試してみてもやはりfontawesomeは反映されなかったですね
fontawesomeのCDN方式とやらがそもそも廃止されているっぽいのでダメなのかもしれません
となるとエンジニア様に新しくcssコードを作り直して貰うしかないのでしょうか？
作り直してくれるかどうかもわかりませんが…
869: Name_Not_Found [] 2025/01/13(月) 14:07:41.57 ID:m/E7o/l9(6/24) AAS
ちなみにこちらも試してみたのですが反映されませんでした
https://qiita.com/_haya_/items/ff07a1046f459560a853
871(1): Name_Not_Found [] 2025/01/13(月) 14:20:21.30 ID:m/E7o/l9(7/24) AAS
>>870
cssへの理解度が低いのでどこに何を足せばいいのかが皆目検討もつかないです
そもそも私が手を出していい代物じゃなかったと思って諦めようかな
872(1): Name_Not_Found [] 2025/01/13(月) 14:24:23.66 ID:m/E7o/l9(8/24) AAS
でもここに足したものが直ちに反映されるっていうのは理解を深める上でかなり勉強になりそう
これを機に色々イジってみて手探りで覚えてみます
ただfontawesomeを使わないblockquoteに関してはお陰様で実現できていますので
一応良しというところなんですが
fontawesomeの記号を使う箇所に関してもこの開発者ツールで確認できますかね？
877(3): Name_Not_Found [] 2025/01/13(月) 17:05:35.71 ID:m/E7o/l9(9/24) AAS
>>875
うおおできている！
これって知識が無いとできないですよね？
少なくともコピペするだけでは実現できなくないですか？
878(1): Name_Not_Found [] 2025/01/13(月) 17:06:40.26 ID:m/E7o/l9(10/24) AAS
しかも両方できているってどういう事だ？🤔
blockquoteのcssが２パターンあるという事にならないですかね？
879(1): Name_Not_Found [] 2025/01/13(月) 17:10:23.00 ID:m/E7o/l9(11/24) AAS
>>875
ちなみにこれって>>860でご提示いただいたサルワカに記載されている旧バージョンのリンクですよね？
という事はfontawesomeのCDNというシステムは健在だという事ですか？
880(1): Name_Not_Found [] 2025/01/13(月) 17:20:30.21 ID:m/E7o/l9(12/24) AAS
>>876
この説明すらも理解できないのですが
こういう事ですか？
https://imgbox.com/MPT4uel
881(1): Name_Not_Found [] 2025/01/13(月) 17:22:04.01 ID:m/E7o/l9(13/24) AAS
リンク間違えましたm(_ _)m
https://imgur.com/MPT4ueI
885: Name_Not_Found [] 2025/01/13(月) 18:07:10.18 ID:m/E7o/l9(14/24) AAS
>>882
その通りですね
私の中途半端以下の理解度だと１番面倒をかける状態になっているかもしれません
セレクタとか要素のカテゴリーすら把握していませんでした
見よう見まねで触りだけ分かった気になっていました
887: Name_Not_Found [] 2025/01/13(月) 18:10:39.39 ID:m/E7o/l9(15/24) AAS
>>883
なるほど、やはりライブドアブログの仕様によって優先度が妨害されるパターンだったという事なんですね
テンプレート次第ではコピペのみで反映されるものもありえるという事なんでしょうね
889: Name_Not_Found [] 2025/01/13(月) 18:18:29.98 ID:m/E7o/l9(16/24) AAS
>>884
色々と詳しくありがとうございますm(_ _)m
CDNの状況についてはリンク先を読みますがfontawesomeのアイコンを使うのにfontawesome以外のCDNからどうのこうのというのが状況理解の複雑さを表しているような気がします
そもそもCDNとはなんなのかという事すら実は分かっていませんです
あと貼っていただいた画像にようにやってみます
先頭の｜の記号はアルファベットではなくマウスポインタ的なものでした
891(1): Name_Not_Found [] 2025/01/13(月) 18:29:33.76 ID:m/E7o/l9(17/24) AAS
>>884
こちらの画像のCSSはサルワカの1シンプルのものとは数字が違ったりしていますね
892: Name_Not_Found [] 2025/01/13(月) 18:32:24.84 ID:m/E7o/l9(18/24) AAS
>>891
自己解決しました
私がfontawesomeじゃない方に付け足していました
失礼しましたm(_ _)m
893(1): Name_Not_Found [] 2025/01/13(月) 18:39:30.78 ID:m/E7o/l9(19/24) AAS
>>888
「DevToolsで確認したスタイルをコピペ」しろ
というのが私の理解度では難しいんですよね
自分で構築する事が出来ませんので何の要素を足すのか見当がつかないという感じです
完成されたページがあればそこからソースをコピペしたりもできますが
サルワカにしてもこちらhttps://0forest.com/css-blockquote/
にしても画像で置いてあるのでそれができないんですね
894: Name_Not_Found [] 2025/01/13(月) 18:45:29.40 ID:m/E7o/l9(20/24) AAS
>>884
こちらでできました！ありがとうございます！m(_ _)m
http://blog.livedoor.jp/verandabiotope/
これは絶対自分では解決できなかったと思います
blockquoteの前に
『.article-body .article-body-inner 』を付け足すという答えに到達する事は絶対出来ないと感じました
これは最初にやりたかった
https://0forest.com/css-blockquote/
この中頃の
『上下のラインに引用符をつける』
にも適用できるのか今から試してみます
895: Name_Not_Found [] 2025/01/13(月) 18:58:22.16 ID:m/E7o/l9(21/24) AAS
思い通りに出来ました！
お騒がせしてすみませんでした
私の実現したかった引用符の装飾を反映させる事に成功しました
お叱りもいただきましたが、これはまず自分では到達できない事だと強く感じましたね
前にも言いましたが引用符ではない他の見出しやテーブルなどの装飾はできていたので
これもできるものだろうと高を括っていたらとんでもない複雑なものであって私の分相応ではない事を痛感させられました
897: Name_Not_Found [] 2025/01/13(月) 19:03:36.96 ID:m/E7o/l9(22/24) AAS
デフォルトの引用符のデザインすらも上手くいかなかった段階からfontawesomeを使ったデザインまで実現できた事に感謝をしておりますm(_ _)m
cssは元々複雑だと思ってましたが私が思っているよりもさらに複雑でした
くどいようですがこれはここで聞かなければ私は答えに到達できなかったですね
ググっても理解できないまま諦めていたと思います
またデベロッパーツールからこの答えにたどり着くというケースも今の私には難しいようにも思いますね
898: Name_Not_Found [] 2025/01/13(月) 19:07:05.39 ID:m/E7o/l9(23/24) AAS
>>896
了解しました
という事は他のやり方もありえたという事ですか？
未知の領域すぎて想像がつかないですね
手引をしてくれる人がいないと素人には無理ですねこれは
とりあえず今回の場合は
・セレクタの優先順位を上げる
という点と
fontawesomeの仕様を
899(1): Name_Not_Found [] 2025/01/13(月) 19:10:16.11 ID:m/E7o/l9(24/24) AAS
途中送信してしまいました
>>896
了解しました
という事は他のやり方もありえたという事ですか？
未知の領域すぎて想像がつかないですね
手引をしてくれる人がいないと素人には無理ですねこれは
とりあえず今回の場合は
・セレクタの優先順位を上げる事に気付く
という点と
・fontawesomeの仕様を熟知している事
これが必要な事だったと思います
これはお手上げですね
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.048s