【Elephant3カスタマイズ】見つけた!かわいい枠を追加する方法

WRITER
 
この記事を書いている人 - WRITER -
|カスタマイズは自己責任で!

このブログのワードプレス環境

 この記事では
        コピぺができるCSSをElephant3に実装する方法を説明。

参考サイト

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30|サルワカ

カスタマイズレベル

 手順1|自分の好きなデザインを探そう!

まずは自分でから好きなデザインを探してください。

私のおすすめサイト
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30|サルワカ

今回はこちらの『14.布風』を使ってみようと思います。

 

 

 

手順2|追加CSSにサンプルコードをコピーしよう

▼参考サイトからCSSをコピー▼

 

まずは『CSS』のところをドラックして選択してコピーしておきます

 

 

 

手順3|追加CSSにコピーしたコードを貼り付けよう

 この見出しの流れ
        CSSをコピー(参考サイト)  外観  カスタマイズ  追加CSSに貼り付け 

その前にちょっとしたコツ

新しく投稿ページを作ってプレビューの状態で見ながらカスタマイズするとやりやすいですよー!

 ちょっとしたコツの流れ
      投稿  新規追加  プレビュー  カスタマイズ  追加CSS 

▼プレビュー画面でカスタマイズボタンの位置▼

 

▼追加CSSのボタン位置▼

 

 

 

手順3の続き|実際にコピーしたCSSを貼り付けよう

▼プレビュー画面でカスタマイズボタンの位置▼

 

今後追加CSSを追記した時に

このCSSはなんだっけなー?

とならないようちょっとプラス技しておきましょう!

プラス技

CSSの1行目に /**/ と半角で入力します

CSSは一つの言語のため日本語を受け付けません

/**/の間はCSSコードじゃないというCSS言語にとっての指示になります
自分メモなどで日本語入力したいときは必ず/**/を使いましょう

 

例えば

/*布風BOX*/

こんな感じで自分メモ用なので自分がわかればなんでもOKだよ

▼/*布風BOX*/を追記した状態▼

 

これでどんどん追加しても境目の役割を果たすんだね

公開ボタンを押そう!

公開ボタンを押し忘れに気をつけて!

ここでうっかり公開しないで次の手順に行く貼り付けたCSSが保存されないので押し忘れに注意!

 

 

手順4|HTMLコードを記事に貼ろう

 ちょっとしたコツの流れ
        HTMLをコピー(参考サイト)  投稿  テキストエディタに貼り付け 

 

▼参考サイトからHTMLをコピー▼

 

▼テキストモードに貼り付け▼

 

 

 

手順5|プレビューで確認

▼プレビューで確認▼

バッチリだぁぁぁぁああーーーーい

 

 

 

おまけ|もっと自分好みにアレンジ

背景色を変えたい場合

background: #d6ebff;
background: #d6ebff;

#あとの6桁の数字を自分の好きなカラーコード6桁に変更しましょう!
このBOXデザインの場合は同じ色がおすすめ

backgroundは点線の内側の部分

box-shadowは点線の外側部分

のことを示したコードです。

▼おすすめ無視するとダサくなるぜよ▼

 

 

 

点線の色を変えたい場合を変えたい場合

border: dashed 2px white;

の white 部分に#+6桁数字を入れてください

▼点線の色変えてみたよ▼

 

 

 

文字色を変えたい場合

.box14 p { margin: 0; padding: 0; }のどこかに color:#colourコードを入れましょう

例えば

.box14 p {
 margin: 0;
 padding: 0;
 color: #f17777; }

▼文字色変えてみたよ▼

よく使う場合はHTMLをプラグインの『AddQuicktag』に登録しておくと記事を書くスピードがUPするよ!

 

 

 

この記事を書いている人 - WRITER -

Copyright© やりたかったことやってみよう , 2018 All Rights Reserved.