特典機能について

アイチャッチ画像の左上に表示されるカテゴリーラベルの位置をアイキャッチ画像が隠れないように左上に上げたい | CSSカスタマイズ相談 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
アイチャッチ画像の左上に表示されるカテ...
 
共有:
通知
すべてクリア

[解決済] アイチャッチ画像の左上に表示されるカテゴリーラベルの位置をアイキャッチ画像が隠れないように左上に上げたい


猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

アイチャッチ画像の左上に表示されるカテゴリーラベルの位置を、アイキャッチ画像が隠れないように、画像の左上に上げたいです。よろしくお願いいたします。

https://nekochanblog.com


はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 802
 

style.cssに

.cat-label {
top: -20px;
left: 0px;
}

のような感じでラベルの位置が画像の枠外になります。
(-20pxの部分はお好みの数値で)

トップページだけでなく他の部分のカテゴリーラベル(例えば投稿ページの関連記事の部分)にも影響があります。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

前略、猫ちゃん さん

はるさんのおっしゃるように、投稿ページの関連記事などに影響が出ないように、また、スマホ表示も考慮しなくてはならなので、簡単にはいかないです。

.entry-card-wrap .entry-card-thumb {
margin-top: 30px;
}

.entry-card-wrap .cat-label {
top: -30px;
left: 0;
}

@media screen and (max-width:480px) {

.entry-card-wrap .entry-card-thumb {
margin-top: 25px;
}

.entry-card-wrap .cat-label {
top: -25px;
}

}

上記のコードでも、まだ不備があるかもしれません。

 

This post was modified 11か月前 by リフィトリー

猫ちゃんわいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃん さん

スキンを別のに変更したりすると、また調整が必要かもしれません。

この辺りのデザインは、けっこうデリケートなんです。


猫ちゃんわいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃん さん

先ほどの、コードを適用したときのサンプル画像を貼っておきます。

 

私も、どちらかと言うと、Simplicity2 のように、カテゴリのラベルは、アイキャッチの中ではない方が好みです。

 

This post was modified 11か月前 2回 by リフィトリー

猫ちゃんわいひら 件のいいね!
猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

リフィトリー様

画像見本まで、素早く、有難うございます。

マッハ15のスピード級ですね。 👍 

私はようやく、外観➡(CSSの編集という項目がないから)テーマエディターかな? or 外観➡カスタマイズ➡付随のCSSエディターかな?と、まずは編集場所について、Cocoonの「サイト内検索」をしておりました。

蝸牛スピードですが、頑張って、出来上がりをご報告したいです。

                                猫


わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃん さん

CSSを記述する場所は、子テーマの style.css ファイルか、追加CSS のどちらかになります。

 

子テーマの style.css ファイルに記述する場合は、ダッシュボードの「外観」→「テーマエディター」とたどると開けます。

 

あらかじめ、そこに記述してあるものは、重要な部分もあるので、消さないようにしてください。

 

また、追加CSSを開くには、「外観」→「カスタマイズ」→「追加CSS」とたどって開きます。

 

追加CSSにコードをコピペするか記述して、内容を確定するときは、すぐ上にある「公開」ボタンをクリックします。

 

CSSを編集するときは、必ず、文字コードをUTF-8(BOMなし)でプレーンテキストを扱うことができるテキストエディターをお使いください。

 

無料で高機能なテキストエディターは、沢山ありますが、私は、とてもシンプルな「Mery」というテキストエディターをオススメします。

 

テキストエディター「Mery」

 

Mery 設定方法

 

Macの場合は、CotEditor というのがオススメです。

 

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法

 

This post was modified 11か月前 by リフィトリー

猫ちゃん 件のいいね!
猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

リフィトリー様

重ねて有難うございます。

カードにラベルがちょっとかかっている、リフィトリーさんの画像をフォーラム返信から探し出しました。

パソコンとスマホで、すべてのカードラベルをリフィトリーさんのこの見本のようにしたいです。

 
 

猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

すみません。投稿の仕方が分からず、添付を2つもつけてしまいました。

1つ取りました。              猫


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃん さん

ちょっと、他の部分にも影響していまわないか心配なところもありますが、試しにコードを書いてみました。

.entry-card-wrap.a-wrap.border-element {
position: relative;
}

.entry-card-wrap .entry-card,
.entry-card-thumb {
position: static;
}

.entry-card-meta {
bottom: 8px;
right: 2%;
}

.entry-card-wrap.a-wrap .cat-label {
top: -10px;
left: 2%;
}

@media screen and (max-width:480px) {

.ecb-entry-border .a-wrap {
margin: 0 0 4.5%;
}

}

もしかしたら、まだ、修正しなくてはならないかもしれません。

This post was modified 11か月前 by リフィトリー

わいひら猫ちゃん 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃん さん

投稿ページ下の関連記事のカテゴリーラベルは、とても小さいので、枠線の上に持ってくるより、消してしまった方がスッキリするかもしれません。

.related-entry-card .cat-label {
display: none;
}

 

This post was modified 11か月前 by リフィトリー

わいひら猫ちゃん 件のいいね!
猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

リフィトリー様

は  る  様

 有難うございます。

 全て思い通りに、今、変更できました。

 ホント、ホント、素人の私のために知識を素早く公開してくださり、有難うございます。

 リフィトリー様のCSSコードをコピーして、「外観」→「カスタマイズ」→「追加CSS」とたどって、ペーストし、「公開」しただけで、すぐに反映されました。

 2ヶ月ほど迷惑メールに鬱々としているのですが、お陰様で気が晴れました。

 みるらいとスキンのランキング数字〇表示も魅力的ですが、タイジ―WP様のスキン(スキンとは、ブログの皮膚のようなものだからそう言うのですか?こういう1つ1つの呼称がカタカナ【英語】で覚えられないので)が好きで、季節に合わせて、タイジ―WP様のスキンを取り換えて使わせていただいています。

 コノハウィング、WP、わいひら様のCocoon、タイジ―WP様のスキン、Ikumi様の「ああ、ブログ」の画像圧縮のTiny png情報、そして、リフィトリー様と はる様の ラベル位置変更ガイドおよびCSS画面への到達の仕方の明示で、あっという間に、解決いたしました。

 情報と時間を、皆様が下さったおかげです。有難うございました。

 解決ボタンはどのようにしたらいいですか?

                        猫 😊 

 

 

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

猫ちゃんさん

そう言えば、私も「解決済み」って、やった記憶がないです・・ 😥 

 


猫ちゃん 件のいいね!
猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

リフィトリー様

「関連記事」へのアドバイスもやってみます。

スマホ表示は小さいですもんね。

今になって、わいひら様のランキング〇囲みを発見しました。

至らぬ説明にも、分かりやすいご教示を有難うございました。

https://wp-cocoon.com/how-to-set-adsense/#comment-16225


リフィトリー 件のいいね!
猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

リフィトリー様

「関連記事」へのアドバイス、実行してみました。

ラベルを取ると、画像が全部見えて、わかりやすくなりました。

有料カスタマイズ並みのアドバイス、嬉しいです。

リフィトリー様のブログ「リフィトリーインフォ」によれば、野良の子猫ちゃんを絡まった金網から助けて、その時かじられて傷口から発熱し、2週間も点滴治療したリフィトリー様のやさしさを、私ももらいました!

                         猫


猫ちゃん
(@nekochannekochan)
Trusted Memberサイト
結合: 1年前
投稿: 57
猫ちゃん - Twitter猫ちゃん - Skype
Topic starter  

似たようなトピックを3つ立てて、3つとも解決しました。

トピック冒頭の「解決済み」リンクを見つけられず、

1つだけ、文末の「解決済み」ボタンを押せました。

                       猫

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6436
 

わいひらさん

エントリーカードのカテゴリー表記は、投稿日のコンテナの「entry-card-meta」にも出力されていたんですね。

 

display: none; を解除したら出てきました。

 

サムネイル画像の中じゃない方が良いと言う場合は、投稿日の付近にも表示できるように配慮されているんですね。全く気付いていませんでした。

 

これなら、CSSでちょっとアレンジすれば、すぐに使えそうです。

 

猫ちゃん さん

猫ちゃんさんのおかげで、いいことに気づきました。

 

This post was modified 11か月前 2回 by リフィトリー

わいひら猫ちゃん 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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