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

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

記事画面上に見慣れないマーク
 
共有:
通知
すべてクリア

[解決済] 記事画面上に見慣れないマーク

13 投稿
2 ユーザー
6 Reactions
1,986 表示
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

わいひら様

Cocoonテーマを利用させていただいております。
とてもシンプルなテーマ、そして利用勝手がすばらしくて感激しております。
私は初心者なのですが、記事ページに見たことのないマークが入ってしまっております。

このよくわからない記号?マークをどこを修正したら良いのか
ご教示いただけませんでしょうか。

よろしくお願いします。

----------------------------------------------
サイト名:キャンプしたいママ、応援します!!
サイトURL: https://campeena.com 
ホームURL: https://campeena.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.1.5
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.3.1.4
カテゴリ数:9
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.2
Advanced Custom Fields 5.7.7
Cardboard 4.7.1
Contact Form 7 5.0.4
Custom Post Type UI 1.6.0
Duplicate Post 3.2.2
Insert Estimated Reading Time 1.1.2
Jetpack by WordPress.com 6.6.1
Ktai Entry 0.9.1.2
Media from FTP 10.10
Movable Type and TypePad Importer 0.4
Regenerate Thumbnails 3.0.2
Search Regex 1.4.16
Table of Contents Plus 1601
TCD Google Maps 1.6
TinyMCE Advanced 4.8.0
TinyMCE Templates 4.8.1
WP Photo Sphere 3.8
Yoast SEO 9.0.2
----------------------------------------------

   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

.article h2:before {font-family: "font-family: FontAwesome;";content: "\f041";display: inline-block;line-height: 40px;position: absolute;padding: 0em;color: white;background: #ff6363;font-weight: normal;width: 40px;text-align: center;height: 40px;line-height: 40px;left: -1.35em;top: 50%;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);border-radius: 50%;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);}

このCSSが変だからだと思います。

この記載があるのがCSS295行目のようです。

font-family: "font-family: FontAwesome;";

上記がオカシイので見慣れないマークがついてるようです。

font-family: "FontAwesome";

これで直ると思います。

以下はコピペ用です。

.article h2:before {font-family: "FontAwesome";content: "\f041";display: inline-block;line-height: 40px;/* position: absolute; */padding: 0em;color: white;background: #ff6363;font-weight: normal;width: 40px;text-align: center;height: 40px;line-height: 40px;left: -1.35em;top: 50%;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);border-radius: 50%;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);}

CSS295行目を差し替えれば『みなれないマーク』はこれだった。とわかるかも知れません。

https://gyazo.com/7b59a555a77fb9ee6669bb24e1214683

上記画像が正体だと思います^^


   
わいひら reacted
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

かうたっくさま

 

おはようございます!
遅くなり、申し訳ありません!!

さすが、かうんたっく様♪
いつも拝見させていただいております☆
ご教示いただきました内容をもとに、修正しました。

結果:なおりました!
ただ、このマーク見栄え的にあれですよね…
このマークだけ外すこともできるんでしょうか…?


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

その項目(CSSの295行目)を全部消してしまえば良いと思いますよ❦


   
わいひら reacted
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

かうんたっく様

 

ありがとうございます。

帰宅したらチャレンジしてみます!

その外にも一点わからないことがあるので、別トピックたてますので、よろしくお願いします!


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

私がやってるカスタマイズを適当にやってみました

https://gyazo.com/4a37e834bd5db60ad9602075bbda2436

適応させる必要は一切ないですけど。

どんな感じかと思ってやってみただけでした。っと❦

.article h2 {
	position: relative;
	padding-left: 1.8em;
}
.article h2:before {
	content: "";
	background: url( https://campeena.com/wp-content/uploads/2018/10/無題16-320x180.png ) no-repeat;
	background-size: contain;
	width: 2em;
	height: 2em;
	position: absolute;
	top: 10%;
	left: 0;
}

   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

了解です。

タイミングが合わなければ、だれかが・またはわいひらさんが必ず見てくれますよ!


   
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

ありがとうございます☆


   
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

かうんたっく様♪

 

可愛いですね☆
ありがとうございます。
さっそく、コピペして、実装させていただこうと思ったところ、
タイトル文字とかぶってしまって…

この場合は、どこらへんを修正すればよろしですか?
手取り足取りすみません…


   
(@だいずパパン)
Eminent Member
結合: 6年前
投稿: 23
 

「かうたっく」さんですよ♪


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

こんにちは❦

実は、かうんたっく みたいな名前の かうたっく でした ? 

似てるのと、私のことだと分かったので。

だいずパパンさんありがとうございます❦

**********************

ともっこさんに。

はじめに、294行目からの3行を以下のように変更してください。

/* 記事ページ見出しカスタマイズ*/
.article h2 {
	position: relative;
	padding: 0.5em 0.5em 0.5em 1.8em;
}

次に320行目にあるstyle

padding: 0.5em;/*文字周りの余白*/

この1行を削除すれば、反映されますよ。※このstyleが上書きしてたので上手く反映されなかった。※上のstyleに入れこんだので次は反映されますよ

画像が大きいので、小さな画像を使った方が良いかもしれないです。

background: url(ココに画像のパス) no-repeat;

上記が画像のパスです。


   
わいひら reacted
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

かうたっくさま!

 

大変、大変申し訳ありません!!

((((;゚Д゚)))))))

 

ただいま外出中なので、帰宅後試してみたいとも思います!!

 

本当にスミマセン!!

だいずパパンさん

教えてくたざりありがとうございます☆


   
(@ともっこ)
Active Member
結合: 6年前
投稿: 19
トピックスターター  

かうたっく様♪

お世話になっております☆
できました!!

ありがとうございます♪
かうたっく様、わいひら様が神様のように思えてきました♪

ありがとうございます♪

あと、もうひとつ課題があるので、整理してからトピたてさせていただきますので、
よろしくお願いします!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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