現在「イノセンス」スキンを適用中です。

カテゴリ・タグ表示のアイコンと文字の隙間を無くしてほしい | 要望 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

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

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


non
 non
(@non)
ゲスト
結合: 4週間前
投稿: 10
Topic starter  

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

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

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

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

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


未解決
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

前略、non さん

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

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

 


わいひら 件のいいね!
non
 non
(@non)
ゲスト
結合: 4週間前
投稿: 10
Topic starter  

@leafytree

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

その隙間でございます。


リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

non さん

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

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

 

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


リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

non さん

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

 

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

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

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

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

non さん

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


リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

non さん

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


mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 369
 

nonさん

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

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

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

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

 

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

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

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

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

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


わいひら 件のいいね!
mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 369
 

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

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

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


non
 non
(@non)
ゲスト
結合: 4週間前
投稿: 10
Topic starter  

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

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

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

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

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

 


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

non さん

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

 

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

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

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


はる
(@haruinoue)
Reputable Memberサイト
結合: 8か月前
投稿: 494
 

@yhira

恐らくですが、

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

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

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


わいひら 件のいいね!
mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 369
 

わいひらさん

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

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

This post was modified 2週間前 by わいひら

non
 non
(@non)
ゲスト
結合: 4週間前
投稿: 10
Topic starter  

@yhira

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11843
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:2年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:2年6ヶ月

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

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

サービス運営期間:17年

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

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

サービス運営期間:4年

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

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

サービス運営期間:5年

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