この記事では、私が遭遇したワードプレスのトラブルとその解決法をご紹介しています。
随時加筆予定。
スマートフォンで画像が縦長になる
はてなブログからワードプレスに引っ越した当初、スマホでホームページを見ると記事内の画像がスパゲッティのように超縦長になっていました。
原因は、はてなブログ時代に
画像の大きさを高さ（縦の長さ）のみで指定していた
ことです。
はてなブログでは、画像の高さか幅のどちらかを指定すれば、もう片方の値は自動的に調整されていました。
しかし、ワードプレス（もしくは私が使っているテーマ？）にはそのような機能がないようです。
そのため、画像の表示がおかしくなっていました。
そこで、次のコードを『ダッシュボード』→『外観』→『テーマエディター』でスタイルシートに追加して解決しました。
.article img {
width: auto;
max-width: 100%;
height: auto;
}
これで、基本的には画像の縦横比が維持された状態で表示されます。
ただし、縦横比を維持すると横幅が画面サイズを超える場合、画像の横幅は画面サイズと同一になります。
つまり、この場合は縦横比が崩れるということです。
なにか良い解決策をご存知の方はぜひ教えてください。
Cocoonのブログカードが表示されない
Cocoonでは、下のようなブログカードを表示する機能があります。
また、URL文字列を貼り付けると、下のように自動的にリンクカードに変換されます。
ところが、はてなブログからの引っ越し当初はこれらの機能がうまく動いていませんでした。
原因は、リンクにサブドメイン『www』を入れていたことでした。
おそらくワードプレスでは、本来のアドレスがサブドメインなしのもの（例：https://joe-hitagi.com）であり、サブドメインありのURL（例：https://www.joe-hitagi.com）はサブドメインなしのアドレスへリダイレクトされる仕様なのだと思います（はてなブログでは逆だったはず）。
なおかつ、Cocoonではリダイレクト前のアドレスをうまく認識できないのでしょう。
というわけで、解決策はサブドメインを抜くことでした。
クラシックブロックの編集時に『ブロックへ変換』バーが出てきて邪魔くさい
つまり、こういう状態のことです。
この解決策については、以前の記事をご覧ください。
コメント欄のアイコンと「〜より」を消したい
使用しているテーマにもよるのかもしれませんが、私の環境ではコメントに
- 大きなアイコン
- コメント主の名前の後に『より』
が表示されていました。
そのままではコメントが見難いと感じたので、以下のコードをスタイルシートに記述して消しました。
.comment-author.vcard img {
display:none;
}
cite.fn + span.says {
display:none;
}記事の更新時に『返答が正しい JSON レスポンスではありません』のエラーが出る
『External Links』プラグインをお使いの方は、プラグイン設定の『例外』タブにある『すべてのコンテンツ（ページ全体）』のチェックを外してみてください。
私の場合はそれで解決しました。
プロフィール画像が表示されない
原因は「EWWW Image Optimizer」というプラグインの設定にありました。
詳しくはこちらの記事に書きました。
原因究明の方法も解説していますので、ぜひご覧ください。
コメント