インラインコード、インライン画像、キーボード入力を使いやすくしてみました。

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

インラインコード

段落ブロックなどの中で HTML や CSS のコードを書くためのもの。<code> タグで囲まれる。

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

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;
}

インライン画像

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

店長おすすめ インライン画像が使えるようになりました!!

以下の CSS を追加して画像の位置を調整してあります。

p img {
vertical-align: top;
}

キーボード入力

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

Cocoon にならって以下の 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;
}

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

Lightning / Katawara を使用したサイト制作は全国どこからでも承ります。遠方からのご依頼の場合、Zoom を使用して打ち合わせを行わせていただきます。

講習形式のホームページ制作サポートも行っています。
お客様ご自身でホームページを制作・カスタマイズする上で、むずかしい部分を講習形式でサポートいたします。制作を手伝ってもらうだけでなく、同時に制作スキルを身につけたいという方はお気軽にお問い合わせください。