Shortcodes Ultimateで固定ページにショートコードを入れると、見出し2の装飾が出てしまいます。

Simplicityの特徴 フォーラム Simplicityについての質問 Shortcodes Ultimateで固定ページにショートコードを入れると、見出し2の装飾が出てしまいます。

このトピックには30件の返信が含まれ、2人の参加者がいます。4 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #52772

    ヤマザキ
  • #52782
    わいひら
    わいひら
    キーマスター

    Shortcodes Ultimateプラグインは、そういった仕様なので、H2見出しが入る事はどうしようもありません。サポート対象外のものにもあるように、プラグインの仕様はテーマ側からは、どうしようもないですし、全てのプラグインに対応することはできません。

    ただ、対策方法はあると思います。
    CSSでShortcodes Ultimateが生成するH2コードの部分だけのスタイルを打ち消すコードを書けば良いかと思います。
    具体的に書くと、以下のようなCSSセレクタを利用して、スタイルを打ち消す設定を書けば良いかと思います。

    .article h2.su-post-title{
      /*スタイルを打ち消すコード*/
    }
    
    .article h2.su-post-title::before{
      /*スタイルを打ち消すコード*/
    }
    
    .article h2.su-post-title::after{
      /*スタイルを打ち消すコード*/
    }
  • #54733

    miko

    私も同じ現象で困っています。
    cssにあまり詳しくないので、わいひらさんの仰るcssセレクタを使いたいのですが、具体的にcssを何と書けば良いのでしょうか?

    すみません、サポート外なのは分かっていますが、どなたか分かる方がいらっしゃれば教えて頂けると助かります。

  • #54736

    かうたっく

    実際の様子を見ないと、どの部分の装飾を打ち消したいかが分かりません…

    F12キーなどで要素の確認ができるようなら、装飾がおかしい部分を確認してください。

  • #54737

    かうたっく

    右クリックしEdgeなら要素の検査、FireFoxなら要素を調査、Chromeなら検証をクリック

    それから、矢印っぽい所をクリックして、確認したい場所を特定

    要素の検証でリンクをチェックする方法:画像

    HTMLを開いたら、下か右あたりにCSSが出てくるので、それでCSSを確認して初期値に戻す感じです。要素の検証などで検索したら、やり方は出てきます^^

    ちなみに下記リンクの
    『矢印(旧虫めがね)マークの使い方』
    をチェックして、内部リンク先で実際動かしてる様子を書いてるので、真似してみるとやり方は多分わかるかも知れません。
    https://bibabosi-rizumu.com/beginner-element/

    初期値に戻すのは、例えばh2 { padding: 1em; }

    この場合の初期値は、h2 { padding: 0; }
    padding 初期値 などで検索したら出てくるんですけど…難しいですかね><

  • #54743
    わいひら
    わいひら
    キーマスター

    確かに、実際のページを見てみないと何とも言えないです。
    ただ、余りにも時間や手間のかかりすぎるものだと、ヒント程度にしか答えられない可能性があるのはご了承ください。

  • #54747

    シマサキ

    内容に乗っかるようですみません。
    私も同じ状況です。

    因みに、サイト内要素の画像はこんな感じです。
    https://goo.gl/UJGw1W

    Shortcodes Ultimateというプラグインの【投稿ショートコード】でカテゴリを固定ページ内に表示ようとします。プレビュー画面は下の通りです。
    https://goo.gl/a4exbL

    しかし、実際のサイト画面はこのように投稿で使っているh2が反映されてしまいサムネイルと被り潰れてしまいます。
    https://goo.gl/vwrb44

    自分なりに調べてみたのですが、答えが見当たらず、おそらくカスタムCSSで対応するしかないと思います。
    https://goo.gl/e8wh4W

  • #54753

    かうたっく

    #54747

    https://aun.tools/web/visual/show/950dd2e24b248a469e1c376ecda61825e313ebfa
    固定ページに『h2タグが1つ』、それ以外は『プラグインの出力なら』

    /*はじめのh2タグのみのスタイルを書く*/
    .entry-content h2:first-child {
      /*ここに普段のスタイルを全部指定、はじめのh2のみ反映させる*/
    }
    /*2番目以降のスタイルを初期値に戻す*/
    .entry-content h2 {
      /*ここは2番目以降、普段のスタイルを全て初期値にもどす*/
    border: none !important;
      /*略*/
    }

    その固定ページの下にあるCustomCSSに追加。
    自分でカスタマイズしたものと、親テーマのものも初期値に戻す
    2番目以降のビフォーアフターはdisplay:none;で消しちゃう❦

    プラグインの出力より優先順位を強くCSSで指定
    CustomCSSに書いたスタイル、全て半角スペースを空けて!importantを書けば反映する『『かも』』知れません

    他のページの影響はないので安心かと思われます

  • #54756
    わいひら
    わいひら
    キーマスター

    できれば、実際のページのURLをいただいてソースコードを見たいです。

  • #54938

    シマサキ

    すみません、返信遅れました。
    私のサイトはhttp://valuable-information.netです。

    それと、お恥ずかしい話、私はCSSが全く分からないので具体的にどう書けば良いかを教えていただけると助かります。教えていただいてばかりで申し訳ありません。

  • #54939

    かうたっく

    Shortcodes Ultimateというプラグインの【投稿ショートコード】でカテゴリを固定ページ内に表示ようとします

    実際のページを色々見ましたけど、不具合が出ているページは見当たらないです。カテゴリを固定ページは大きな画像を使っているとエラーは表示してないようですが。。

    以下画像のエラーがありません^^;
    #54747h2タグが並んでいる画像

    カテゴリを固定ページは大きな画像を使うと解決する。ってことが分かったようにも思います…

    ですが、一応。。

    .article h2 {
    	position: relative;
    	padding: .5em .75em;
    	background-color: #57b196;
    	color: #fff;
    	border-radius: 6px;
    	border-left: 0
    }
    
    .article h2::after {
    	position: absolute;
    	top: 100%;
    	left: 30px;
    	content: '';
    	width: 0;
    	height: 0;
    	border: 10px solid transparent;
    	border-top: 15px solid #57b196
    }

    この部分を初期値に戻すとか、試してみても良いかもしれません。書く場所はプラグインのカスタムCSSかな???
    https://aun.tools/web/visual/show/b87a440ce40e810e3febe1cf8214d76523b713df

    .article h2 {
        position: static;
        padding: 0;
        background-color: inherit;
        color: inherit;
        border-radius: 6px;
        border-left: inherit;
    /*親テーマのCSS*/
        border-left: 1px solid #000;
        margin: inherit;
        padding: 25px 30px;
        font-size: 26px;
    }
    .article h2::after {
        display: none;
    }

    エラーが全く出てないので、なんとも言えません。想像だけなので間違ってる可能性もあります^^;

    • 本文見出しに支障が出る場合
      • #list .article h2 {#list .article h2::afterに変更
    • inheritの部分がおかしい場合、初期値に戻すか、新たにstyleを入れるか、親テーマのスタイルをコピペする感じか!?

    または、#list .article h2 {#list .article h2::afterに変更して子テーマのスタイルCSSに書く。反映しないときは、全て!important`を付ける。

    キャッシュを削除して確認。他のページに影響してないかもご確認、お願いします❦

    これでもたくさん想像したのですが、空想と実際不具合が出ているページを見るのとは、試せる・試せないで変わってきます。プラグイン側の設定も全くわかりませんが、色々試してみてください^^

  • #54947
    わいひら
    わいひら
    キーマスター

    サイトを拝見してみましたが、僕も特におかしな表示になっている部分は、見受けられませんでした。

  • #54949

    シマサキ

    かうたっくさん、わいひらさん、すみません今外出先なので、帰宅後テスト用固定ページにショートコードを入れて投稿します。

    かうたっくさんに教えて頂いたカスタムcssコードを入れてみますので再度ご連絡いたします。

  • #54952

    シマサキ

    遅くなりました。

    ヘッダーメニュー画面に「テストページ」を作りました。
    https://goo.gl/mEvK3W

    Shortcodes Ultimate(プラグイン)のプレビュー画面ではこのようになる予定です。
    https://goo.gl/SLnL4H

    しかし、実際はこのようにsimplicityで設定中のh2表記が反映され被ってしまいます。
    https://goo.gl/ydPqUK

    そこで、かうたっくさんから頂いたCSSをShortcodes Ultimate(プラグイン)のカスタムCSSに入力してみました。
    https://goo.gl/tkSgQP

    いい感じで被りは解消しましたが、Simplicityデフォルトのh2も初期化?されてしまいました。

    https://goo.gl/KREjwZ

    カテゴリの被りが解消した箇所も少しズレているようです。
    https://goo.gl/Yof4S3

    今のところこんな感じになっています。半分あきらめていたので、ここまででも十分感動しています。
    かうたっくさん、わいひらさんありがとうございます!

    • この返信は4 ヶ月前に わいひら わいひら さんが編集しました。理由: AUNは画像が30日で削除されるので画像保存
  • #54954

    かうたっく

    実際のページはautoptimizeのプラグインが圧縮して色々してるっぽいので、CSSを試すことができないです。

    .entry-content h2:first-child {
    /*ここにスタイル*/
    	position: relative;
    	padding: .5em .75em;
    	background-color: #57b196;
    	color: #fff;
    	border-radius: 6px;
    	border-left: 0
    }

    このようにはじめの見出しだけstyleを表示するコード:first-childを入れて試すと表示されるかもしれません。アフターに:first-child`は通用したかは忘れましたけど、今書いてるコードの下に追記・更新してください❦

    あと、プラグインautoptimizeを外してカスタムCSSに書いたコードを消したり・書いたりしても変わりませんか?

    プラグイン同士の競合の可能性があるか・ないか。原因の可能性の1つではない事を確認するためでもあります。Simplicity動作不良時のガイドライン

  • #54955

    かうたっく

    あと固定ページで書いている場合は、固定ページ下のカスタムCSSに普通にh2タグのコードを書くと反映されるかもしれません。

    ※カテゴリページで出力していると無理ですが。

  • #54956

    シマサキ

    オプティマイザーとキャッシュ系プラグインを停止しました。
    http://valuable-information.net/page-1531/

    かなり原型に近づいてきました!

  • #54959

    かうたっく

    近づきましたね^^
    一番初めのh2:afterに装飾を反映させたいけど、styleが言う事効かないですねぇ

    .entry-content h2::after:first-child {
    	position: absolute !important;
    	top: 100% !important;
    	left: 30px !important;
    	content: '' !important;
    	width: 0 !important;
    	height: 0 !important;
    	border: 10px solid transparent !important;
    	border-top: 15px solid #57B196 !important;
    }

    これを付けれも反映しない。
    逆にしてh2:first-child::afterに指定があっていれば優先順位が最強になる!importantをつけても効かない。

    #the-content h2:first-child::after {
    	position: absolute !important;
    	top: 100% !important;
    	left: 30px !important;
    	content: '' !important;
    	width: 0 !important;
    	height: 0 !important;
    	border: 10px solid transparent !important;
    	border-top: 15px solid #57B196 !important;
    }

    今のところどうしようもないので、現状で満足ってな具合にはなりませんよね!???
    それかどなたか解決してくださるのを待つかでしょうか❦

  • #54961
    わいひら
    わいひら
    キーマスター

    サムネイルと、タイトル部分のはこんな感じで良いのかなと思います。

    .article h2.su-post-title {
        border: medium none;
        padding: 0;
    }

    その他に、別のおかしな部分(修正したい部分)があれば、また、キャプチャーと注釈で示していただければと思います(僕自身正解の表示がわかってないので)。

  • #54962
    わいひら
    わいひら
    キーマスター

    あらら、タブを開いて書き込んでいる間に、かうたっくさんの返信がありました。
    あとは、通常見出しの吹き出し部分だけなのかな?

  • #54963
    わいひら
    わいひら
    キーマスター

    通常H2見出しの吹き出し(After)部分は、こんな感じで良いのかもしれません。

    .article .entry-content h2::after {
        display: block;
    }
  • #54971

    シマサキ

    対象外の質問に全力で答えて頂きありがとうございます( i _ i )
    かうたっくさんの言う通りafterの前後にfirst-childを試してみましたが、上手くいきませんね、、、
    現状ここまで来れたので満足はしています。

    通常h2吹き出しは捨てるしかなさそうですね。

    最後に試してみたいのは、h2、h3、h3の装飾をデフォルトに戻した状態で、Shortcodes Ultimate(プラグイン)のカスタムcssを何も書かない場合だとちゃんと機能するのか、実はまだ試していないのでやってみます。

    それから、疑問なんですが、Shortcodes Ultimateで表示されるサムネイルのタイトルは記事のタイトルなのでh1で表記されるのが普通じゃないか?という疑問もあります。それなのになぜh2装飾になるのか疑問ですね。。

  • #54972

    シマサキ

    かうたっくさん、わいひらさん、ありがとうございます( i _ i )

    あ!!!!今思ったのですが!Shortcodes Ultimate(プラグイン)のそもそものスタイルcssがh2表記になっているかもしれません!
    そこをh1表記にしたら解決するかも!!

    ちょっと見てみます(^ ^)

  • #54973
    わいひら
    わいひら
    キーマスター

    それから、疑問なんですが、Shortcodes Ultimateで表示されるサムネイルのタイトルは記事のタイトルなのでh1で表記されるのが普通じゃないか?という疑問もあります。それなのになぜh2装飾になるのか疑問ですね。。

    これは、Shortcodes Ultimateがそのように出力するコードを書いているからとしか言えないかも。
    プラグイン作者さんの考えがあるのでしょう。詳しくは、作者さんに聞いていただくしかないかもしれません。

  • #54974
    わいひら
    わいひら
    キーマスター

    またしても、投稿がかぶってしまった;

  • #54975

    かうたっく

    今思ったのですが!Shortcodes Ultimate(プラグイン)のそもそものスタイルcssがh2表記になっているかもしれません!
    そこをh1表記にしたら解決するかも!!

    そのphpファイルをもし触れるなら、項目を丸々削除するなど?可能であればh2を読み込まないよう削除とか?
    ですが仕様は全くわかりません。こちらが前提です><

    ※ファイルを触ってエラー出しても困るので、色々無理なさらずに、、、

    わいひらさんが言うよう、プラグインの事はプラグイン作成者さんに対応していただくのが良いかもですねっ。

    わいひらさんに
    体調・具合が良くなったようで!何よりですっ^^

  • #55035

    かうたっく

    #54963

    通常H2見出しの吹き出し(After)部分は、こんな感じで良いのかもしれません。

    .article .entry-content h2::after {
        display: block;
    }

    今PCで確認しました❦
    afterはdisplay: block;を入れたら表示されますねぇ!

    知らなかったし思いつきもしませんでした^^;
    自分の環境で今度困った時、試してみます^^

  • #55039
    わいひら
    わいひら
    キーマスター

    おそらく、プラグインによって.article h2::afterが非表示にされちゃうみたいですね。

    やっぱ、一時期に比べたら、夜はだいぶ涼しくなってきましたね。
    薄手のもので夜寝ると、朝寒くて目を覚ますことが多いので、気をつけないと…。

  • #55042

    シマサキ

    返信遅れました!
    .article .entry-content h2::after {
    display: block;
    }
    でちゃんと表示されました!!ありがとうございます。
    かうたっくさん、わいひらさんお世話になりました!わいひらさん体調にはお気をつけください(>_<)

  • #55044

    シマサキ

    色々と探していたら、、、
    こんな記事をみつけました(^ ^)

    このやり方で解決するようです。
    https://www.nishi2002.com/24561.html

  • #55047
    わいひら
    わいひら
    キーマスター

    なるほど、テンプレートファイルを子テーマに置いて自由にカスタマイズ出来るようになっているんですね。
    これで、スタイルをかぶらないように編集すればできそうですね。
    教えていただき、ありがとうございます。
    とりあえず、うまくいったようなので、トピックを閉じておこうと思います。

トピック「Shortcodes Ultimateで固定ページにショートコードを入れると、見出し2の装飾が出てしまいます。」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)