目次
はじめに
ごけたです
WordPressの投稿画面内に内にMicrosoftの「Excel」のコピペは不可。
Googleの「スプレッドシート」に一度コピペ保存。
「スプレッドシート」上の表をWordpress内の投稿画面内に
コピペがいいようです。
はじめに
今回は「Wordpress」編です。
ブロックエディタを使用するようになり久しくテーブルを触れていませんでした。
久しぶりにテーブルを使用。
特定の枠内の文字を左上に設定表示しようにも
設定させる表示自体無いことに気づきました。
対応設定を書いてみました。
※完全な対応策ではございません。
ページ構成
画像、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
クラシックエディタ使用時のテーブル(罫線、表)使用時は
特定の枠内の文字を左上に設定表示することが可能でした。
「第9回) Tokyo Xtreme Walk 100 東京エクストリームウォーク 100 2024年 10月19-20日 エクストリーム部門 参加 小田原城址公園 有明アーバンスポーツパーク 秋編」のテーブルを画像表示
そもそもテーブルをタイムテーブルように
使用する書き方にも問題があるのは自覚しております。
でも書きやすいですよね。
幸い過去に書いた分は左上に表示されています。
現状でのテーブル内の文字表示設定を確認
新規投稿画面にて「ブロックを追加」から
検索欄に「てーぶる」と入力
→旧バージョンでは平仮名龍入力の段階で検索結果候補に「テーブル」が表示されましたが
最新では「テーブル」とカタカナに変換しないと検索結果候補に表示されません。
→「テーブル」を選択クリックします。
ここでは初期設定のカラム、行数共に「2」のままで青い枠内の「表を作成」をクリックします。
左枠をタイムラインに使用。
時間を入力。
右枠の画像や文字を入力していきます。
ここでは文字を3行以上入力。
この時点で左枠の時間が中央表示になっています。
「左の寄せる」設定は枠内をクリック→上部メニューが表示されたら
左から2番目の「配置」設定をクリック→「プルダウンメニュー」から「左寄せ」をクリック。
これで文字は左に寄ります。
これに上に移動させれることができれば「左上寄せ」になります。
しかし上へ移動させる設定画面はどこにもありません。
| 0101 | 555555555555555 555555555555555 555555555555555 |
| 0101 | 555555555555555 555555555555555 555555555555555 555555555555555 555555555555555 555555555555555 |
プレビュー画面で確認
投稿画面とプレビュー画面では表示が異なる場合が稀にございます。
公開時用の確認として「投稿画面」右上の「表示」をクリック→プルダウンメニューから
→「新しいタブでプレニュー」をクリック→表示画面でも確認します
→「左上寄せ」表示になっています。
「CSSコード」で対応
左メニュー一覧から「外観」→「テーマファイルエディタ」を選択クリックします。
「テーマを編集」画面が切り替わります。
上部の「ご存知ですか ?ここで CSS を変更する必要はありません — 付随の CSS エディター で、
編集とライブプレビューを行うことができます。」内の「CSS エディター」をクリックします。
「左枠」の「カスタマイズ中 追加 CSS」枠内の一番下に
/* テーブル文字上合わせ */
.wp-block-table table td,
.wp-block-table table th {
vertical-align: top;
}
をコピペします。
一番上の「公開」ボタンをクリックします
→左上の「X(閉じる)」をクリックします。
→左メニュー一覧から「投稿」→「投稿一覧」を選択クリックします
→「投稿」画面に表示が切り替わります。
→「投稿一覧」から編集中のテーブル記事を選択
→下部メニュー一覧から「編集」クリックします。
記事画面に表示が切り替わります
→テーブル内の文字が左上寄せ表示になっています
プレビュー画面で確認
→右上の「新しいタブでプレニュー」をクリック
→プレビュー画面でも「左上寄せ」表示になっています。
注意点
※注意点は今回の「CSS設定」を行うとテーブル全ての文字、画像が左上寄せ設定になります。
特定の枠内だけの設定は不可になります。
テーブルを使用しない書き方に変える
そものもテーブルに頼らない書き方をする。
これが一番ですね。対応できない→どう書き直していくか→個人的発想の問題です。
「CSSコード」を使用して全て左上寄になるのも回避できます。
見出しデザインで対応
01:01
時刻を「見出しデザイン」の普段使用しない「6階層」を使用
あとは普段と投稿を同じ段落と画像で対応することに。
インライン画像によってクリックしても拡大表示されない
今回の左上寄せ設定を試している段階でこれまで可能だった
テーブル内に表示させた画像はクリックしても拡大表示されないことも判明しました。
テーブル内に画像を配置させるには枠内をクリック
→上部メニュー
→上記メニュー一覧から左柄3番目の「さらに表示」をクリック
→プルダウンメニューから「インライン画像」を選択クリック
→新規画像を使用する場合は「メディアをアップ」タブから
→アップロード済みの画像を使用する場合は「メディアライブラリ」タブから画像を使用します
ここでは「メディアライブラリ」からアップロード済みの画像を使用
→一覧から選択
→右下の「選択」をクリック
→編集画面に表示が戻り枠内のカーソルがあった箇所に画像が追加表示されます
「投稿画面」右上の「表示」をクリック→プルダウンメニューから
→「新しいタブでプレニュー」をクリック
→表示画面でテーブル内の画像をクリック→拡大表示されません。
さいごに
不定期ながらも割とコンスタントにアップデートされるWordpress。
表示が崩されさえしなければあとはバックアップだけで十分。などど呑気に対応していました。
暫く触れていない機能も使用してみると対応に変化があることにようやき気づくことに。
投稿内容が変化し、機能を使用しないことも確認不足の1つです。
アップデートの度に確認するのは面倒ですがいい機能が無くっていたのは残念でした。
他にもこれまで使用していて現在不可能になった機能がないか確認も大事かも知れません。
最後までお読みいただき下さりありがとうございました。