前回のページ内移動タグ設定のやり方　～ひだっちブログカスタマイズ設定編～に続きまして装飾枠いろいろの設定方法について


ネットでいろんな記事を見ているとき文章内に

とか

とかいろんな装飾が出てきます。
今回も前回の「目次するする」に続き、いろんな枠を入れるやり方のご紹介です。
今回もコピペで済みます。

まずは好きなデザインがあるサイトをググってみよう

Googleで「CSS　装飾　ボックス」と検索してみてください。
色々出てきますので、好きなサイトを開きます。
今回ご紹介するのは下記サイト
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30


このサイトはhtmlとCSSの両方記述があります

別サイト
コピペで可愛く装飾！ CSSのみでデザインする囲み枠（ボックスデザイン）ではCSSの記述のみですがhtml呼び出しコードは


タイトルはCSS内の指定で
content: ‘TITLE’; の TITLEという箇所を変更しその都度変更できる仕様でないタイプでした。


これらを設定するやり方を書いていきます。

ひだっちブログでの設定方法

PCから設定します（スマホ管理画面では出来ません）
管理画面TOP→テンプレート→カスタマイズ
次の画面の一番上「スタイルシート（CSS)」を編集していきます。



スタイルシート（CSS）は文字列の再下段から読んでいきますが、最初の記述が優先されるという特性があります。
いろんなスタイルシート紹介サイトで書いてある「CSS」という記述を、ひだっちブログCSSの最下段にコピペします。


今回はスタイルシートのみの編集になりますので、コピペ終了したら、画面下の更新ボタンを押して設定終了です。
続いて
スマートフォンとタブレットのカスタマイズも済ませておきます。
こちらも設定しておかないと、スマホから見たときに反映されなくなります。

ブログ内でのタグ記述について

先ほどコピーした記述の中の最初の方に「.box1 ｝」とか「.mybox ｝」と書いてある中の「box1」と「mybox」が呼び出しコードになります。

これらの呼び出し文字をブログ本文内で下記黒枠タグに入れると表示されます。

実際に入れるコード

↓表示のされ方



実際に入れるコード

↓表示のされ方


こんな感じで表示されます。


CSSコードはどれだけでも入ります。
ただし１０個２０個と入れていくと、どの枠がどこコードか分からなくなってくるので、先に好きなデザインとCSSをコピっておいて、それの呼び出しコード「sample box」とかと合わせてテキストにメモしておくと後で分かりやすいです。

あと注意点として、
１．色々見てると「JS」とか出てきてくるのですが、これはJabascriptで多分出来ないので、CSSコードだけで完結しているデザインがいいと思います。

２．どのサイトも「box」とか「samlebox」とか同じような名前に設定してあることが多いです。　たくさん入れていくとそのうち、違うデザインのCSSなのに同じ名前のが重複してくることがあります。たぶん良くないことが起こると思いますので、先にCSSコードのそれらしき記述「box」とかのところをすべて、自分で分かるように変えておく必要があります。


皆様の参考になれば幸いです。