サンプルページ

2018-07-142021-06-16

1. ハイライター
2. 見出し２
- 2.1. 見出し３
3. 装飾色々
- 3.1. 枠
4. ああああああ
- 4.1. 画像クリック
- 4.2. 横並び30％で作成
5. youtube
6. Google Map
7. ペイパル

ハイライター

html

<pre class="line-numbers language-markup"><code class="language-markup">ここにコード</code></pre>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

CSS

.f10,.f12,.f13,.f14,.f15,.f16,.f17,.f18,.f19,.f20,.f25,.f30,.f35,.f40
{font-weight:bold;text-shadow : 0px 1px 1px #999;}

PHP

<?php
// 秒 sec
echo date("Y-m-d H:i:s") ." 現在\n";
echo date("Y-m-d H:i:s", strtotime("-3 sec")) ." 3秒前\n";
echo date("Y-m-d H:i:s", strtotime("-2 sec")) ." 2秒前\n";
echo date("Y-m-d H:i:s", strtotime("-1 sec")) ." 1秒前\n";
echo date("Y-m-d H:i:s", strtotime("1 sec")) ." 1秒後\n";
echo date("Y-m-d H:i:s", strtotime("2 sec")) ." 2秒後\n";
echo date("Y-m-d H:i:s", strtotime("3 sec")) ." 3秒後\n\n";
?>

javaScript

$( "Test" ).appendTo( ".inner" );

引用

見出し２

見出し３

もじもじもじもじ

装飾色々

枠

白枠で囲んでみる

<div class="white-box">
<p class="mb0">白枠で囲んでみる</p>
</div>

グレー枠で囲んでみる

<div class="gray-box">
<p class="mb10">グレー枠で囲んでみる</p>
</div>

黄色枠で囲んでみる

<div class="white-box bg-yellow">
<p class="mb10">黄色枠で囲んでみる</p>
</div>

赤枠で囲んでみる

<div class="white-box bg-red">
<p class="mb10">赤枠で囲んでみる</p>
<p class="mb10">赤枠で囲んでみる</p>
</div>

ああああああ

画像クリック

<a href="https://msstyle.jp/wp-content/uploads/2018/06/testonnel.jpg"><img class="alignnone wp-image-74 size-full" title="トンネル小" src="https://msstyle.jp/wp-content/uploads/2018/06/testonnel.jpg" alt="トンネル小" width="150" height="150" /></a>

画像に枠をつける

画像 → 【PR】写真素材ダウンロードサイト【写真AC】

<img class="sw alignnone size-full wp-image-1247" src="https://msstyle.jp/wp-content/uploads/2019/05/79c002932c721170caeaa84ec8c002dc_s.jpg" alt="シニア夫婦 サンプル画像" width="640" height="427" />