【サルワカ風】トップページに人気記事を設置する方法
Taka

『人気記事』『新着記事』の文字の両側にボーダーラインを挿入したい

何度もコメントすみません。サルワカくん(https://saruwakakun.com)のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか?

よろしくお願いします!

コメントへの回答
サルワカくん
2017/12/20

HTMLを下記のようにして

<p class="center strong top-title"><span><i class="fa fa-paw"></i> 人気記事</span></p>

CSSを

.top-title {
    position: relative;
    margin: 0 1.5%;
}
.top-title:before {
    position: absolute;
    content: '';
    border-bottom: 2px solid black;
    top: 50%;
    left: 0;
    z-index: -1;
    width: 100%;
}
.top-title span {
    font-weight: bold;
    color: #4d4b4b;
    font-family: Quicksand,sans-serif;
    display: inline-block;
    padding: 1em;
    letter-spacing: .05em;
    font-size: 17px;
    background: #f0ebeb;
}

とすれば、できるかなと思います。
以前もお伝えしておりますが、本来であれば、「◯◯にしたい」というカスタマイズの方法を教えることまではサポートしていないので…。
(「◯◯のように◯◯したい」という1件の要望に対応するのには時間がかかりますし、対応し出すとキリがないので、ご理解頂けると幸いです)

Kaz
2018/02/09

カスタマイズ参考にさせていただきました。
SPだとキレイに表示されるのですが、PCだとボーダーラインが記事2列よりはみ出してしまいます。
(メインコンテンツの幅が記事2列より広いためだと思われます)

お手すきの際で構いませんのでご教示いただけますと幸いです!

Taka
2017/12/20

サルワカさん、お忙しいなかありがとうございました m(_ _)m それからカスタマイズの件、ご迷惑おかけ致しました。

サルワカくん
2018/02/09

カードタイプで確認してみましたが、PCでも問題なく表示されておりました。
横長の記事一覧レイアウトをご利用ですか?
可能であればURLを教えて頂ければと思います。

サルワカくん
2017/12/20

いえ、融通が利かなくて申し訳ないです。
どうしても今は細かな+αのサポートまでは手が周らないので、ご容赦頂けると幸いです。

Kaz
2018/02/10

こちら綺麗に表示することができました!
ありがとうございます。
(いつも丁寧にご対応いただき、本当にテーマを買ってよかったと思います!)

Kaz
2018/02/09

コメントありがとうございます。
カードタイプを利用しております。
こちらご確認お願い致します。
https://takekoputa.net/

サルワカくん
2018/02/09

なるほど。下記のCSSを追加して見て頂けますか?

@media only screen and (min-width: 1030px) {
  #main .top-title {
      margin: 0 6% 0 0px;
  }
}

※ 追加後はキャッシュの削除をお願いします