Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

テーブルブロックでの背景画像装飾につい...
 
共有:
通知
すべてクリア

[解決済] テーブルブロックでの背景画像装飾について

17 投稿
5 ユーザー
11 Likes
241 表示
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

いつもCocoonを使わせていただき、大変使いやすく感謝しております。
一点ブログでカスタマイズで実装したいものがあるのですが、中々苦戦しているのでご相談させてください。

ブログで製品比較の表などを作る際に、以下のサイトのように各セルの背景画像に◎、◯、×、△などを設定して、その上に文字を記入できるようにしたいと思っています。

【対象サイト】
https://takechin.site/child-outdoorwagon/#hikaku

CSSでのカスタマイズで実装できたらと思ったのですが、なかなかうまく行かず、、、
もし、上記サイトや添付の画像のように、各セルの背景画像の設定が可能であれば、カスタマイズ方法をご教示いただけますと幸いです。

 

お忙しいところお手数をおかけしますが、ご確認をよろしくお願い致します。


   
トピックタグ
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14165
 

サイトを見てみたところ、テーブルのセルに対してspanを追加しそのspanに対して添付画像のようなCSSを追加しているようです。
これをカスタマイズで実装するには、結構高度なカスタマイズを必要としますし、◎、◯、×、△毎に挿入するspanも変更しなくてはならず、かなり面倒くさいような気がします。
あまりに大変なカスタマイズは、恐れ入りますがサポートの対象外とさせていただいているので、このヒント以上のことは言えないかもしれません。
もしどうしてもということであれば、カスタマイズ依頼をすれば、実装可能な人はおられるかもしれませんが、それなりに作り込む必要があるので、依頼を受ける場合も大変なような気がします。
https://wp-cocoon.com/cocoon-custom/


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @hachi08

CSSでのカスタマイズで実装できたらと思ったのですが、なかなかうまく行かず

どう上手くいかないか、です。

参考のサイトのテーブルは結構面倒な事していますね。
そこまで複雑でなく、CSSのポイントは以下です。
実際に図のように作成できます。

  1. 各セル(td)毎にspanで○、×、△のclassを指定
  2. classの条件に応じ擬似要素を用い、○、×、△を背景に重ねる

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4452
 

ご提示いただいたサイトは、SWELLの機能で表示しているみたいですね。

以下のデモ動画を見ると、セルの個別背景がブロックエディタで指定できるみたいです。

【SWELL – ver. 2.6.0 アップデート情報】
(「テーブル機能を拡張しました」-「ツールバーに追加した設定項目」-「セルの個別背景」の動画)
https://swell-theme.com/update/9208/?maf=3885_3073951.53798.0..1839062540.1662218707#index_id3

ご提示いただいたサイトを参考にして調べつつ、同じように手作業で真似をすればなんとか…という気はします。


   
わいひら reacted
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

みなさま

 

いつもお世話になっております。
さっそく、ご回答やアドバイスをいただきましてありがとうございました。

こちらのカスタマイズについて、やや複雑になってしまい、有料サポートをお願いする形になること、承知いたしました。

もう少し自分で格闘してみて、やっぱりどうしてもできない&実装したいということになりましたら、有償カスタマイズにてご依頼したいと思います。

ご丁寧にご回答をいただきましてありがとうございました。
引き続き何卒よろしくお願い致します。


   
わいひら reacted
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

@hachi08 さん

こういうのはどうでしょうか?

Cocoon 設定 > テンプレートに、テキストエディターで以下のような HTML を書きます。

<div class="hachi-good fa fa-circle-thin" aria-label="おすすめ"></div>

そして、このような CSS を追加します。

td {
  position: relative;
}

:is(.fa, .fas).hachi-good {
  color: red;
  display: grid;
  font-size: 40px;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

そして、ブロックでテーブルを作成します。アイコンを表示したいセルに「テンプレート」を埋め込みます。

 
その結果です。
 
This post was modified 3か月前 4回 by Akira

   
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

@akira

こちら、確認が遅くなってしまい大変申し訳ございませんでした。
そして、まさに求めていたもののCSSを教えていただき、ありがとうございました!!

試してみたところ、「z-index:-1;」の記述をなくしたら、いい具合に表示されました。
テーブルセルに背景色を入れていたからですかね?

何はともあれ、おかげさまで、理想通りの表現をすることができました。
これから引き続き利用させていただきます。

この度は、大変ご丁寧にご回答くださりありがとうございました。
今後ともよろしくお願い致します。


   
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

度々申し訳ございません。

 

ちなみに、こちらなのですが、「Font Awesome5」を利用することは可能でしょうか?
試してみたのですが、うまくいかず。。。

 

難しい場合は大丈夫ですので、もしわかれば教えていただけますと幸いです。
度々お手数をおかけしてしまい申し訳ございませんが、何卒よろしくお願い致します。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

 

全く問題ないです。

あらかじめ、[Cocoon設定]→[全体]→サイトアイコンフォント「Font Awesome 5」選択
赤字の部分をFontawesome.comで確認し、使うアイコンフォントに変更するだけです。

<div class="hachi-good fa fa-circle-thin" aria-label="おすすめ">

   
わいひら reacted
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

@chu-ya  様

 

ご返信をありがとうございました。
実は、教えていただいた方法については、質問前に試していたのですが、うまくいかず。。。

検証ツールを確認したところ、CSSがうまく反映されていないようです。
CSSに関しては、特に修正しなくても、「font awsome5」での実装が可能なはずでしょうか。

 

お手数をおかけしてしまい恐縮ですが、ご確認をいただけますと幸いです。
よろしくお願い致します。


   
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

@hachi08 さん

試してみたところ、「z-index:-1;」の記述をなくしたら、いい具合に表示されました。
テーブルセルに背景色を入れていたからですかね?

背景色を考慮していませんでした。ただ、z-index を削除した場合、アイコンが文字の上に表示されます。そのため、td にも z-index を指定するのがいいように思えます。

td {
  position: relative;
  z-index: 0;
}

[class].hachi-good {
  color: red;
  display: grid;
  font-size: 48px;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

※ :is() は良くなかったので属性セレクターに変更しています。尚、Cocoon 設定 > 高速化で「アイコンフォントの非同期読み込みを有効にする」が有効の場合、.hachi-good だけでは優先度が負けます。

Font Awesome 5 の例です。

<div class="hachi-good far fa-circle" aria-label="おすすめ"></div>

Font Awesome 5 のアイコン一覧

SVG タグでも可能です。

<div class="hachi-good">
  <svg role="img" aria-label="おすすめ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!-- Font Awesome Pro 5.15.4 by @fontawesome -  https://fontawesome.com  License -  https://fontawesome.com/license  (Commercial License) -->
    <path
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" />
  </svg>
</div>
This post was modified 3か月前 by Akira

   
わいひら reacted
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

@akira

 

ありがとうございます。
大変詳しく解説してくださり、とても感謝しています。

実際に試してみたのですが、一部のアイコンでは実装ができないのでしょうか?
例えば、「"fa-thin fa-circle"」などで試してみると、fontawsomeが読み込めていないのか、なぜか何も表示されない状況になってしまいます。

しかし、「"far fa-circle"」でやってみると、しっかりと表示されるようです。

 

そもそもの、私の知識不足なのかもしれませんが、fontawsomeの中の一部のフォントのみにしか使えない機能になるのでしょうか。
少し調べたのですが、分からなかったためご質問させていただきました。

 

お忙しいところお手数をおかけしてしまい恐縮ですが、ご確認を何卒よろしくお願い致します。


   
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

@hachi08 さん

同じアイコンでも Font Awesome のバージョンによって class が違ったはずです。

バージョン 4 の ○

<i class="fa fa-circle-thin"></i>

https://fontawesome.com/v4/icon/circle-thin

バージョン 5 の ○

<i class="far fa-circle"></i>

https://fontawesome.com/v5/icons/circle?s=regular&f=classic


   
わいひら reacted
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

@akira

 

いつもお世話になっております。
詳細なわかりやすいご説明をありがとうございます。

 

ご指摘の通り、どうやら、一部「ver6.2.0」のものを選んでいたようで、そのアイコンは読み込みができてなかった様子でした。
「ver5.15.4」にして探したところ、ほとんどのアイコンが反映されるようになりました。
ご丁寧にご回答くださりありがとうございます。

 

しかし、なぜか三角形のアイコンだけ読み込めず、「far fa-triangle」や「fal fa-triangle」を試しているのですが、読み込むことができていません。

 

こちらについても、ver5にて指定しているはずなのですが、何か間違っていたり、問題があったりするのでしょうか。

 

何度も何度も申し訳ございませんが、お時間のある時にご確認をいただけますと幸いです。
お手数をおかけしてしまい恐縮ですが、よろしくお願い致します。


   
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1179
 

@hachi08 さん

バージョン 5 に triangle はあるのですが、このアイコンは有料プランでしか使えないみたいです。そのため、Cocoon に同梱の Font Awesome のスタイルシートに triangle が含まれておらず使えませんでした。

アイコン一覧 の左メニューに Free があります。そこにチェックを入れると無料プランで使えるアイコンのみが表示されます。

caret-up の塗りつぶしは無料プランで使えますが、ご希望に沿わないかもしれません。

代替案として、私の頭に浮かんだのがマテリアルアイコンの SVG です。

https://fonts.google.com/icons?icon.query=triangle

SVG をダウンロードし、テンプレートに svg タグを書きます。

<div class="not-good">
  <svg role="img" aria-label="あまり良くない" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
    <path d="M4 40 24.05 8 44 40Zm5.35-3h29.3l-14.6-23.25ZM24 25.35Z" />
  </svg>
</div>

CSS は、ほんのわずかに違います。

td {
  position: relative;
  z-index: 0;
}

.not-good {
  display: grid;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

.not-good svg {
  fill: red;
  height: 60px;
  width: 60px;
}

添付画像は、その結果です。

マテリアルアイコンも Web フォントとして使えますが、サイトの表示速度の観点から SVG タグでの使用がおすすめです。SVG スプライトを作ってもいいと思います。

This post was modified 3か月前 by Akira

   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@hachi08 さん
何もFontawesomeである必要もなく。
フォントを揃えるなら、MS Pゴシックの◎○△×で十分だと思いますが。


   
わいひら reacted
hachi08
(@hachi08)
Active Member Registered
結合: 2年前
投稿: 14
Topic starter  

@akira

いつもお世話になっております。
さっそく、ご回答をくださりありがとうございました。

 

確認をしたところ、理想通りの表現ができるようになり、満足しております。
何から何まで、大変ご丁寧に教えていただきまして本当にありがとうございました。

 

動作確認をしても特に問題はなさそうでしたので、
こちらにて質問内容は解決としていただいて大丈夫そうです。

分かりやすいご説明を、本当にありがとうございました。

また、コメントを下さった

@yhira 様
@chu-ya 様
@mk2_mk2 様

この度は貴重なご意見やご回答をいただきましてありがとうございました。

 

今後とも引き続きCocoonを愛用させていただきますので、何卒よろしくお願い致します。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました