Google Search Consoleで、コンテンツの幅が画面の幅を超えていますというモバイル ユーザビリティに関するエラーメッセージが表示されていました。
該当する部分は、<pre><code></code></pre>で囲った部分で横スクロールバーが表示されている部分です。今までに、この部分でエラーメッセージが表示されたことが無いので、不思議に思いながら対処方法を探してみました。
<code>のstyle属性に"display:block;overflow-x:auto;"を指定すると良いという情報がありましたので、試してみた結果、エラーメッセージは表示されなくなりました。
参考URL : <pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」 - ラボラジアン (laboradian.com)
スタイルシートに設定をしてもエラーは解消できないらしいので、「もしかしたら、AMPが影響している可能性があるのでは？」と考えて、AMPのテンプレートに
pre code { display: block; overflow-x: auto;}
を追加してもエラーが解消できることを確認出来ました。
Google Search Consoleにおいてモバイル ユーザビリティに関するエラーが表示されたら、AMPについても調べる必要があると認識しました。でも、AMPで問題があるなら、Google Search Console内のAMPの部分でエラーを表示して欲しいです。
Movable Typeのスタイルシートでtrebuchet msというフォントを指定していると、時々文字の大きさが変に表示されます。
ネットで検索すると、trebuchet msとIE8の相性が悪い？。
「スタイルシートでtrebuchet msを記述している部分が""(ダブルクォーテーション)で囲っていない影響かも？」と思い、そのようにしてみました。確かフォント名でスペースが入っているものは、""(ダブルクォーテーション)で囲うルールだったはず・・・。
もう少し様子を見ないとわかりませんが、文字の大きさが変になる事は無くなったようです。
Movable Type 4とかMovable Type 5をお使いの方で、同じような現象な方は試してみてください。
モーションテンプレートを使用しているブログでは、Youtubeの動画が簡単に張り付けることが可能ですが、HD動画を張り付けるとはみ出してしまいます。
スタイルシートを以下のように修正して対応しました。
#content {
background: #fff;
/* width: 980px; */
width: 1040px;
margin: 0 auto;
font-size: 1.2em;
}
#content-inner {
padding: 30px 20px 25px;
/* width: 940px; */
width: 1000px;
margin: 0 auto;
}
#alpha {
/* width: 620px; */
width: 680px;
margin-right: 20px;
}
赤字の部分が変更した箇所です。
MTOS 4.2 RC2をインストールしてお試し中です。
MTOS 4.2では、コメントの返信機能が使えるようになっているのですが、テンプレートの表示では返信機能が生かされていないようです・・・。
コメントの返信も簡単に表示も解りやすく | MovableType.jpを参考にして、コメントのテンプレートを修正して入れ子に表示できるようにしてみました。
Movable Type 4の公開設定に
バックグラウンドのキューを使って再構築を行う
というのがあります。
どうやって使うのかよくわからなかったのですが、色々と実験してみてどんなものなのかわかってきました・・・。
エントリーを作成したり修正した後に保存した時や、テンプレートを修正して保存した時に、データベースへデータが保存されます。そして、cronを使ってrun-periodic-tasksを実行させるようにしていると、再構築作業が実行されてhtmlやcssなどのファイルが書き換えられます。
Movable Type 3.3でエントリー･アーカイブを表示するデフォルトテンプレートでは、エントリーのタイトルを表示する部分は、
<h2 id="archive-title"><$MTEntryTitle$></h2>
となっています。
StyleCatcherを使用して、スタイルを変更すると、スタイルシートでarchive-titleの記述がなくなるので、素っ気無い表示になってしまいます。
StyleCatcherを使用するなら、Movable Type 3.2以前のデフォルトテンプレートと同じように修正すれば良いと思います。Movable Type 3.2では、
<h3 class="entry-header"><$MTEntryTitle$></h3>
となっています。
TYpePad Japanで表示されるページは、XHTMLで書かれているので、仕様に沿ってテンプレートに
<?xml version="1.0" encoding="utf-8"?>
を追加しました。
その結果、ブラウザによってフォントサイズの大きさが変わってしまい、Internet Explorerでちょうど良い大きさだと思っても、Mozilla Firefoxでは小さくて見辛いという状況になりましたので、苦肉の策としてスタイルシートで
font-size: 10pt;
とフォントサイズを指定(固定)して表示するようにしました。視力の弱い方が見たときの事を考慮すると、フォントサイズを指定(固定)してという方法は取りたくなかったのですが・・・(^_^;)。フォントサイズを指定(固定)しなくても、ブラウザの違いによる表示の違いを解決できるように、色々調べたり勉強してみたいと思います(^^ゞ。