【社内用】サンプル記事

Ads by Google

このページは株式会社オンズのブログの記事のサンプルです。
社内向けに書いたものなので、有益な情報はありません。

ウェブサイト制作はのお問い合わせは下のリンクボタンからどうぞ。

オフィシャルサイトへ


↑この罫線はhrタグ。

見出しです。h4タグを使用しています。

この記事は社内用のサンプルです。たとえば strongタグを使うとこのように大文字になります。
strongタグはWordPressの編集画面では「b」が適用されています。

キーボードのデザインを適用させて b このように表示することも可能です。
この場合は以下のように記述します。

<p>キーボードのデザインを適用させて <span class="keyboard">b</span> このように表示することも可能です。</p>

これはPタグによる本文です。以下はダミーテキストです。
情に棹させば流される。智に働けば角が立つ。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。

※インデントを調整するために「class="indent-1"」を使うこともできます。詳細はこちらの記事で確認してください。通常はこのように「※」印と共に使います。

テキストの装飾

テキストの上に傍点(圏点)を表示する「text-emphasis」に対応しました。(2021年11月〜)

これはh5タグ。スライダーのサンプルです。

リンクを設定しても、自動で解除。

ZoomImgのサンプルです。

通常の画像リンクはZoomImgで挙動。

HTMLタグやjQueryなどのコードを記述するとき。

preで囲みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="ONZE | 株式会社オンズ">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="theme-color" content="#161514">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
</head>

引用は次のようになります。

これはblockquoteです
つくば市のホームページ制作会社オンズ。

リスト

番号無しのリスト
  • Cras mattis consectetur purus sit amet fermentum.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Aenean eu leo quam.
    • Pellentesque ornare sem lacinia quam venenatis vestibulum.
    • Nullam quis risus eget urna mollis ornare vel eu leo.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
番号付きリスト
  1. Cras mattis consectetur purus sit amet fermentum.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Aenean eu leo quam.
    2. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    3. Nullam quis risus eget urna mollis ornare vel eu leo.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.
定義リスト
Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean eu leo quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.

テーブル

デフォルト状態
# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak

何も設定していない状態の table です。

ボーダー付きテーブル
# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak

ボーダーを付与するには table class="border" とします。

ストライプ
# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak
3 Milos Pavlicevic pavlicak

ストライプにするには table class="stripe" とします。

Amazonの商品へのリンク

例えばハーマンミラーのアーロンチェア(リマスタード)へのリンクの場合。

こんな感じになります。


以上。
2019年11月7日に更新。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google