プロフィール
 

純白のマルス

Author:純白のマルス
◇自己紹介◆
マリオやポケモン等の任天堂のゲームシリーズが大好きな社会人です。
好きなジャンルはRPGとアクション。面白そうと思えばジャンルやハード気にせず飛びつくタイプ。
基本的には1つのゲームを何周もやるより新しいゲームを次々遊ぶスタンスです。
◇◆◇◆◇◆◇◆◇◆◇◆◇
★誕生日と性別 
2月21日生まれの女
◇◆◇◆◇◆◇◆◇◆◇◆◇
☆特に好きなゲーム
マリオ、ポケモン、カービィ、ゼルダの伝説、ファイアーエムブレム、スマブラ
◇◆◇◆◇◆◇◆◇◆◇◆◇
☆3DS フレンドコード
名前 WhiteMarth
コード 0576ー3597ー1208
★Wiiu フレンドコード
ID WhiteMarth

 
当ブログについて
アクセスカウンター
 

目指せ600000Hit!!

キリ番はやっておりません。

 
Amazon.co.jp
 
 
タグクラウド
 

 
Livly Island
 
「Livly Istand」「リヴリーアイランド」は、ココネ株式会社の商標です。「Livly Istand」に関わる著作権その他一切の知的財産権はココネ株式会社に属しており、このサイトは「Livly Istand」及びココネとは、一切関係がありません。
 
ブログ村
 
PVアクセスランキング にほんブログ村
 
BLUE☆STAR
 
 
 
 

ブログに配置できるブロック装飾や折りたたみのメモ

 
2021/08/05(Thu) Category:日記

Tag: #ブログのこと

今回はブログの記事を書く時に使うブロック装飾の構造や一部を折りたためるCSSコードをメモ的な感じで残してます。
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は違うものを使用すること。
関連記事
 
コメントアイコン Comment0  |  Trackback0

Tag: #ブログのこと

スポンサーリンク:

 
 

Trackback

 

Trackback URL :
この記事にトラックバックする(FC2ブログユーザー)

 
 

Comment

 

    
 
Home | Top ▲
 
最新記事
RSSリンクの表示
カテゴリ
参加ランキング
 

このブログが参加しているランキングです。

良ければランキングバナーのクリックをお願いします。

 
スポンサーリンク
 
 
メールフォーム
 

大きなフォームはコチラ

名前:
メール:
件名:
本文: