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

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

カテゴリ・タグ表示のアイコンと文字の隙...
 
共有:
通知
すべてクリア

[解決済] カテゴリ・タグ表示のアイコンと文字の隙間を無くしてほしい

17 投稿
5 ユーザー
6 Reactions
1,556 表示
 non
(@non)
Active Member
結合: 4年前
投稿: 10
トピックスターター  

お世話になっております。

カテゴリ・タグ表示すると、アイコンと文字に隙間ができています。

出力するときに文字の左に半角スペースを入れる処理がされているようです。

この隙間はCSSで入れることができるので、文字の左に半角スペースを入れる処理を無くしてほしいです。

よろしくご検討ください。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、non さん

カテゴリ・タグ表示すると、アイコンと文字に隙間ができています。

この「テゴリ・タグ表示すると」というのは以下の画像の部分で合っていますでしょうか?

 


   
わいひら reacted
 non
(@non)
Active Member
結合: 4年前
投稿: 10
トピックスターター  

@leafytree

お世話になっております。

その隙間でございます。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

non さん

出力するときに文字の左に半角スペースを入れる処理がされているようです。

この半角スペースを入れる処理がなされているよう、というのは、どうしてわかったのでしょうか?

 

もし、「カテゴリ・タグ表示すると」という部分が上の画像の部分だとすると、私のサイトでは適切な隙間になっているように思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

non さん

「カテゴリーとタグの文字とアイコンの隙間を少なくするには、どのようにしたら良いでしょうか?」

 

と、いうご質問でしたら、以下のようなコードで可能かと思います。

.entry-categories .fa-folder::before {
    margin-right: -2px;
}

.entry-tags .fa.fa-tag::before {
    margin-right: -2px;
}

 

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

non さん

テーマ作者様や、このご要望に賛同してくださる方の書き込みがあるまで、上記のコードで、一時しのぎとしていただければと思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

non さん

なお、個人的には、いまのままの方が良いと思います。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

nonさん

具体的に、どこの場所を仰っているかということはありますけど。

nonさんにとっては、そうであった方が望ましいのかも知れませんね。

しかしながら、Cocoonをご利用になっている方は、他にもいらっしゃいます。
その方々への影響を考えると、テーマ自体を変更するのではなく、個別カスタマイズの範疇ではないかと思います。

ちなみに、私はリフィトリーさんと同意見で、間隔が空いてくれている方が良いです。

 

タグの方は調べておりませんが。

カテゴリーについては、lib/utils.phpの関数を、functions.phpでオーバーライドするとできる気がします。

試してはおりませんので、保証はできませんけれど。
(ちなみに私はphpの素養はありませんので、信用はおけません。)

他の場所への影響もまったく考慮しておりませんので、ご承知おきください。

カテゴリー名の前にスペースが入っているのではなく、アイコンフォントの</span>の後ろにスペースが入っているんだと思います、処理的には。
たぶんですが。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

すみません、補足します。

functions.php
 ↓
子テーマのfunctions.php

と、読み替えてください。


   
 non
(@non)
Active Member
結合: 4年前
投稿: 10
トピックスターター  

お返事をくださいましてありがとうございます。

「出力するときに文字の左に半角スペースを入れる処理がされているよう…」というのは、わかったというより憶測にすぎません。すみません。

デベロッパーツール見たときに、すでに文字の左にスペースが付いています。なので、PHPで処理したときに半角スペースを付けているのかな?と思ったのです。

marginにマイナスをつければ良かったのですね。アイデアをありがとうございました。

.fas::before {
    margin-right: -0.4em;
}

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

non さん

もしかしたら、半角スペースを入れているのかもしれませんが、テーマ作者様がマージンよりスペース方が良いと思ったのかもしれません。

 

ただ、マージンの方が良いというご要望が多数寄せられた場合は、ご検討くださるかと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

表題については「カテゴリー群」と「タグ群」の隙間ということでよいでしょうか?
カテゴリーとカテゴリーの間、タグとタグの間の隙間はそのままで。

あと、案内にある環境情報がなかったので使用しているブラウザだけでも教えていただけると幸いです。


   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1090
 

@yhira

恐らくですが、

<span class="fas fa-tag" aria-hidden="true"></span> タグ</a>

の赤字部分のことかと思います。

「アイコンと文字の隙間」とのことなので。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

わいひらさん

私もはるさんと同じ認識です。
アイコンフォントと、カテゴリー名・タグ名の間のことだと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

その部分でしたか。
勘違いしていてようやく意味がわかりました。
確かにスペースを使うよりは、スタイリングした方がスマートなので変更しておきました。
https://github.com/yhira/cocoon/commit/385aa33681aba1a307289806555c0f9029f7e412#diff-7269029bd51db10d67833d786cf414041084e1c2cf18b3f9c759f40dbe585987L115


   
 non
(@non)
Active Member
結合: 4年前
投稿: 10
トピックスターター  

@yhira

わいひらさん、ご対応くださいましてありがとうございます。言葉足らずですみませんでした。あと、テーマ情報を付けるのを知らなくてご迷惑をおかけしました。

AFFINGERからCocoonに乗り換えました。Cocoonをカスタマイズしてみて思ったのは、cssやphpの名前空間が本当によく考えられてるという点です。Cocoonのクラス名や関数名に触れるたびに感心します。メニューも良く整理されてて直感的で使いやすいです。AFFINGERより使いやすいです。

あと、別件で要望した「吹き出しのショートコード」は自分で実装したので大丈夫です。Cocoonがより良いテーマになりますように、今後とも応援しております。

寝ログやTwitterを見て、体調を心配しておりました。お体を大事にしてください。

まだ、いくつか要望したいことがありますので、また別のトピックでお願いさせていただきます。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

ありがとうございます。
今は休養を重視させていただいています。
自分の将来もどうなるかちょっとよくわからないときに、なかなかテーマのことまで頭が回らなくて ? 
今は不具合対応を主にさせていただいています。
そう言っていただけるとありがたいです。


   
共有:

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

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

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

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

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

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

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

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