ブログに配置できるブロック装飾や折りたたみのメモ
今回はブログの記事を書く時に使うブロック装飾の構造や一部を折りたためるCSSコードをメモ的な感じで残してます。
FC2ブログでしか動作確認できていないので他のブログサービスでも動作するかは未確認。CSSは全世界共通らしいので多分？動くとは思います。
当記事の黒いブロック内は自由にコピペ&改変して使っていただいてOK。報告もいりませんのでお構いなく。
動作確認はしていますが、CSSカスタムに関しては初心者同然なので効率の悪いCSSを書いている可能性が十分あります。ご了承ください。
引用したい時は「<blockquote><p>(引用内容)</p> </cite>‐(引用元のページや記事の名前)‐</cite></blockquote>」を使うのをオススメします。
↓は自分の書いた文章を装飾したい時に使います。
text-align:は文章の寄りを設定します。text-align:leftで左寄り、text-align:centerで中央、text-align:rightで右寄りになります。
padding:は余白を設定します。padding:10px;で上下左右に10pxの余白を与えます。数値にはpx以外にもemや%も使用可能で、場所によって余白の大きさを変えたい場合は「padding:(上下)px (左右)px」や「padding:(上)px (右)px (下)px (左)px;」で指定可能。
border-color:は枠の色を設定します。#ccccccのところを使いたい色のカラーコードに設定すれば色が変わります。
border-width:は枠線の太さを指定します。だいたい2～3px程が良さげ。
border-style:は枠線の種類を指定。border-style:solidで一本線、border-style:doubleで二本線、border-style:dashedで破線、border-style:dottedで点線、border-style:ridgeで凸線、border-style:grooveで凹線になります。
background:で背景の色を指定します。こちらもカラーコードの指定ですが、clearで指定したりこの部分を記述しなければ透明になります。
width:はページの横幅に対するボックスの大きさを指定します。100%だと目一杯に配置するので90%～95%程が良さげ。
今回は入れていませんが、ボックス内の文字色を変えるcolor:#******;や文字サイズを変えるfont-size:**px;を入れることもあるかも。
ブロックから英文やURLがはみ出してイヤンという場合はword-break: break-all;を入れると楽に調節できます。
クリーム色の部分はタイトルの部分を設定しているコード、白色の部分がボックス部分を設定しているコードです。
height:はタイトル部分の高さを指定しています。14～15px辺りがちょうど枠線の真ん中に来る感じで良さげ。
margin-left:はタイトル部分が左側にどれだけ空白をとるかを設定します。数値を大きくするとどんどん右に移動します。
padding:は余白、border-style:は枠線の種類、background:は背景色、color:は文字色、font-size:は文字サイズ、font-weight:bold;は文字の強調表示、width:はページの横幅に対するボックスの大きさを指定。
border-radius:は枠線の線の丸さを指定しています。数字が大きいほど枠が丸くなります。
頑張れば複雑な形のボックスも作ることができます。自分で作るのはムリという方もCSSコードを配布しているサイトがあるので探してみるといいかも。
xxxxx部分はIDとなるので、同じページに複数の折りたたみを設置したい場合は半角英数でID付けを行います。上と下のIDを一致させないと開いてくれないので注意。
入れ子状にこのCSSを配置することで念には念を押して2回以上押さないと開かないようにすることも可能です。その際も外側と内側のIDは違うものを使用すること。
FC2ブログでしか動作確認できていないので他のブログサービスでも動作するかは未確認。CSSは全世界共通らしいので多分？動くとは思います。
当記事の黒いブロック内は自由にコピペ&改変して使っていただいてOK。報告もいりませんのでお構いなく。
動作確認はしていますが、CSSカスタムに関しては初心者同然なので効率の悪いCSSを書いている可能性が十分あります。ご了承ください。
ボックスの作り方(シンプル)
ボックス内に文字を配置して他の場所と区別したい時に。引用したい時は「<blockquote><p>(引用内容)</p> </cite>‐(引用元のページや記事の名前)‐</cite></blockquote>」を使うのをオススメします。
↓は自分の書いた文章を装飾したい時に使います。
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;background:#clear;width:92%;">(自由にどうぞ)</div>
コードをコピー
上記のように記述すると、下のような枠線が出てきます。(自由にどうぞ)
text-align:は文章の寄りを設定します。text-align:leftで左寄り、text-align:centerで中央、text-align:rightで右寄りになります。
padding:は余白を設定します。padding:10px;で上下左右に10pxの余白を与えます。数値にはpx以外にもemや%も使用可能で、場所によって余白の大きさを変えたい場合は「padding:(上下)px (左右)px」や「padding:(上)px (右)px (下)px (左)px;」で指定可能。
border-color:は枠の色を設定します。#ccccccのところを使いたい色のカラーコードに設定すれば色が変わります。
border-width:は枠線の太さを指定します。だいたい2～3px程が良さげ。
border-style:は枠線の種類を指定。border-style:solidで一本線、border-style:doubleで二本線、border-style:dashedで破線、border-style:dottedで点線、border-style:ridgeで凸線、border-style:grooveで凹線になります。
background:で背景の色を指定します。こちらもカラーコードの指定ですが、clearで指定したりこの部分を記述しなければ透明になります。
width:はページの横幅に対するボックスの大きさを指定します。100%だと目一杯に配置するので90%～95%程が良さげ。
今回は入れていませんが、ボックス内の文字色を変えるcolor:#******;や文字サイズを変えるfont-size:**px;を入れることもあるかも。
ブロックから英文やURLがはみ出してイヤンという場合はword-break: break-all;を入れると楽に調節できます。
ボックスの作り方(タイトル付き)
ボックスにタイトルをつけたい時に。<div style="height:14px;"> <span style="margin-left:7px;padding:5px 10px;border-style:solid;background:#3399FF;color:#ffffff; font-size:17px;font-weight:bold;width:92%;border-radius:20px;">(タイトル名)</div></span><div style="text-align:left;padding:20px 12px 10px;border:2px solid #3399FF;background:#clear;width:92%;border-radius:5px;">(自由にどうぞ)</div>
上記のように記述すると、下のような枠線が出てきます。 (タイトル名)
(自由にどうぞ)
クリーム色の部分はタイトルの部分を設定しているコード、白色の部分がボックス部分を設定しているコードです。
height:はタイトル部分の高さを指定しています。14～15px辺りがちょうど枠線の真ん中に来る感じで良さげ。
margin-left:はタイトル部分が左側にどれだけ空白をとるかを設定します。数値を大きくするとどんどん右に移動します。
padding:は余白、border-style:は枠線の種類、background:は背景色、color:は文字色、font-size:は文字サイズ、font-weight:bold;は文字の強調表示、width:はページの横幅に対するボックスの大きさを指定。
border-radius:は枠線の線の丸さを指定しています。数字が大きいほど枠が丸くなります。
頑張れば複雑な形のボックスも作ることができます。自分で作るのはムリという方もCSSコードを配布しているサイトがあるので探してみるといいかも。
折りたたみの作り方
ネタバレを隠したい時や画像を隠す時とかに使えるかも。<div onclick="obj=document.getElementById('xxxxx').style; obj.display=(obj.display=='none')?'block':'none';"><a style="cursor:pointer;"><span style="color:#3399ff">▶クリックかタップで展開</span></a></div><div id="xxxxx" style="display:none;clear:both;">(隠れた文字)</div>
上記のように記述すると下のようなボタンが出てきます。クリックすると開き、もう一度クリックすると閉じます。xxxxx部分はIDとなるので、同じページに複数の折りたたみを設置したい場合は半角英数でID付けを行います。上と下のIDを一致させないと開いてくれないので注意。
入れ子状にこのCSSを配置することで念には念を押して2回以上押さないと開かないようにすることも可能です。その際も外側と内側のIDは違うものを使用すること。
