サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年5月18日 00:15
素敵なテーマを無料公開していただいている上に、フォーラムでの質問対応に感謝いたします。
相談内容：SILKスキンを使っています。内部リンクさせるためにブログカード横長を作成しました。
最初は無事に表示されていましたが、抜粋文が気になりCSSで消せることが分かったため、
テーマエディター>スタイルシートの最下部にcssを書き込みました。
使ったCSSは以下です。
.internal-blogcard::after{
content: '続きを読む
.internal-blogcard::after{
content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 内部リンク右下枠の文字色 */
border-radius: 2px;
}
bb'; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 内部リンク右下枠の文字色 */
border-radius: 2px;
}
しかし、うまく表示されなかったので、やっぱり抜粋ありに戻そう戻そうと思い、上記cssを消しました。しかし上記SCCを消したにも関わらず、横長表示にすると「画像とタイトル1行」で表示されてしまい、URLもファビコンも抜粋もなにも出てきません。
ちなみに「横長」以外の「デフォルト」「カラム」にすると抜粋が表示されます。
解決のために試したこと：
.internal-blogcard-snippet{
display: block;
}
上記CSSでもとに戻るのかな？と思いましが、変わりませんでした。
どこかで設定を変えてしまったのかもしれないですが、設定はもとに戻したつもりですが、変わらず。
こちらで、も検索にかけてみましたが、ヒットしなかったので、私の単純なミスかもしれませんが教えて頂けると幸いです。
こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css スキン：/wp-content/themes/cocoon-master/skins/silk/style.css WordPressバージョン：5.7.2 PHPバージョン：7.4.13 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh-CN;q=0.6,zh;q=0.5 ---------------------------------------------- テーマ名：Cocoon バージョン：2.2.9 カテゴリ数：4 タグ数：0 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：1016バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：1 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： BackWPup 3.8.0 Contact Form 7 5.4.1 Edit Author Slug 1.8.1 Imagify 1.9.14 Wordfence Security 7.5.3 WP Multibyte Patch 2.9 XML Sitemaps 4.1.1 ----------------------------------------------
2021年5月18日 00:53
MMMさん
残念ながら、この状態でお答えすることは難しいです。
実際のURLのご提示が難しいようでしたら、テスト記事・テストサイト等を作成いただき、ご提示いただくのが、最も早い解決方法かと思います。
ご提示いただいた以下は、おそらく「続きを読む »」というBOXを追加表示したものかと思われます。
.internal-blogcard::after{
貼り付けミスなのか、同じセレクタが2つあり、閉じ「'」もないのが気になりますが。
もう一方の以下は、正常な状態ではないです。
何らかのごみ？BOM？なのか、良く分かりません。
bb'; /* 内部リンク右下枠の文言 */
貼り付けミスなのでしょうか？
先のものとプロパティが同じような気がします。
いずれにせよ、ご提示いただいたCSSで、抜粋文が非表示化されていたとは思えないです。
現状どうなっているかを拝見しないと、おそらく分からないと思われます。
ちなみに、本日はこれにて失礼させていただく予定です。
わいひら reacted
トピックスターター 2021年5月18日 11:42
ｍｋ2さん
ありがとうございます。
URLはこちらですが、ブログカードを使っている記事自体はまだ、作成が完了していなかったので、
載せておりませんでした。
ご提示いただいた以下は、おそらく「続きを読む »」というBOXを追加表示したものかと思われます。
.internal-blogcard::after{貼り付けミスなのか、同じセレクタが2つあり、閉じ「'」もないのが気になりますが。
もう一方の以下は、正常な状態ではないです。
何らかのごみ？BOM？なのか、良く分かりません。bb'; /* 内部リンク右下枠の文言 */貼り付けミスなのでしょうか？
先のものとプロパティが同じような気がします。
私はCSSについての知識がないため、上記CSSは他サイトで紹介されていたものをコピペをしたものです。
今はすべて消しました
2021年5月18日 11:54
MMMさん
まだブログカードの記事がないようですね。
その状態では、こちらからの確認のしようがありません。
- ブログカードのある記事を公開していただく
- ブログカードのあるテスト記事を作成・公開していただく
（noindexで作成する）
上記の何れかの状態で、実際のものを確認させていただきたいです。
URLのご提示は、症状の出ている実際のページをお願い致します。
どこにあるのか探すような状態は、ちょっと厳しいです。
（管理者さんでないと、どこにあるのかは分からないです。）
わいひら reacted
トピックスターター 2021年5月18日 13:38
まだブログカードの記事がないようですね。
すみません！今、書き上げたので公開しました。
お手間を取らせてしまい申し訳ありません。
2021年5月18日 14:12
MMMさん
どうやらスキン「SILK」の仕様のようです。
この部分のことですよね。
抜粋文を表示させるならば、以下のようになります。
内部ブログカードは、標準であれば、ドメインや日付も表示されます。
その辺りをどうするか。。。ですね。
その辺りをどうするか。。。ですね。
結構しっかり見ないと、他の部分をどうするかは難しいかもです。
どうするのか、ご希望を伺ってから。。。ですね。
ちょっと今はあまり真剣に見る時間がないもので、すみません。
後でよろしければ。。。
もしかすると、他の方もお調べいただけるかもしれません。
わいひら reacted
トピックスターター 2021年5月18日 20:23
どうやらスキン「SILK」の仕様のようです。
そうなんですね！？最初は横長でも抜粋文が表示されていたのですが、
CSSをいじっている間に横長の抜粋文が表示されない設定にしてしまったのだと思っていましたが、
抜粋文なしが標準仕様ということなんですね。
外部リンクはURLと抜粋文と「続きを読む」を
内部リンクは抜粋文と「続きを読む」を表示させたい場合はどうしたらよろしいでしょうか？
2021年5月18日 21:07
前略、MMMさん
SILKでCocoonのデフォルトの内部ブログカードのような表示にするCSSを以前のトピックで書いたような気がします。
外部ブログカードは、応用してご自身でやってみてください。
「続きを読む」も、なんとなくご自身でできそうな感じなので、そちらもやってみてください。
上手くいったら、フォーラムに貼り付けていただくと、他の方の参考になるかもです。
※[解決済] ブログカードについて
この投稿は4年前ずつリフィトリーに変更されました
トピックスターター 2021年5月18日 23:41
リフィトリー様
ありがとうございます。過去のフォーラムもいくつか読ませていただきました！
勉強不足の私にはちょっと難しい内容で、とりあえず、
他サイトも参考にさせて頂き、読んでみるのボタンは、こちらをスタイルCSSに書きこんで、
気に入るものが表示できました。
.blogcard{
position: relative
}
.internal-blogcard:after{
position: absolute;
bottom: 10px;
right: 20px;
font-family: 'Font Awesome 5 free';
content: '読んでみる';
font-size: 90%;
font-weight: bold;
background-color: #e57373;
color: #FFF;
padding: 0.2em 2em;
border-radius: 10px
}
.blogcard{
position: relative;
padding-bottom:50px;
}
が、抜粋を表示させるのは、いろいろ試してみましたが、やはり表示できませんでした。
（CSSじゃなくてPHPなのかな…）
とにかく知識がないので、もっと勉強してからいろいろ試して
思うようなものが作れたらまたここに書き込むようにします。
せっかく、ご返信いただいたのに活かせず申し訳ありません。
2021年5月18日 23:59
MMMさん
私の書いたCSSのコードは、SILKの縦型のブログカードをCocoonのデフォルトの横長ものにするためのものです。
SILKの横長のものに使うことは想定していません。
SILKのオプションで、縦型のブログカードに戻した上で、CSSのコードを適用してみてください。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。