ランキングと同じ横並びボタンの設置について

  • ひ

    サイドバーにランキングと同じ、
    横並びボタンをつける方法が知りたいです。

    サイドバーにランキングを作って、その下にもうひとつ紹介したいアフィリエイトを紹介したいと思っています。

    その時にウェジット→カスタムHTMLで、ショートコードを使いボタンを作ろうとしましたが、ランキングと同じボタンになりません。

    カスタムボタンは違うもので使っているので、できれば使いたくありません。

    この場合色ボタンを使うコードなどあるのでしょうか？

    宜しくお願い致します。

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : 4.9
    ご利用のサーバー名 : Xサーバー
    PHPのバージョン :
    OS : windows
    ご利用のブラウザ : Googleクローム
    該当サイトのURL : https://kabuuu.jp/

    0
  • administrators

    ひーこ様

    こんばんは！JIN運営チームのりょうたです！
    カスタムHTMLではショートコードは使えないので
    同じ ウィジェットの中の「テキスト」を使ってみてください！

    ClassicEditorの場合だと投稿と同じ形式でウィジェットにテキスト等が入力できますので
    体感的にわかりやすいかと思います！
    もちろんショートコードも使えますし、その他のコードも使えますので
    色々試してみてください！

    0
  • ひ

    りょうたさん

    返信ありがとうございます！
    テキストを使ってボタンを作るところまではできました。

    ただランキングと同じように横並びのボタンになりません。

    ≪試した事≫
    <p style="text-align: left;"></p>も使ってみましたができませんでした。
    色ボタン１、２を使ってみたけど、横並びにはなりませんでした。
    ショートコードの横並びボタンは、サイドバーで使うとはみ出してしまいました。

    https://kabuuu.jp/
    サイドバーのランキング下bookeeの部分だけ、ボタンが大きく横並びになっていません。

    サイドバーのランキングと全く同じボタンを作るには、どのようにすればいいでしょうか？

    0 1 件の返信
  • administrators

    @ひーこ さん

    こんにちは！

    ボタンの文字数を少し変えていただけるとおそらく問題なく横並びに並ぶかと思うのですが、
    それだと汎用性に欠けるのでテキストウィジェットのボタン用のHTMLとCSSの調整が必要になってきます。

    ひーこさんに場合こんな感じでおそらくできるかと思いますので
    一度試してみてください。

    <div class="clearfix"><span class="color-button01"><a href="https://kabuuu.jp/bookee/">bookee体験談</a></span><span class="color-button02"><a href="https://www.tcs-asp.net/alink?AC=C93650&amp;LC=BOOKEE1&amp;SQ=0&amp;isq=100">公式ページ</a></span>
</div>

    上記のコードをウィジェットの「テキスト」にそのままコピペで貼り付けてください。
    ただ、これだとまだ未完成ですので以下のコードをWordPressに管理画面より「外観」→「カスタマイズ」→「追加CSS」に
    そのままコピペで貼り付けてください。

    /*テキストウィジェットに横並びボタンの追加*/
	.clearfix::after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.textwidget span.color-button01, .textwidget span.color-button02{
		width: 147px;
		float: left;
	}
	.textwidget span.color-button01 a, .textwidget span.color-button02 a{
		width: 147px;
		padding: 12px 0;
	}

    「/**/」の部分はそのCSSがどこに作用しているかを確認できるコメントアウトという機能です。
    今後、追加CSSを使ってカスタマイズをする際にこのコードがどんなコードだったのかを思い出すのに
    非常に便利ですので残した状態でそのままコピペしてください。

    こちらで確認して問題なく表示されておりましたので
    問題はないかと思いますが、もし不具合等ございましたら遠慮なくご連絡ください！

    0
  • ひ

    りょうたさん、こんにちは！

    ありがとうございます。
    でも結局横並びにはなりませんでした。

    コードをテキストに貼り、cssに追加し、
    文字数も減らしてみたのですがダメでした。

    https://kabuuu.jp/
    サイドバーのランキング下bookeeの部分のボタンも横並びにする方法はありますか？

    0 1 件の返信
  • administrators

    @ひーこ さん

    お試しいただきありがとうございます！
    どうやらタブレットやPCでの表示を失念しておりました…。

    スマホでの確認だと正常に表示されているかと思います。
    先ほどのCSSを削除し以下を新しく追加していただくと問題なく表示されるかと思います！

    /*スマホ*/

.textwidget span.color-button01, .textwidget span.color-button02{
	width: 46%;
	float: left;
}
.textwidget span.color-button01 a, .textwidget span.color-button02 a{
	width: 100%;
	padding: 12px 0;
}

/*タブレット*/
@media screen and (min-width: 768px){
	.textwidget span.color-button01 a, .textwidget span.color-button02 a{
		width: 44%;
	}
}

/*タブレットPC*/

@media screen and (min-width: 1024px){
	.textwidget span.color-button01 a, .textwidget span.color-button02 a{
		width: 45%;
	}
}

/*PC*/
@media screen and (min-width: 1024px){
	.textwidget span.color-button01 a, .textwidget span.color-button02 a{
		width: 46%;
	}
}

    なんどもお手数お掛け致しますが、
    宜しくお願い致します！

    0
  • ひ

    りょーたさん
    返信ありがとうございます！

    早速やってみたんですが、
    ボタンおかしいです。。。。（T T）

    形が壊れてしまいました。。。

    https://kabuuu.jp/
    何度も申し訳ないのですが、
    再度確認してもいただけませんか？

    0 1 件の返信
  • administrators

    @ひーこ さん

    こんにちは！
    何度も何度も本当に申し訳ないです…。

    .clearfix::after{
	content: "";
	display: block;
	clear: both;
}

/*スマホ*/

.textwidget span.color-button01, .textwidget span.color-button02{
	width: 46%;
	float: left;
}
.textwidget span.color-button01 a, .textwidget span.color-button02 a{
	width: 100%;
	padding: 12px 0;
}

/*タブレット*/
@media screen and (min-width: 768px){
	.textwidget span.color-button01, .textwidget span.color-button02{
		width: 44%;
	}
}

/*タブレットPC*/

@media screen and (min-width: 1024px){
	.textwidget span.color-button01, .textwidget span.color-button02{
		width: 45%;
	}
}

/*PC*/
@media screen and (min-width: 1024px){
	.textwidget span.color-button01, .textwidget span.color-button02{
		width: 46%;
	}
}

    これでどうでしょうか？
    こちらでは問題なく表示されているので問題ないかと思うのですが・・・。

    0_1550811694355_スクリーンショット 2019-02-22 14.01.23.png

    1
  • ひ

    ランキングと同じ横並びボタンの設置についてで@ryotaが発言 :

    /テキストウィジェットに横並びボタンの追加/

    りょうたさん

    できました～！！！！！！
    何度もすみません。
    ありがとうございました！！！！

    2