フォーラムへの返信
-
投稿
-
該当サイトではJavascriptエラーが多く発生しています。
ソースからは様々なプラグインを利用されているようですが、特にキャッシュ系のプラグインは今回のようにJavascriptの動作を不正な状態にしたり、逆に効率を下げるため使用しないでください。
まずはキャッシュ系のプラグインを中心にご利用のプラグインの停止をして問題を引き起こしているプラグインを特定してください。
キャッシュ系のプラグインとは、具体的には以下の働きを行おうとするものです。
- 静的キャッシュを生成し、本来のPHP(WordPress)の処理を介させず物理的な静的HTMLを表示させる。
→PHPの処理が働かず、PCでアクセスしているのに最初にキャッシュされたモバイルテーマで表示されてしまう、
→キャッシュを表示するため、変更した内容(テーマカスタマイズ、ウィジェット、投稿など)が全く反映されない、
など。 - 読み込まれているJavascriptとCSSをそれぞれすべて1つにまとめるもの。
→ それぞれのスクリプトの読み込み位置が無視され、本来あるべき相対関係がめちゃくちゃになり動かなくなる。
対象サイトのソースからは、スクリプトの非同期の読み込みを強制すると思われる「Asynchronous javascript」というプラグインが原因のように思われます。
また、すべてのCSSを強引にまとめていると思われる「Autoptimize」(?)というようなプラグインも、今後レイアウト崩れや設定したCSSが反映されない、などの問題を引き起こしかねません。
キャッシュ系のプラグインはその機能の意味と影響を把握しないまま利用すると、逆に思わぬ不具合やユーザビリティの著しい低下をもたらしますので、機能をしっかりと判断して危険がないと判断した上で利用していただくか、実際には大した効果がない場合が多いため、基本的に利用しないことを推奨します。
なお、DigiPressでは自前でメタタグを最適化する機能があるため、「All in One SEO Pack」プラグインの使用も機能が重複するだけでなくメタタグの重複出力や不必要にリソースを消費させるためおすすめしていません。
サイトに何か問題(特にJavascriptに関するエラーやレイアウト崩れ)が発生した際は、まずは以下のトラブルシューティングの内容をチェックしてください。
対象テーマ、バージョン、その他具体的な状況が全く分かりません。
テクニカルサポートが必要な場合は可能な限りすべての情報とURLを提示してください。まずはトラブルシューティングの内容を、再度順番にすべてチェックし直してください。
アイコンのサイズが長方形というデザインがよくわかりませんので具体的にどういう要件でどのようなデザインにされたいのでしょうか。
アイコン自体は画像ではなく「フォント」であり、横長にする、という事自体不可能です。
※普通の文字と同じくフォントサイズの調整を行います。対象ページが不明ですのでご提示いただいた情報のみでは原因はこちらでも分かりませんが、オリジナルスタイルシート設定にご自身で何らかの定義をしている場合はそのCSSとスライドショーのCSSがバッティングしていないか確認してください。
その他、以下トラブルシューティングの項目をすべてチェックしてください。
具体的に確認が必要な場合は対象ページのURLをご提示ください。
「オリジナルスタイルシート設定」はCSS自体を記述するもの(CSSファイルを生成)であり、metaタグなどヘッダー内の定義としてHTMLタグなどは記述しないでください。
※CSSではないため構文自体が誤りとなります。ヘッダに何かタグを挿入する場合は、「詳細設定」→「HTMLヘッダー設定」の「<head>～</head>内のユーザー定義」に記述してください。
「オリジナルスタイルシート設定」に以下を追記してください。
[class^="PIN_"] img, [class*=" PIN_"] img{ -webkit-opacity:1; -moz-opacity:1; -o-opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); opacity:1; }参考：
その他、特定のページのみ表示が崩れるような場合は、対象ページに表示しているコンテンツ(テキスト
ウィジェット等)に不備(タグのとじ忘れ等)がないかをよく確認し、原因を探ってください。厳密にはメディアクエリという手法を利用してテーマ既定のレスポンシブ(≒メディアクエリ)化する表示幅を変更した独自のCSSを「オリジナルスタイルシート設定」に定義(既定の上書き)すれば可能ですが、この手法とCSSについて十分な理解と知識が前提となります。
参考：
オプションにない箇所を好みのスタイルにカスタマイズする：
ご自身にてオリジナルスタイルシート設定に既定のレイアウトを強制的に変更しているのが原因ではないでしょうか。
ポートフォリオ形式はタイル状に並べるためにJavascriptも絡んでおりCSSで無理やり変更はしないでください。
カスタマイズを行ってデザインが崩れた場合は、一旦カスタマイズした状態を戻してみるなどして原因を切り分けてください。
WordPressは編集画面(テキストモード)で改行した場合は自動的に段落タグ(P)で括られます。
従って、正確(HTML構文上)には改行(BR)ではなく段落として区切られることに留意してください。
実質的に改行する場合はリターンンキーで改行するのではなく、<br />を明示的に記述してください。その上で、パラグラフ(Pタグ)間の距離を縮める場合は line-height ではなく margin-bottom(既定は30px) をオリジナルスタイルシートで変更してください。
.entry p { padding: 0 0 20px 0; } - 静的キャッシュを生成し、本来のPHP(WordPress)の処理を介させず物理的な静的HTMLを表示させる。
