タイトルロゴの下に文章を入れたい

  • H

    タイトルロゴの下に文章を入れたいです。
    イメージとしてはhttps://coolpan.net/さんのようにしたいです。
    どうすれば出来ますでしょうか？

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : WordPress 5.8
    ご利用のサーバー名 : エックスサーバー
    PHPのバージョン :
    OS : Windows10
    ご利用のブラウザ : Chrome
    該当サイトのURL : https://kiridashi-kousatsu.com/

    0 1 件の返信

  • @haruto さん

    こんにちは！

    標準設定にはありませんので、カスタマイズをする必要があります。

    おそらく比較的簡単なのは、JINのインフォバー機能を使う方法かなと思います。

    以下のCSSのようにリンクを無効化したり、背景色をヘッダーに合わせれば出来そうです。。

    .cps-info-bar a, .cps-info-bar.animate a {
	pointer-events: none;
}

.cps-info-bar a span:after, .cps-info-bar.animate a span:after {
	display: none;
}

    各種ブラウザ・デバイスで確認したわけではありませんので、
    カスタマイズは自己責任のもとでご対応お願いいたします。

    ご参考になれば幸いです。

    0
  • H

    @Tsuno_ さん

    お世話になります。
    ご回答ありがとうございます。

    PCではCSSで対処できましたが、スマホ用の文字の大きさが変更できなかったり、記号が消えないです。
    またスマホではスライドメニューの下に来ているのを、スライドメニューの上にくるようにしたいです。

    CSSでのいい方法、もしくは他の方法がありましたら教えていただけますでしょうか？

    0 1 件の返信

  • @haruto さん

    ご連絡ありがとうございます！

    CSSだけではスライドメニューの上に移動させるのは厳しいと思います。

    添付したCSSは参考のものですので、文字の大きさや記号に関しましては
    細かい微調整が必要になりますね。。

    ================================================
    他のやり方としましては、テンプレートファイルへの記述やJavaScriptを使ったカスタマイズだったり、、、
    （こちらもカスタマイズについては自己責任のもとでご対応お願いいたします。）

    テキストの長さにもよりますが、デザイン系のツールを使ってサイトロゴの画像にテキストを入れるとかでしょうか。

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

    1
  • H

    @Tsuno_ さん

    度々すみませんが、テンプレートファイルはPC用とスマホ用でどのファイルを編集すればよろしいでしょうか？

    画像にテキストを入れる方法も検討してみます。

    0 1 件の返信

  • @haruto さん

    テンプレートファイル内でPC用とスマホ用を分岐していたり、
    設定に合わせて、分割されたファイルを読み込んでいるので、
    「このテンプレートファイル」とお伝えするのは難しいですね。。

    もし、該当する箇所をカスタマイズされるのあれば、
    今後テーマ側のアップデートが、そのテンプレートファイルに及んだ場合は
    全てご自身で修正をする必要があることもご注意いただければと思います。
    （カスタマイズも含めて、自己責任のもとでご対応お願いいたします。）
    ⠀
    ⠀
    そういった点も踏まえまして、画像での対応をおすすめいたします。

    これ以上は、テーマのサポート範囲を超えてしまいますので、
    大変恐縮ですが、お答えできるのは上記までとさせていただきます。

    ご希望に沿えず申し訳ございませんが、ご了承くださいますようお願い申し上げます。

    1
    H
     1 件の返信

  • 横から失礼します。
    @media (max-width: 767px) {
    #header {
    left: 3em; ☚
    margin-bottom: 10px;
    position: relative;　　
    }
    div#header::after {
    content: "ABCDEFGHIJK";　　☚
    color: aliceblue;　　　☚
    margin-top: 2em;　　☚
    position: relative;
    left: -12em;　　　☚
    }
    }

    @media (min-width: 835px) and (max-width: 1199px) {
    #header {
    width: 100%;
    padding: 0 20px;
    }
    #header::after {
    content: "ABCDEFGHIJK";　　☚
    color: #0c79d8;　　☚
    margin-top: 3em;　　☚
    bottom: 1em;　　☚
    position: relative;
    left: 24em;　　☚
    }
    }

    @media (min-width: 1200px) {
    #header-box {
    background-color: #f7c57b;
    }
    div#header-box::after {
    content: "ABCDEFGHIJK";　　☚
    color: aliceblue;　　　☚
    margin-top: 3em;　　☚
    position: relative;
    left: 54em;　　　☚
    }
    }

    横から失礼します。
    ☚を消して　追加CSSにいれれば　ABCDEFGHIJK としたにでますよ。
    上から　スマホ　IPAD９インチ　PC　のデザインです。
    H　さん　のサイトでデバックしたので　そんなにずれはないかとおもいます。
    お試しください。
    文章の長さによっては☚を変えないといけません。
    バックアップを忘れずに行ってから試してください。

    2
    H
     1 件の返信
  • H

    @Tsuno_
    返信遅くなりすいません。

    詳細にご説明していただきありがとうございます。
    難しいことがよくわかりました。
    画像での方法を試してみたいと思います。

    1
  • H

    @benkbook
    ありがとうございます。

    試してみたところ上手く表示できました。
    こちらを編集して調整しようと思います。

    2