WordPress

Affinger5で表示が崩れてしまったときの対処方法

Affinger5で表示が崩れてしまったときの対処法

自分のブログを見たときに表示が崩れていた!なんてことはありませんか?

私は先日、ブログの環境を変えたあとに、パソコン・スマホともに表示が崩れていることに気づきました。

使用テーマはAFFINGER5のJETです。

今日は、AFFINGER5 JETで表示が崩れたときに私がやった対処法をご紹介します。




スポンサードリンク

AFFINGER5で表示が崩れる原因

対処法の前になぜ表示が崩れたか、ですよね。

表示の崩れがスマホだけなのかパソコン・スマホ両方なのか、それによって違ってきます。

まず、表示が崩れるというのは、ほぼプラグインが干渉していることがほとんどです。

問題はどのプラグインが干渉しているかですが、突き止めるには一度すべてのプラグインを停止し、一つずつ有効化すると判明します。

が、今回は表示が崩れたときに干渉するプラグインということで、わかっているプラグインが二つあります。

  • Jetpack
  • Rinker

この二つが干渉していると思います。もし、もっとあったら教えてください。

Jetpackが原因の場合

そして、パソコン表示は崩れないけど、スマホが崩れるという場合はJetpackの可能性が高く、もしパソコン・スマホともに崩れる場合はRinkerです。

なぜ、Jetpackでスマホ表示が崩れるかというと、Jetpackのモバイルテーマ機能のせいです。

今はAFFINGERに限らず、どのテーマでもスマホ表示に対応しています。でも、Jetpackにはスマホ表示に対応していないサイトをスマホ表示させる機能があるので、この機能が有効化されていると機能がケンカしてしまうのだと思います。

Rinkerが原因の場合

次にパソコン表示もスマホ表示も崩れるならRinker。

シンプルなコードでショッピングリンクを作ることができるので、使っている方も多いのではないでしょうか。

特に2019年1月からAmazonの仕様が変わってしまったため、カエレバから乗り換えた人も多いと思います。

Rinkerのなにが崩れを引き起こすのかはわかりませんが、Rinkerが引き起こすことは事実です。

そして、先人の知恵にすがりたくて検索したところ対処法を紹介しているサイトがあったので、今日はまとめてご紹介したいと思います。

AFFINER5で表示が崩れた場合の対処法

それではAFFINGER5 JETで表示が崩れた場合の対処方法をそれぞれご紹介します。

Jetpackが原因の場合

Affinger5で表示が崩れてしまったときの対処法

管理画面で、Jetpack→設定と進みます。

Affinger5で表示が崩れてしまったときの対処法

上のタブで執筆をクリックします。

Affinger5で表示が崩れてしまったときの対処法

下までスクロールして、モバイル用テーマをオフにします。

ちなみに私の場合、こちらはオフになっていたのでJetpackが原因ではありませんでした。

Rinkerが原因の場合

Rinkerの場合、設定ではなくCSSでのカスタマイズとなります。

これは、「すけたろう雑記帳」さんが取られていた方法です。

詳しくは、「すけたろう雑記帳」さんをご覧ください。

すけたろう雑記帳

下記CSSをコピペするだけでOKです。

/*=================================================================================
RINKER
=================================================================================*/
div.yyi-rinker-contents {
width: 98%;
height: auto;
margin: 36px auto;
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
background-color: #fafafa;
overflow: hidden;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
border: unset;
}
div.yyi-rinker-contents a {
transition: 0.8s ;
}
div.yyi-rinker-contents div.yyi-rinker-box {
padding: 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 150px;
min-width:150px;
margin: 0 14px 0 0;
text-align: center;
background: #fff;
box-sizing: border-box;
}
div.yyi-rinker-contents div.yyi-rinker-image a {
width: 100%;
}
/**** タイトル ****/
div.yyi-rinker-contents div.yyi-rinker-title a {
border-bottom: 1px solid;  /* テキスト下線 */
color:#285EFF; /* テキストリンクカラー */
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
/**** Credit・価格欄 ****/
div.yyi-rinker-contents div.yyi-rinker-detail {
font-size: 10px;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
color: #999;
}
/****ボタン****/
div.yyi-rinker-contents ul.yyi-rinker-links li {
border-radius: 0px;
min-width:128px;
text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding:0;
height: auto;
border-radius: 8px;
font-size: 0.8em;
box-sizing: border-box;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink,
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1,
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
background: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
background: #ff9901;
border: 2px solid #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
background: #bf0000;
border: 2px solid #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{
background: #ff0033;
border: 2px solid #ff0033;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a{
background: #333333;
border: 2px solid #333333;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a{
background: #00b7ce;
border: 2px solid #00b7ce;
}
/****ボタンマウスオーバー時****/
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
background: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {
color: #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover {
color: #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
color: #ff0033;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a:hover {
color: #333333;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
color: #00b7ce;
}
@media screen and (max-width: 768px){
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image{
width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
text-align: center;
width: 80%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 45%;
margin: 0.7% 0.7%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
}
}

CSSの追加は、

Affinger5で表示が崩れてしまったときの対処法

管理画面で外観→カスタマイズと進みます。

Affinger5で表示が崩れてしまったときの対処法

追加CSSを選びます。

私はこのCSSの追加で崩れが直りました。

もし、AFFINGER以外でRinkerが原因の場合のCSSの追加で直るのでこのCSSでいいのかは不明なので、使用しているテーマで同現象が出ていないか調べることをおすすめします。

スポンサードリンク

さいごに

今回、サーバー移転をし、その後におなじみの500エラーや管理画面の404エラーとエラーが続き、それが終わったあとのデザインの崩れでした。

でも、先人の知恵でなんとか直ったのでホッとしました。

だけど、Rinkerが原因とは思いませんでした。わからないものですね。

 

 






  • この記事を書いた人
akika

akika

Synkers.netへようこそ。 『Synkers』とは、"Think" と "Sync"を掛け合わせました。 Macやガジェット、ネット関連を中心に書いています。 → 詳しいプロフィールを読む

-WordPress

© 2020 Synkers.net