会員サイトをリニューアルしました! 新サイトはこちら

ブログカードの説明文について < ご要望

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

ブログカードの説明文について
 
通知
すべてクリア

ブログカードの説明文について

7 投稿
2 ユーザー
1 Likes
2,041 表示
OOMOTO
(@oomoto)
Eminent Member
Topic starter
 

いつもお世話になっております。

SWELLのブログカード内の説明文欄(.p-blogCard__excerptのところ)をSWELLの設定から

  • PCまたはスマホの場合表示・非表示の設定
  • 説明文をディスクリプションから拾う、ディスクリプションが設定されてなかったら文章から拾う

のような設定項目を追加できないでしょうか?

もしくは、関連記事ブロックで入力できるように出来ないでしょうか?

 
投稿済 : 24/05/2020 12:30 pm
bari reacted
了(開発者)
(@ryo)
Illustrious Member Admin
 

ん〜、今のところ、そういった設定をつける予定はないです!

ディスクリプションなどをどうしても書き換えたいのであれば、HTMLブロックを使って直書きしていただくといいかなと...!

 
投稿済 : 24/05/2020 12:34 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

あ、でも内部リンクであればたしかに抜粋文を優先するような仕様にする方がいいかもしれないですね...!

内部リンクのメタディスクリプションの読み取りは、色々とややこしいことがあるので、しないです!

 
投稿済 : 24/05/2020 12:35 pm
OOMOTO
(@oomoto)
Eminent Member
Topic starter
 

了さん回答ありがとうございます。

質問ですが

ディスクリプションなどをどうしても書き換えたいのであれば、HTMLブロックを使って直書きしていただくといいかなと...!

について、了さんがおっしゃられてる事がイマイチピンと来ないのですがどのようなイメージでしょうか?

いちおう私が書き換えたい部分を写真で添付しています。「」の部分を書き換えたいのですがHTMLブロックで直接書き換える事ができるのでしょうか?

This post was modified 5年前 by OOMOTO
 
投稿済 : 24/05/2020 2:38 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

デベロッパーツールで構造コピペしたやつをベースに、HTMLを直接組む感じです

 
投稿済 : 24/05/2020 3:15 pm
OOMOTO
(@oomoto)
Eminent Member
Topic starter
 

なるほど!理解しました。

Chromeのデベロッパーツールで調べてからHTMLをコピペして書き直すって感じですね!

添付した画像なら

<div class="swell-block-postLink "><a href="https://wvtravelclub.jp/after-changing-from-cocoon-to-swell/" class="p-blogCard -internal" data-type="type1"><div class="p-blogCard__inner"><span class="p-blogCard__caption">関連記事</span><div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img data-lazyloaded="1" src="https://wvtravelclub.jp/wp-content/uploads/2020/05/a804ff1ed831e6442355ba6d6895297d-600x400.png.webp" data-src="https://wvtravelclub.jp/wp-content/uploads/2020/05/a804ff1ed831e6442355ba6d6895297d-600x400.png.webp" alt="【レビュー記事】ブログをCocoonからSWELLに変えてみたら…" class="c-postThumb__img -no-lb litespeed-loaded" data-was-processed="true"><noscript><img src="https://wvtravelclub.jp/wp-content/uploads/2020/05/a804ff1ed831e6442355ba6d6895297d-600x400.png.webp" alt="【レビュー記事】ブログをCocoonからSWELLに変えてみたら…" class="c-postThumb__img -no-lb"></noscript></figure></div><div class="p-blogCard__body"><span class="p-blogCard__title">【レビュー記事】ブログをCocoonからSWELLに変えてみたら…</span><span class="p-blogCard__excerpt">まいどおおきに!おおもと(@so88qa)です♪この度ブログのテーマを有料の「SWELL」に変えました!SWELLの前は無料で使えるCocoonというテーマを2年も使っていたのですが…S…</span></div></div></a></div>

になるので、

<span class="p-blogCard__excerpt">まいどおおきに!おおもと(@so88qa)です♪この度ブログのテーマを有料の「SWELL」に変えました!SWELLの前は無料で使えるCocoonというテーマを2年も使っていたのですが…S…</span>

の部分を書き換えて貼り付けし直すってことですね

 
投稿済 : 25/05/2020 11:46 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

そんな感じです...!

ただ、lazyloadの部分は動作前の状態に書き直していただく必要がありますので、その辺はご注意ください...!

僕はHTMLで直接書く時はいつも、以下の様な形で使っています。

<figure class="wp-block-embed">
<a href="{記事のURL}" class="p-blogCard -external" data-type="type3" target="_blank" rel="noopener noreferrer">
<div class="p-blogCard__inner"><span class="p-blogCard__caption">{サイト名}</span>
<div class="p-blogCard__thumb c-postThumb">
<figure class="c-postThumb__figure">
<img src="{サムネイル画像パス}" alt="{記事のタイトル}" class="c-postThumb__img -no-lb">
</figure>
</div>
<div class="p-blogCard__body">
<span class="p-blogCard__title">
{記事のタイトル}
</span>
<span class="p-blogCard__excerpt">
{記事の抜粋文}
</span>
</div>
</div>
</a>
</figure>

data-type="type3" のtypeは、ご自身のブログの設定に合わせて書き換えてください〜^^

This post was modified 4年前 by 了(開発者)
 
投稿済 : 29/05/2020 11:36 pm
共有: