サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023-05-29 22:27
いつもお世話になります。
スマホなどで撮影した画像が縦画像の場合、左右に余白が出ると思います。
テレビなどでよく見かけるやつですが、その余白に同じ縦画像のボカシが入ったものを入れたいです。
Diverというテーマにはそのような機能が付いているようなのですが、cocoonにも実装して頂けたら有難いです。
添付の画像はイメージです。
2023-05-29 23:24
思い付いたアイデアだけ記述しておきます。
対象は縦画像だと思います。
HTML
<div class=over> <img src=a.png> <img src=a.png> </div>
CSS
/* 背景画像フィルター */
.over img:first-child {
filter: blur(5px);
object-fit: cover;
opacity: 0.8;
transform: scale(1.1);
width: 100%;
}
/* 中央寄せ */
.over img:last-child {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
/* 表示画像比率 */
.over {
aspect-ratio: 17 / 9;
overflow: hidden;
position: relative;
width: 100%;
}
Topic starter
2023-05-30 10:04
chu-yaさん
早速のご教示ありがとうございます！
まさにやりたいことそのものです。
でも僕のブログは記事数が多いんですけど、HTMLの部分はどっかに記述して、まとめて一括にやる方法ってありますか？
はやり手作業になっちゃうんでしょうか？
その場合、HTMLはどこで記載すれば宜しいでしょうか？
アイキャッチの場合です。
ぜひ実装してみたいです。
Topic starter
2023-05-30 12:03
そうなんですね。
各カードのサムネに反映はされなくても良いのですが、投稿記事の一番上に来る画像に反映出来たら有り難いんです。
最近は左右にボカシ画像が付いた重ね画像が増えてきているみたいなので、Cocoonで実装して頂けると有難いです。
2023-05-30 14:13
●ご参考
前提条件：対象は縦画像
以下でアイキャッチ画像用のHTMLタグを作っており。
画像サイズ縦＞横なら、先のHTMLタグをに入れ。
CSSで操作すればできます。
https://github.com/xserver-inc/cocoon/blob/631f769111418904efe9e0cd33ce5d94abf2a729/tmp/eye-catch.php#L15-L31
わいひら reacted
Topic starter
2023-05-30 20:38
2023-05-30 21:12
「先のHTMLタグを○○に入れ」のように○○が抜けていますか？
すみません誤字です。
参考で書いたHTMLタグを、アイキャッチのソースに入れます。
本件ですが、正式にサポートするのか一旦、回答を待ちましょう。
Topic starter
2023-05-31 10:10
ありがとうございます！
そうですね。
回答があるか待ってみたいと思います。
色々とありがとうございます！
2023-06-02 18:25
Diverというテーマにはそのような機能が付いているようなのですが、cocoonにも実装して頂けたら有難いです。
実装するかしないかの判断をするためにも、外側（公開ページ）からだけでも良いのでこの機能の実装状態を見たいと思います。
Diverの何という機能でしょうか？よろしければ解説ページのURLをいただければ幸いです。
いくつかのキーワードで検索してみたのですが、僕の検索方法が悪いのか見つけられなくて。
2023-06-02 18:48
今見たばかりで、詳しくは調べてはいません。
マニュアルの記載では、以下の部分だと思われます。
アイキャッチ画像の設定－アイキャッチ画像の背景
https://tan-taka.com/diver-demo/manual/4617#i-3
【追記】
実際にそれが確認できるのは、ぱっと見では以下のページかも・・・です。
（実装がされているところがなかなか見つからないです）
投稿内目次の表示方法
https://tan-taka.com/diver-demo/manual/4661
わいひら reacted
2023-06-02 20:54
●ご参考
背景だけフルターする方法、色々載っており。
https://cruw.co.jp/blog/css-blur/
●方法
実際にtmpに入れ動作確認してみました。
NO IMAGEで無い時に、figureにstyle="background-image:url($eye_img);"を追加する。
https://github.com/xserver-inc/cocoon/blob/433ed63e6fa73b5a094605c15127c411403e6213/tmp/eye-catch.php#L12
以下の部分がポイントですね。いい勉強になりました。
figure.eye-catch:before {
background: inherit; /* 親要素から取得★ */
}
わいひら reacted
2023-06-02 21:30
実際にそれが確認できるのは、ぱっと見では以下のページかも・・・です。
（実装がされているところがなかなか見つからないです）投稿内目次の表示方法
https://tan-taka.com/diver-demo/manual/4661
ありがとうございます！
アイキャッチだけで良いのだとしたら機能として実装はできそうです。
各カードのサムネに反映はされなくても良いのですが、投稿記事の一番上に来る画像に反映出来たら有り難いんです。
アイキャッチのみに反映されれば良いということなんですよね？
Diverのはサムネイルには反映されていないようなので、画像編集まではしない同じような仕様でということでいいでしょうか。
2023-06-03 18:07
ありがとうございます。
もちろん機能追加するとしたらデフォルトは反映されない設定で、機能を有効にすることで反映される仕様にしようとは思っています。
This post was modified 11か月前 2回 by わいひら
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。