サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年8月27日 13:02
記事内に、麻雀牌やトランプのカードの画像を入れたいのですが
画像としてではなく、どちらかというと「文字」のようなものとして入れたいです。
たとえば…
AKQJT は A2345 よりも強いストレートです。
AKQJTとA2345が画像。
できれば一枚の画像ではなく、数字が入れ替えられるようにしたい。
こんなふうにしたいんです。
こういう場合、みなさんはどうやっているのでしょうか？
2020年8月27日 14:42
「インラインイメージ」という言葉を調べてみると良いかも知れません。
フォーラム上だとURLが変換されてしまうようで上手く再現できませんでしたが、「カスタムHTMLブロック」や段落ブロックの「HTMLとして編集」で
<img src="data:image/gif;base64,～～～～" />
のように書くと画像を埋め込めます。
埋め込みたい麻雀牌やトランプの画像を用意し、以下のようなツールでBase64という形式に変換します。
https://lab.syncer.jp/Tool/Base64-encode/
その文字列をsrc=""の中に入れると画像が表示されます。
例として以下の内容をコピペするとスペードのエースの画像が表示されます。
これはスペードのエースです→<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAIAAACjcKk8AAAABnRSTlMAAAAAAABupgeRAAADs0lEQVR42oWVX0jaURTH1VL75WajKW2rjWKDRS3XzGipe11E9IdVEvQQrWgGvbQerJa9FD300h+IwL1E9LLNirSBG/RSWkynJRsRkVEEwXJrUm2mqb999Ya035zdB7l6z+d87zn3nCObxWIlJSW9UKsFAgEdCrHYbFacRdNsDufU69XpdCcnJ2HToaEhtVodomlOhGT/n6dp+A8lJCRMTU01NzeH7aw2W6FMdub3c3k81mUrGAwCXl9fz83NDcMrKysSiWTV4VAolYFAgMPhxIGJssPhkMlkYdhsNsPN2tpaYWFhcnIy7nYpvLq6WlBQEIYtFsvjoqLd3d3bd+5clCVeGClgwl++fv3w/v3QyMia05mamgoGAD5hRIK8yDNhBDBvMLx5+3Z2dvbuvXs4Bsnlcufm5rxeb11d3dnZGXEUA15eXi4uLj788SP1+vVQZCUmJtrtdrwHZFUqlVKpjPJMeGlpSaFQID46oglye3t7dHQUZQCYoqi2tracnBzyEEwY2ZbL5cQ3wjs6Ourv7wcD3u/3t7e3Hx8fa7VakUhER9bfymazQi6HY5A4ABkMBD5Zrd8ODiCVIhTiXjjt6+sjMK7GhCHC5/NnZmZsNtvh4eFnu50kGZE8lEjEIhFqoaGhwefz8Xg8JgyXbrd7YGAAdYI8X7l6FWo4hQ4CKSst/fX7d3d3d0ZGBpwyE4afkF6Xy2UymXZ2du5nZ3s8HpxeS0lB/hBwVVWVWCxubW2FDBPGpre3Ny0tDU0G60dSKak2mDrs9szMTI1Gs7W1NTg4GEMZGxxDYW9vb3JyEuSz6upkitLr9Xie+vr69PR03GtsbAyWzJixWVhYGB4eLisrw4V9fr+AohB2IpebwOEkUZTRaMSdy8vLY8B4Z6TRYDCgWnFJVNX4+Ljf53vZ0QGDbZcL2a6trYVZjKciDRCt4f39/VqVCrNF/+5d2o0b0cKGWWyYVB/pRG1Pj356GpvnjY2azk78jj0MCOx0OqVS6V8VRmShf3p6+tFkoiNSqNOnJSXA4DTa7QiNWZ7RO7Mj62IPkyb/7nYjEZWVlVw+/wGZYf/CZAZEHUWbadliUT558qqrq7mlJSsrixlz/NEJg9c6XXVNDdKZl5f3X+V/JzZINIzn58+bt25tbGycx7y4uKiMDN04cNTFvNGI/G1ububn50eGvtWKoXspTMTdBwcisRjKmC1hGCWJQUNSwrpskcE6MTHR1NR0/h4VFRVCoTAYCsX9m2Ph5WGAKsDMwNc/Ct14PZ9wtvYAAAAASUVORK5CYII=" />画像の直後に文章
画像を変換したり文字数が増えるのがやや面倒ですが、画像ごとにコピペできるように用意しておけば多少楽かも知れません。
わいひら and Yamachan11 reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。