「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

縦画像の左右にボカシの画像を入れたいで...
 
共有:
通知
すべてクリア

縦画像の左右にボカシの画像を入れたいです。

16 投稿
4 ユーザー
5 Reactions
708 表示
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

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

スマホなどで撮影した画像が縦画像の場合、左右に余白が出ると思います。
テレビなどでよく見かけるやつですが、その余白に同じ縦画像のボカシが入ったものを入れたいです。

Diverというテーマにはそのような機能が付いているようなのですが、cocoonにも実装して頂けたら有難いです。

添付の画像はイメージです。


   
引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

思い付いたアイデアだけ記述しておきます。
対象は縦画像だと思います。

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%;
}

   
返信引用
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

chu-yaさん

早速のご教示ありがとうございます!
まさにやりたいことそのものです。

でも僕のブログは記事数が多いんですけど、HTMLの部分はどっかに記述して、まとめて一括にやる方法ってありますか?
はやり手作業になっちゃうんでしょうか?

その場合、HTMLはどこで記載すれば宜しいでしょうか?
アイキャッチの場合です。

ぜひ実装してみたいです。


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

@kazusun さん

投稿者:: @kazusun

アイキャッチの場合です。

単に2枚の画像を重ねているだけで、画像そのものを合成している訳ではなく。
この為、各カードのサムネイルには反映されません。

Cocoon自体に、画像そのものを加工し、1枚の画像にする機能をサポートする必要になります。


   
返信引用
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

そうなんですね。

各カードのサムネに反映はされなくても良いのですが、投稿記事の一番上に来る画像に反映出来たら有り難いんです。

最近は左右にボカシ画像が付いた重ね画像が増えてきているみたいなので、Cocoonで実装して頂けると有難いです。


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

●ご参考
前提条件:対象は縦画像

以下でアイキャッチ画像用のHTMLタグを作っており。
画像サイズ縦>横なら、先のHTMLタグをに入れ。
CSSで操作すればできます。
https://github.com/xserver-inc/cocoon/blob/631f769111418904efe9e0cd33ce5d94abf2a729/tmp/eye-catch.php#L15-L31


   
わいひら reacted
返信引用
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

毎度ありがとうございます。

投稿者:: @chu-ya

先のHTMLタグをに入れ。

もしかすると

「先のHTMLタグを○○に入れ」のように○○が抜けていますか?

ご教示頂いた記述をどこに入れたら宜しいですか?

 

 


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

投稿者:: @kazusun

「先のHTMLタグを○○に入れ」のように○○が抜けていますか?


すみません誤字です。
参考で書いたHTMLタグを、アイキャッチのソースに入れます。

本件ですが、正式にサポートするのか一旦、回答を待ちましょう。


   
返信引用
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

ありがとうございます!

そうですね。
回答があるか待ってみたいと思います。

色々とありがとうございます!


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16658
 

投稿者:: @kazusun

Diverというテーマにはそのような機能が付いているようなのですが、cocoonにも実装して頂けたら有難いです。

実装するかしないかの判断をするためにも、外側(公開ページ)からだけでも良いのでこの機能の実装状態を見たいと思います。
Diverの何という機能でしょうか?よろしければ解説ページのURLをいただければ幸いです。
いくつかのキーワードで検索してみたのですが、僕の検索方法が悪いのか見つけられなくて。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7211
 

今見たばかりで、詳しくは調べてはいません。

マニュアルの記載では、以下の部分だと思われます。
アイキャッチ画像の設定-アイキャッチ画像の背景
https://tan-taka.com/diver-demo/manual/4617#i-3

 

【追記】

実際にそれが確認できるのは、ぱっと見では以下のページかも・・・です。
(実装がされているところがなかなか見つからないです)

投稿内目次の表示方法
https://tan-taka.com/diver-demo/manual/4661


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

投稿者:: @mk2_mk2

アイキャッチ画像の設定-アイキャッチ画像の背景

アイキャチに設定した画像をfigureの背景画像として拡大表示させてボカしており。
なる程です。


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2405
 

●ご参考
背景だけフルターする方法、色々載っており。
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
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16658
 

投稿者:: @mk2_mk2

実際にそれが確認できるのは、ぱっと見では以下のページかも・・・です。
(実装がされているところがなかなか見つからないです)

投稿内目次の表示方法
https://tan-taka.com/diver-demo/manual/4661

ありがとうございます!
アイキャッチだけで良いのだとしたら機能として実装はできそうです。

投稿者:: @kazusun

各カードのサムネに反映はされなくても良いのですが、投稿記事の一番上に来る画像に反映出来たら有り難いんです。

アイキャッチのみに反映されれば良いということなんですよね?
Diverのはサムネイルには反映されていないようなので、画像編集まではしない同じような仕様でということでいいでしょうか。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7211
 

個人的には、これが反映されないような設定もあると良いなと思います。
(方法は、何でも良いので。)


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16658
 

ありがとうございます。
もちろん機能追加するとしたらデフォルトは反映されない設定で、機能を有効にすることで反映される仕様にしようとは思っています。

This post was modified 1年前 2回 by わいひら

   
返信引用
共有:

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

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

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

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

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

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

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

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