テキスト編集のノウハウについて
前ページで少し触れましたが、「リンクカード」のテキスト部の編集操作で、場合によってはカードデザインの一部または全体が崩れる事が生じます。 この崩れる要因を調べると、修飾操作により「段落分け」が自動的に生じた場合という事が判ります。
以下にその例を挙げて、どの様な編集操作が可能で、どの様な操作がデザイン崩れを引き起すのかを説明します。 踏み込んだアレンジをする場合の参考にしてください。
崩れる場合と崩れない場合
下は、テキスト部のアレンジをする前の状態です。 既に「コンパクト化アレンジ」を実行していますが、デフォルトサイズでも生じる崩れの内容は同じです。
❶ 記事タイトルの一部 "カードリンク" の文字列を「文字色赤」の修飾をするために、キャレット操作で反転したところです。
編集アイコンの「文字色」のボタンを押すと、文字色の修飾が適用されますが、下の様に段落が分かれてしまいます。
❷「文字色」の指定範囲を記事タイトル全体に指定します。
編集アイコンの「文字色」のボタンを押すと、修飾が適用されます。 今度は段落分けを生じる事がなく、表示崩れにはなりません。
「記事タイトル」「記事の出だし」の全体を修飾すると崩れない
「文字色」の修飾指定では、指定範囲を要素の全体にすれば段落分けが生じません。
❶ 下は「記事の出だし」で「文字色」指定をした例ですが、やはり要素の一部に修飾を指定すると崩れます。
❷「記事の出だし」の文字列の全てを選択するには、「⇩⇧」キーを使うなどの要領が要ります。 下は上手く選択した状態です。
この状態で「文字色」を指定すると、崩れる事はありません。
〔ヒント〕
「記事タイトル」「記事の出だし」の「文字色」指定で段落分けが生じるのは、編集アイコンの編集仕様が原因です。 下はHTML編集で「文字色」指定を記入したもので、この操作では一部の文字色修飾が段落分けを生じずに可能です。
修飾の種類によっては段落分けが生じない
編集アイコンの「文字色」は、要素全体に指定しないと段落分けを生じますが、編集アイコンの種類（修飾内容）によっては全く崩れを生じないものがあります。
段落分けが生じない修飾指定
▪「文字サイズ」
▪「太字B」
▪「斜体I」
▪「下線U」
▪「打ち消し線S」
▪「文字背景色」（マーカー）
段落分けを生じる修飾指定
▪「段落」
▪「文字色」
▪「リンク」
▪「左寄せ」「中央寄せ」「右寄せ」（編集アイコンの）
▪「箇条書きリスト」
▪「番号付きリスト」
▪「引用」
段落分けを避けて修飾した例
下は「太字」と「文字背景色」指定を複数した例で、崩れは全く生じません。
下の「記事の出だし」は「太字・斜体」、「URL表示」は「太字・斜体・文字色」を指定しています。 メイリオでは「斜体」指定は「英数文字」でのみ有効です。
下は「記事タイトル」の全体で「文字色と文字背景色」を指定しています。
下は「文字サイズ」を「記事タイトル」と「URL表示」で指定しています。 この修飾指定は段落分けが生じませんが、行間隔が変化します。 下例の赤矢印部分の様に、押された行の一部が残り、汚い表示になる場合があります。
極端な表示崩れについて
やはり段落分けが原因になっていますが、下の例は「記事タイトル」の全体に編集アイコンの「中央寄せ」を指定したところです。
この場合は、「リンクカード」の全体が段落分けを生じ、分裂しています。「リンクカード」は全体でひとつの「a要素」ですが、これが分裂して新たな「a要素」が生成された結果で、上図の様な「リンク」を確認するダイアログが表示されています。
この様にカードが2個や3個になる表示崩れを生じる事がありますが、「アンドゥ」の編集アイコンを押して、元に戻せる場合が多くあります。「アンドゥ」操作を行うと「LinkCard Editor」が動作しなくなる場合がありますが、その場合は「Ctrl+F6」を2度押してツールを再起動すると復帰します。
「LinkCard Editor ⭐」最新版について
旧いバージョンの「LinkCard Editor ⭐」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。
