出来れば、どのような不具合が出るかが見たいので、不具合が出る状態での関連記事リストを表示させておいていただけますか。

CSSを調整したいって事ですけど、別案出しても良いかな？っと思いまして。

ブロックエディタを使って、ラベルボックスを青くすれば良くないですかね。

カスタマイズするにしてもずっと簡単だと思います。

＞わいひらさん

お返事ありがとうございます。

上記cssをテーマエディターに入力し、htmlで画像のように書き込みます。

それからプレビューしてみると、以下の画像のようになってしまいます。

問題点としては、

1. ＜li＞内に書く文字量によって「関連文字」という文字が移動してしまう。
2. f138の位置が希望の位置に表示されない。
3. 改行して文字を入力すると、「関連記事」という文字が二つでてしまう。且つ、f138が2行目に表示されない

です。

＞かうたっくさん

お返事ありがとうございます。

希望画像のようになれば特に方法などは気にしない（FTPサーバを使わないのであれば）、ので具体的に教えていただけるとありがたいです。

自分のやり方は複雑の割に汎用性に欠けているかと思いますし…

よろしくお願いします。

＞わいひらさん

お返事ありがとうございます。

上記cssをテーマエディターに入力し、htmlで画像のように書き込みます。

実際のページを見ないと分からないと思います。

希望画像のようになれば特に方法などは気にしない（FTPサーバを使わないのであれば）、ので具体的に教えていただけるとありがたいです。

ってか、上で書いたとおりなんですけど。

ブロックエディタを使って、ラベルボックスを青くすれば良くないですかね。

ブロックエディタは、もう使ってそうなのでスルーでOKです

• ブロックの検索を行い、ラベルボックスを選択
• その後、ブルーを選択

って感じなんですよね＾＾；

サイドに選択項目がなければ、右上にある『設定マーク』をクリックしてください。

https://gyazo.com/af96282983eec170c00a4eb4f6ffcef0

https://gyazo.com/4ad5aae35a647ddf76a112035ae83c5e

設定マークは以下

https://gyazo.com/f01108c7de9f1ffa5149d5fce8dc2167

****　おまけ　****

Cocoon　ラベルボックス　で検索した結果のページは以下

https://wp-cocoon.com/cocoon-blocks-0-1-2/#toc3

＞かうたっくさん

知識不足で理解ができず申し訳ありませんでした。詳しくありがとうございます。

教えていただいたものでいろいろと試してみました。取り急ぎつくってみたのですが、

• 最初からタイトルも文字の大きさや太さ、色、枠色などが決めておきいたい
• もう少しborderを細くしたい
• 「関連記事」をもう少し左寄りにしたい
• ブロックエディターを使いなれてなく、htmlに問題がでてしまう。（一度形にできたのですが消えてしまいました…）
• そして、改行せずに文字量で2行目にいったとき、フォントオウサムアイコンの下に文字がいってしまう

等の問題があったため、やはりulやliを使った「関連記事リンク」をつくりたいのですが難しいでしょうか？

取り急ぎ作成したものを以下に貼ります。

＞わいひらさん、かうたっくさん

上の二つがcssで作成して不具合のでたもの、

下のものがかうたっくさんに教えていただいたものを参考に作成したものです。

https://avilery.com/ trial/

よろしくお願いします。

.label-box-content a:before {
	font-family: "FontAwesome";
	content: "\f138";
}

.label-box-content {
	border: 1px solid #19448e;
}

CSSに追記

<
i class="fa fa-chevron-circle-right" aria-hidden="true"></i
>

これ消す

時間の合間をぬっての投稿である事をご了承くださいね。2回間違えて公開してしまったけど、文面的に問題なさそうだから放置しました。

っで。今回また来た理由ですが。

ブロックエディターを使いなれてなく、htmlに問題がでてしまう。（一度形にできたのですが消えてしまいました…）

HTMLで問題があるのはHTMLで編集しているからじゃないかって事で、ｉタグ<i…を使わない方法をとった。ってこと。

あとブルーをサイドで選択した際の色をＣＳＳで自由に変更できる。

そして、改行せずに文字量で2行目にいったとき、フォントオウサムアイコンの下に文字がいってしまう

こちらはちょっと状況は分かりません。

新規ラベルボックスを上記CSSを導入して、HTMLタグと色を変更せずラベルボックス内のaタグ：リンクの文字列前にアイコンフォントを付ける形のカスタマイズです。

ラベルボックスをそれ専用として記事を書くのであれば、比較的：いや結構簡単だと思います。

とりあえず、一度にやると訳がわからなくなるので、おかしなところから1つずつ。
関連記事はul.kanren li::afterで指定するのではなく、ul.kanren::afterもしくはul.kanren::beforeで指定すべきではないでしょうか。

liにスタイルを指定してしまうと、項目ごとに「関連記事」が表示されてしまうのは、CSSの命令通りだと思います。

向学のため、お二方の2通りの方法でやっていきます。ありがとうございます。

＞かうたっくさん

ありがとうございます。

HTMLで問題があるのはHTMLで編集しているからじゃないかって事で、ｉタグ<i…を使わない方法をとった。ってこと。

まさにその通りでした。うまくいかなければHTML編集にし無理やり押し込むというのはやり方としてはダメなんですね。ブロックエディタで特殊なことをしない限りは、「クラシック」?で編集をしていたので同じようにしてしまっていました。

また、cssでの変更方法について教えていただき、ありがとうございます。

改行せずに文字量で2行目にいったとき、フォントオウサムアイコンの下に文字がいってしまう

自分でも分かりにくいです。すみません；

添付画像の下部のものをみていただけると把握しやすいかと思います。

画像では、フォントオウサムアイコンの下に2行目「↑」の文字がきています。

対して、ただいまわいひらさんに教えていただいている上部のものは、アイコン下に2行目の文字がきていません。希望としては、文字はこないようにしたいと考えています。

＞わいひらさん

ありがとうございます。

基礎的なミスですみません。勉強不足でした。

1. ul.kanren li::afterをul.kanren::beforeに変更。
2. ul.kanren li:before {内のbottom:16pxを削除。

で、大分さまになりました。２の工程をしたら何故かは分かりませんが、改行ごとにフォントオウサムが出現するようになりました。（2つ目は枠外に出て見えていなかったとかですかね多分…）

あとは、

1. 「関連記事」と1項目（1行）目の間が不自然に広い
2. 気持ちフォントオウサムアイコンを上に調整する

で理想のものになると思います。

自分でも調べていろいろ試しつつ、アドバイスを待とうと思います。

お手数ですがよろしくお願いします。

https://avilery.com/trial/

もう削除されたようで。何ともいえないのと、どっちをどのようにしたいのか。って事がわかりません。

申し訳ございません。いろいろ触っているうちにいつの間にか非公開になってしまっていました。

それに気づくのも遅れてしまいご迷惑をおかけしました。

現在、もう一度公開し直しました。よろしくお願いします。

どちらか1つ。カスタマイズを決めてください。

そしてどっちをどう変えたいか。具体的に言ってください。なにがどうなってるのかワケわからん状態です。

ラベルボックスで行うのであれば、私が見ます。ただ上述通りですけどね。

それぞれ書き込みいただいた人の詳細を確認するため、上スクロールで確認・下スクロールで書き込み。この状態はしんどいと思います。

状況を一番知っているのは、スレ主さんのみです。

やりたい事。URLを提示。記事もスッキリさせて、文字列を少なく画像で、ココをこうしたい。と説明すれば解決が早いと思います。

ラベルボックスで行うのであれば、私が見ます。ただ上述通りですけどね。

その際絶対使わないであろう色をボーダーに指定して、ラベルボックスを記事一番上に置いてくださいね。

別のほうでやりたいのであれば、一度で解決できるようにカスタマイズの完成系を提示して待っていれば良いと思います。

>かうたっくさん

両者の方法で試そうとし、さらに同ページで自分でいろいろ試していたのが、複雑化の原因となっていたようで申し訳ありません。

説明がしやすいのと、完成形に最も近いので最初に質問したもの（わいひらさんに教えていただいているもの）を採用したいと思います。

煩雑さをさけるため他のものは全て消させていただきました。

完成形は初めに質問をした際に提示した画像のようなイメージです。

カスタマイズとしましては、あとは、上枠、下枠との距離間を保ったまま、1項目目と2項目目の距離を離すことができれば完成です。（画像参照）

line-heigthで距離を離そうとすると、「項目の距離」だけでなく「行間の距離」も広くなってしまうためうまくいきません。またmarginで離そうとすると、上枠や下枠との距離も広くなってしまうため手詰まりになっている状態です。

ページ： https://avilery.com/trial/

現在のcss：

ul.kanren {
 border: solid 2px #3156B9;
 border-radius: 5px;
 padding: 0.35em 1em 0.35em 2.3em;
 position: relative;
	font-size:1.05em;
}

ul.kanren::before {/*タイトルタブ*/
 background: #fff;
 color: #3156B9;
 font-weight: bold;
	font-size:1.05em;
 position: relative;
 left: -20px;
 bottom: 22px;
 padding: 1px 7px;
 content: "関連記事";
  letter-spacing: 0.05em;/*字間*/
}

ul.kanren li {
 line-height: 1.5em;
 padding: 0.5em 0;
 margin-top:-1.5em;
  list-style-type: none!important;
}

ul.kanren li:before {
  font-family:Fontawesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left :  0.8em;/*左端からのアイコンまでの距離*/
  color: #C0CCED;/*アイコン色*/
	 font-size: 1.15em;
}

完成形は初めに質問をした際に提示した画像のようなイメージです。

お世話になります。

とりあえずは、marginやpaddnigなどで調整し、1項目目と2項目目の間に<br>をいれるということで落ち着きました。

他のどなたかが参考にできると思うのでcssを貼っておきますね。

/* 関連記事*/
ul.kanren {
border: solid 2px #3156B9;
border-radius: 5px;
padding: 0.35em 1em 0.35em 2.3em;
position: relative;
font-size:1.05em;
}

ul.kanren::before {
/*タイトルタブ*/
background: #fff;
color: #3156B9;
font-weight: bold;
font-size:1.05em;
position: relative;
left: -20px;
bottom: 22px;
padding: 1px 7px;
content: "関連記事";
letter-spacing: 0.05em;/*字間*/
}

ul.kanren li {
line-height: 1.5em;
padding: -6em 0em 0em 0em;
margin-top:-1.3em;
margin-bottom:0.7em;
list-style-type: none!important;
}

ul.kanren li:before {
font-family:Fontawesome;
content: "\f138";/*アイコンの種類*/
position: absolute;
left : 0.8em;/*左端からのアイコンまでの距離*/
color: #C0CCED;/*アイコン色*/
font-size: 1.15em;
}

わいひらさん、かうたっくさん、ありがとうございました。

またよろしくお願いします。

コードありがとうございます！
同様のカスタマイズをされる方の参考になるかと思います。