けーちゃんの自作Webツール

css装飾ボックスメイカー使用方法

●このツールでできること

 

用意された装飾ボックスを

 

用意されている装飾ボックス

 

webページのイメージに合わせて変更

 

装飾ボックスをカスタマイズ

 

コードをコピーしてWordPressなどに貼り付け

 

作成したコードをコピー

 

文章を入れ替えるだけで

 

wordpressに貼り付け

 

簡単にオリジナルボックスを作成できます!

 

カタログ【画像】

 

関連記事:
【メモ】WordPressで外部のhtmlやcssをコピペして使用する方法 | アフィ+さぽ!

使用方法

 

【基本画面】

 

css装飾ボックスメイカー基本画面

 

①装飾ボックスタイプ選択欄

 

登録されている装飾ボックスは、いくつかのタイプに分類わけされています。
一覧より、希望のタイプを選択することができます。

 

装飾ボックスタイプ選択画面

 

②装飾ボックス選択欄

 

装飾ボックスタイプ選択欄で選択された分類に所属するボックスが表示されます。
ボックスを選択することで、いくつかのバリエーションが表示されます。

 

③バリエーション表示&カスタマイズ欄

 

枠の色や線種などを変更することができます。

 

バリエーション表示&カスタマイズ欄

 

メニュー表示

 

右上の  をクリックすることで、メニューが表示されます。

 

メニュー表示

 

(1)コード

 

装飾ボックスを表示するのに必要な、HTMLとcss(スタイル)が表示されます。
COPYボタンを押すことで、クリップボードにコピーされます。

 

コード表示パネル

 

(2)複製

 

装飾ボックスを複製し、ブラウザ内に保存します。
複製したデータは、登録データタブに表示されます。

 

複製した装飾ボックス

 

※ブラウザの設定によっては、データを保存することができません。
詳しくは、各ブラウザの情報を確認してください。
Firefox:ローカルストレージの設定を管理する
Chrome:Chrome で Cookie の削除、有効化、管理を行う

 

※ブラウザのバージョンアップや仕様変更により、データが削除される可能性があります。

 

(3)カスタム編集

 

より高度な編集が可能となる機能です。

 

カスタム編集機能