pagination singleの中身を逆にしたい

[はづき]

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

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

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

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

[gtgt]

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

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

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

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

[カド]

同様の変更をしたかったため、以下子テーマの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;
}

[カド]

上のやりかただと最新記事の場合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;
}
}

[R3d]

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

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

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

[佐高]

R3d様へ

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

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

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

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

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

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

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

[カド]

R3dさんへ

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

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

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

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

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

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

[佐高]

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

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

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

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

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

[鈴木]

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

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

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

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

[投稿者]

投稿