記事本文の一部を枠で囲みおしゃれにカスタマイズ

サイトのstyle.cssに下記のソースを貼り付ける。

ワードプレスの管理画面を開き、「外観」から「テーマの編集」を開く。
そこでstyle.cssが開かれていることを確認し、以下のコードをそのまま貼り付けて内容を保存。

POINT

/************************************
** 記事内の文章を枠で囲むCSS
************************************/
.waku {
width: 90%;
margin: 16px auto;
padding: 14px 12px ;
line-height: 1.5;
position: relative;
border: 3px solid #FF81A0;
border-radius: 5px;
box-shadow: 0 5px 3px -3px rgba(0,0,0,0.4);
}

.waku span {
padding-right: 5px;
}

.attention {
font-size: 16px;
color: #000;
text-align: center;
line-height: 1;
position: absolute;
top: -.8em;
left: 30px;
background: #fff;
padding: 5px 10px;
}

 

POINT

<div class=”waku”>

<div class=”attention”>
POINT
</div>

ここに本文をいれる
</div>

以上

ContactForm7のチェックボックスを縦ならびにする方法

サイトのstyle.cssに下記のソースを貼り付ける。

ワードプレスの管理画面を開き、「外観」から「テーマの編集」を開く。
そこでstyle.cssが開かれていることを確認し、以下のコードをそのまま貼り付けて内容を保存。

POINT

span.wpcf7-list-item {
display: block;
}

以上