CSSで黒板風レイアウトをつくろう

黒板風に文字を装飾する方法

こんにちは、アフィリエイトで5万稼ぐためのホームページのケンボーです。

ブログやサイトアフィリエイトする場合に「ポイントをわかりやすくレイアウトしたい」などと考えることありませんか？

ただ、文章だけよりも、図解やポイントを強調したレイアウトのほうが、閲覧者が読みやすく、書いてる内容を理解していただけると思います。参考に以下黒板風のレイアウトのやり方を解説します。

※ショートコードを使えば簡単にサイトをレイアウトできます。

【WordPress】ショートコードでサイトの見栄えを良くしよう

WordPressのショートコードとはなにか function.phpに書いたプログラムをブラケットで囲った短いコードで呼び出せる機能をショートコードといいます。投稿とテンプレートで呼び出すことができます。 WordPressでショート...

kenbo-it.com

2020.12.28

どんなレイアウトになるか

以下の表示になります。

※作業前にはバックアップをとりましょう。

簡単にWordPressでバックアップをするには【初心者むけ】

WordPressでバックアップをするにはどうしたらよいでしょうか。 まずはWordPressにはどんなデータがどこにあるのか説明し、 バックアップのタイミングと方法を解説します。 WordPress データとは ①テーマ：ホームペ...

kenbo-it.com

2020.12.25

黒板風枠に記載する手順、やり方

①まずは以下のコードをコピーします。

/* 黒板風　2 */
.kokuban-s2 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 90%; /* ボックス幅 */
background: #006633; /* ボックス背景色 */
color: #fff; /* 文章色 */
border: 8px solid #b2771f; /* 枠線 */
border-radius: 3px; /* 角の丸み */
box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.kokuban-s2::before,
.kokuban-s2::after {
position: absolute;
content: ”;
bottom: 0;
}
.kokuban-s2::before {
width: 20px;
right: 10px;
border: solid 3px #ffff00; /*チョーク（黄色）*/
border-radius: 3px 2px 0 2px;
}
.kokuban-s2::after {
width: 15px;
right: 45px;
border: solid 3px #fff; /*チョーク（白） */
border-radius: 8px 5px 2px 5px;
}

参考リンク：https://miyazakilife.com/design/5683/

②［外観］の［テーマエディター］を開きます。

コピーしたコードを貼り付けます。

③［テキスト］モードで<div class=”kokuban-s2″>と</div>の間に書きます。

使用時は、「テキストモード」で以下のように記述します。

<div class=”kokuban-s2″>黒板風レイアウトでポイントを書こう！</div>

すると以下のようになります。

～応用編～　黒板風レイアウト　ポイント化するには

より見やすいよう以下のコードもテーマエディタへコピーして貼り付けます。

@font-face {
font-family: ‘HuiFontP109’;
src:url(‘/fonts/public/HuiFont/HuiFontP109.eot’);
src:url(‘/fonts/public/HuiFont/HuiFontP109.eot?#iefix’) format(‘embedded-opentype’),
url(‘/fonts/public/HuiFont/HuiFontP109.woff’)format(‘woff’),
url(‘/fonts/public/HuiFont/HuiFontP109.ttf’)format(‘truetype’),
url(‘/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
.kokuban {
font-family: HuiFontP109;
color: #fff;
background-color: #114400;
margin: 10px 0 10px 0;
padding: 15px;
border: 9px solid #a60;
border-radius: 3px;
box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
text-shadow: 0px 0px 2px #000;
line-height: 1.9;
}
.point {
color: #ffb1b3;
font-weight: bold;
border: 3px solid #ffb1b3;
}

参考リンク：https://blog.minimal-green.com/entry/2017/02/25/092147

②テキストモードで

<div class=”kokuban”><span class=”point”>ポイント</span>
黒板風囲み枠CSSです。</div>

違った雰囲気の表示が可能となります。

以上で黒板風な記載ができポイントなどを書くときによいでしょう。