pagination singleの中身を逆にしたい

  • このトピックには8件の返信、1人の参加者があり、最後に鈴木により2年、 8ヶ月前に更新されました。
8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #983 返信
      はづき
      ゲスト

      お世話になっております。

      pagination singleの中身を逆にする方法についてお尋ねしたいです。

      日付的に新しい方が左、日付的に古い方が右に来るようになっているのですが
      こちらの左右を入れ替えることは可能でしょうか?
      CSSなども拝見したのですが、修正箇所が分からず仕舞いです。

      お手数ですが、変更の必要な場所を教えてください。
      よろしくお願い致します。

    • #986 返信
      gtgt
      キーマスター

      EASELのご利用ありがとうございます。

      ご質問内容がうまく把握できていないのですが、
      「作品・投稿の一覧ページのページネーションリンクを、ページの古いものが左に、新しいものが右に来るようにしたい」
      ということでよろしいでしょうか?

      そういうことでしたら、CSSだけでなくPHPにも記述が必要になります。
      必要なコード量が多くなるカスタマイズですので、こちらでお教えすることはできません。
      ご了承ください。

      質問の意図が違っていたらすみません。
      よろしくお願いします。

    • #1061 返信
      カド
      ゲスト

      同様の変更をしたかったため、以下子テーマのstyle.cssに記述することで入れ替えました。

      お役に立てば幸いです。

       

      .pagination.single {
      flex-flow: row-reverse;
      }
      .pagination.single a[rel=prev] {
      padding: 15px 15px 15px 30px;
      margin: 0;
      }
      .pagination.single a[rel=next] {
      padding: 15px 30px 15px 15px;
      margin: 0;
      }

      .pagination.single a[rel=next]:before {
      border-right: 1px solid;
      border-bottom: 1px solid;
      -webkit-transform: rotate(
      -45deg
      );
      transform: rotate(
      -45deg
      );
      right: 1em;
      left: inherit;
      border-left: none;
      }
      .pagination.single a[rel=prev]:before {
      border-left: 1px solid;
      border-bottom: 1px solid;
      -webkit-transform: rotate(
      45deg
      );
      transform: rotate(
      45deg
      );
      left: 1em;
      right: inherit;
      border-right: none;
      }
      .pagination.single a[rel=next]:hover:before {
      right: 0.7em ;
      left: inherit;
      }
      .pagination.single a[rel=prev]:hover:before {
      left:0.7em;
      right:inherit;
      }

    • #1062 返信
      カド
      ゲスト

      上のやりかただと最新記事の場合prevが右端になってしまうので少し調整

       

      .pagination.single {
      flex-flow: row-reverse;
      }
      .pagination.single a[rel=prev] {
      padding: 15px 15px 15px 30px;
      margin-right: auto;
      margin-left: 0;
      }
      .pagination.single a[rel=next] {
      padding: 15px 30px 15px 15px;
      margin: 0;
      }

      .pagination.single a[rel=next]:before {
      border-right: 1px solid;
      border-bottom: 1px solid;
      -webkit-transform: rotate(
      -45deg
      );
      transform: rotate(
      -45deg
      );
      right: 1em;
      left: inherit;
      border-left: none;
      }
      .pagination.single a[rel=prev]:before {
      border-left: 1px solid;
      border-bottom: 1px solid;
      -webkit-transform: rotate(
      45deg
      );
      transform: rotate(
      45deg
      );
      left: 1em;
      right: inherit;
      border-right: none;
      }
      .pagination.single a[rel=next]:hover:before {
      right: 0.7em ;
      left: inherit;
      }
      .pagination.single a[rel=prev]:hover:before {
      left:0.7em;
      right:inherit;
      }
      @media only screen and (max-width: 767px){
      .pagination.single {
      display: block;
      }
      }

    • #1077 返信
      R3d
      ゲスト

      カド様へ
      初めまして、以前、以下の場所で質問させていただきました者です。

      追加CSSを設定しようとするとエラーを起こす。 | EASEL (gt-gt.org)

      もし、上記のエラーを回避する方法とかがありましたら教えて頂けたら嬉しいです。
      ロリポップだけの使用でしたら、こちらではなく向こうに質問しようと思います。

    • #1078 返信
      佐高
      ゲスト

      R3d様へ

      通りすがりで失礼いたします。
      自分もロリポップを利用していて、タイミング的に上記のカド様の書かれたページネーションの追加CSSを書き込んだ後に追加CSSのエラーが起こるようになりました。
      (余談ですが、そのエラーはこちらの場合では@media screenのCSSがあると保存ができないようになり、その部分を削除すると正常に保存ができました。)

      さらに、以前の書き込みも拝見しまして色々調べて試してみたところ、ロリポップのセキュリティのWAFが作用してしまっているようです(なぜページネーションのCSSで作用してしまうのかまでは分かりませんでした)。

      ロリポップにて利用が推奨されているプラグインSiteGuard WP Pluginにて除外設定をすると解消されましたので、同じ状況でしたら回避されるかもしれません。
      また、セキュリティ設定によっては他のサーバーでも起こりうるかもしれないので、ご参考まで。

      ———-
      1.
      ロリポップのユーザー専用ページ→セキュリティ→WAF設定→ログ参照でご自身が追加CSSを設定した時のログを参照します。
      ・URLの末尾のファイル名(なくても大丈夫なようですが、あった方が安心かと思います)
      ・検出されたシグネチャ(二段目にある英数字です。日時の下あたりにあります)
      その二つを控えておきます。

      2.
      ご自身のサイトのダッシュボード→SiteGuard→WAFチューニングサポート→新しいルールを追加で除外設定を行います。
      それぞれシグネチャとファイル名に先ほど控えておいたものを入力します。
      ———-

      シグネチャはどうやら更新内容や時期、環境によっても変化するようなので、その都度エラーが起きたタイミングのものを登録すると良いようです。
      ただ、セキュリティの低下にも繋がりかねないので、扱いは慎重に行ってくださいませ。

      分かりにくい説明で恐縮ですが、「追加CSS ロリポップ SiteGuard」などで検索すると他の方が書いているHPなども出てきますので、ご確認いただけたらと思います。

    • #1079 返信
      カド
      ゲスト

      R3dさんへ

      ご指名いただいたのでお答えします。こちらはロリポップは使っていないため、以下推察を交えた回答となります。

      ロリポップのwordpressの「カスタマイズ→追加CSS」の入力欄に、おそらくなんらかの制限がかかっています。
      ここはハッキングの入口にもなる場所なので、ハッキングしたいコードを書くときに使われがちな記号をロリポップ側が入力不可にしているのだと思われます。
      ロリポップは過去に大規模なハッキングをやらかされているので慎重になっているのでしょう。

      上記CSSに使われる”[]”や”@”がその対象記号となっている可能性が高いです。

      対処方法としては3つです。
      1.佐高さんが書かれたように一時的にWAF設定を切って書く
      2.カスタマイザーを使わずダッシュボードの「外観→スタイルシート(style.css)」に追加する
      3.FTPで直接style.cssに上書きする

      私はいつも2でやっていますが、もしかするとロリポップでは2も制限がかかっているかもしれません。
      3は確実にできると思われますが、サイト制作の知識がないと難易度としては1と近いのかもしれません……

      こちらでお役に立てれば幸いです。

    • #1080 返信
      佐高
      ゲスト

      またまたでしゃばって横から失礼しますが、カド様の推察とご回答、参考になります! 本当にありがとうございます!

      でしゃばりついでに一応ロリポップユーザーとしての結果報告と、今後フォーラムを見たロリポップユーザーの方のために、上記3つの対処法でやっていない方法を自分の環境下で試してみました。

      2.外観のテーマエディタ→スタイルシートへの記述
      こちらはWAF設定を変更しなくともエラーなく更新することができたので、一番簡単で安全だと思います。

      3.FTPで上書きする
      こちらはもちろん問題なく保存が可能でした。
      ちなみにロリポップではユーザーページ→サーバーの管理・設定→ロリポップ!FTPで、ブラウザ上からファイルのアップロード及びスタイルシートへの書き込みができるので、 ファイルの場所さえ把握しておけば2とほぼ同じ感覚で更新できると思います。

      何度も失礼いたしました。
      同じことで悩んでいる方のお役に立てれば幸いです。

    • #1092 返信
      鈴木
      ゲスト

      私が求めていたのはこれです!!
      ようやく見つけました(^-^;
      ありがとうございます!!

      しかし、子テーマのstyle.cssにコピペしてもなぜか反映されず、最初は焦りました。
      ですが、外観→カスタマイズ→追加CSSに移動してコピペしたところ、ようやく反映されました。

      これで、何とか小説が連載できそうです!!!(^^)!

      ちなみに、Xサーバーです。

8件の返信スレッドを表示中
返信先: pagination singleの中身を逆にしたいで#1062に返信
あなたの情報: