画像の周りに枠線を付けたり、特定の部分を枠線で囲む方法のメモです。

画像の周りに枠線を付けたい！

base.css の最終行に、以下のコードを追加。

子テーマを用意してあれば、子テーマ内の base.css に追加します。

 

/* 画像に枠線を付ける */
 img.waku {
     border: solid 1px #808080 !important; /* 枠線のスタイル 太さ 色 */
     box-shadow: 0px 0px 5px #808080; /* 水平方向の影の距離 垂直方向の距離 ぼかしの距離 色 */
 }

 

  1. 枠線を表示させたい画像を編集モードにする
  2. 画像詳細画面で、「上級者向け設定」を押す。
  3. 画像 CSS クラスの欄に、「waku」と入れる。

以上！

文章の周りを四角く囲みたい！

base.css の最終行に、以下のコードを追加。

子テーマを用意してあれば、子テーマ内の base.css に追加します。

/*テキスト用ボックス*/
 .textbox {
    border: solid 1px #55ccdd;　/* 枠線のスタイル 太さ 色 */
    margin:10px 10px;
    padding:20px 15px;
 }

使い方は、枠囲みしたい文章の最初と最後を<div class="textbox"></div>タグで囲みます。

この様な感じです。

<div class="textbox">文章をこの中に書く</div>