ブロックエディターのインラインコードインライン画像キーボード入力の CSS を設定して使いやすくしてみました。

インラインコード、インライン画像、キーボード入力

インラインコード

インラインコードは段落ブロックなどの中で HTML や CSS のコードを書くために使われるもので、<code> タグで囲まれます。
このサイトでは、VWS フォーラム にならって以下の CSS を追加してあります。

p code {
font-family: Inconsolata,Consolas,Monaco,"Lucida Console",monospace;
display: inline-block;
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 0 5px;
max-width: 95%;
vertical-align: middle;
margin-top: -3px;
overflow-x: auto;
}

使用例

見出しを中央揃えするには、h1 { text-align: center; } のように書きます。

インライン画像

段落ブロックなどの中に画像を入れることができます。
このサイトでは以下の CSS を追加して画像の位置を調整してあります。

p img {
vertical-align: middle;
}

使用例

インライン画像が使えるようになりました!! NEW

キーボード入力

このサイトでは以下の CSS を追加してあります。

kbd {
background-color: #f9f9f9;
border: 1px solid #777;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.85em;
padding: 1px 3px;
}

使用例

Ctrl + Alt + Delete を押して再起動します。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

Lighting テーマ使用

WordPress サイト開設

スターターパック

  • デザイン済みパーツを組み合わせることで価格納期を大幅削減
  • プロが作ったクオリティが高いホームページ
  • サポート付き・ご自分でかんたんに情報発信できます