ホーム
未分類
Pneumonoultramicroscopicsili…

Pneumonoultramicroscopicsilicovolcanoconiosis 1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。ものすごく長い日本語のタイトルが付いた記事の表示テストです。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。

2023.12.1

ラテン文字45字で書かれるこの単語は、辞書に記載されている中では最も長い実用的な英単語とされています。

改行なしテキストにうまく対応するために、以下の CSS プロパティが役立つでしょう。

-ms-word-wrap: break-word;
word-wrap: break-word;

また、タイトルを省略したい場合は、例えば下記CSSで対応できます。

#blog_list .title a {
    display: block;
    height: 3.6em;
    overflow: hidden;
    visibility: visible;
}
#blog_list .title a span {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

これらは【2183】で対応している課題になります。

フロントを確認したら、管理画面の編集画面の表示の確認もお願い致します。

(1) Youtubeブロックをコンテンツ幅で表示される仕様に変更

Youtubeが表示されていますが、レスポンシブ対応になってないようです。

下記コードを追加

/* ----------------------------------------------------------------------
 ブロックエディターのYotutubeのレスポンシブ対応
---------------------------------------------------------------------- */
.wp-block-embed { margin:0 0 2em 0; }
.wp-block-embed__wrapper { position:relative; width:100%; padding-top:56.25%; }
.wp-block-embed__wrapper iframe { position:absolute; top:0; right:0; width:100%; height:100%; }

(2)上付き文字、下付き文字

x²+y₂=0

上付き文字、下付き文字のCSSが効かないようです。

下記CSSを適用させる

/* ----------------------------------------------------------------------
 上付き文字、下付き文字
---------------------------------------------------------------------- */
sup {
vertical-align: super;
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
}

(3)長いURLなどが折り返しされない不具合

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

長いURLなどが折り返しされない不具合があるようです。

下記CSSを適用させる

/* ----------------------------------------------------------------------
 長いURLなどがはみ出る現象
---------------------------------------------------------------------- */
.post_content p { word-wrap: break-word; }

(4) H1とH2タグの中央寄せを確認する

見出しのH1タグの中央寄せを確認する

太字で見出しのH2タグの左寄せを確認する

h1とh2タグの中央寄せが効かないテーマがあるようです。

効かない場合、下記CSSを追記する

.has-text-align-left { text-align:left !important; }
.has-text-align-right { text-align:right !important; }

(5) 画像ブロックが中央寄せにならない対応

下記CSSを適用させる

.post_content .aligncenter { display:block; margin-left:auto; margin-right:auto; margin-bottom:7px; }
↓
.post_content .aligncenter { display:table; margin-left:auto; margin-right:auto; margin-bottom:7px; }