BLOGはじめました😀 本記事にはアフィリエイト広告が含まれています。
Bloggerでブログを始めてみましたが文字を書くしか使い方がわからないのでシンプルな感じでページが出来上がって来ます。そろそろブログを進化させたいと思い、HTMLとかCSSとか全くわかりませんが色々なサイトを参考にしてテスト的に目次などを作ってみまた。Bloggerでもこんな事できるぜぃというのを発信していきます。
という事で、サンプルのコードなどを共有していきます。 Bloggerを盛り上げていきましょう！！
目次を作る
上の目次はこのコードで作成しています
<div style="background-color: #f3f3f3; border: 1px solid rgb(136, 136, 136); padding: 20px;">
<div><label><span style="font-size: large;">目次</span></label>
<ol>
<li><a href="#toc1" tabindex="0">目次</a></li>
<li><a href="#toc2" tabindex="0">枠線</a></li>
<li><a href="#toc3" tabindex="0">吹き出し</a></li>
<li><a href="#toc4" tabindex="0">仕切り線</a></li>
<li><a href="#toc6" tabindex="0">まとめ</a></li>
</ol>
</div>
</div>
<br />
飛びたい先には下記のコードを入れましょう。"toc数字”を目指してジャンプしていくようです。
<h2><span id="toc1">目次</span></h2>
<h2><span id="toc2">枠線</span></h2>
<h2><span id="toc3">吹き出し</span></h2>
<h2><span id="toc4">仕切り線</span></h2>
<h2><span id="toc6">まとめ</span></h2>
枠線を入れる
こちらのサイトを参考にさせてもらってます👇
HTMLコード詳細はそちらを御覧ください
<fieldset style="border: 1px solid rgb(255, 102, 153); font-size: 100%; padding: 20px;">
<legend>タイトル</legend>タイトル付き四角のピン角♪</fieldset>
＊タイトル
タイトル付き四角枠２
<div style="background: rgb(255, 192, 192); border-radius: 5px 5px 0px 0px; color: white; display: inline-block; font-weight: bold; height: 1.5em; line-height: 1.5em; margin: 0em; padding: 0px 0.5em; position: relative; text-align: center; top: 3px;">＊タイトル</div>
<div style="background: rgba(255, 255, 255, 0); border-radius: 0px 5px 5px; border: 3px solid rgb(255, 192, 192); font-size: 100%; padding: 20px;">タイトル付き四角枠２</div></div>
四角のピン角
<div style="border: 1px solid rgb(255, 182, 193); font-size: 100%; padding: 20px;"> 四角のピン角 </div>
四角の塗りつぶし
<div style="background: rgb(252, 239, 242); border-left: #fceff2 solid 10px; border: 1px solid rgb(252, 239, 242); font-size: 100%; padding: 20px;"> 四角の塗りつぶし</div>
灰色枠 影付き
<div style="background: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); box-shadow: rgb(221, 221, 221) 0px 2px 3px 0px; font-size: 100%; padding: 20px;"> 灰色枠 影付き</div>
四角二重線
<div style="border: 4px double rgb(255, 102, 153); font-size: 100%; padding: 20px;"> 四角二重線</div>
太線枠丸角
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 3px solid rgb(255, 102, 153); font-size: 100%; padding: 20px;"> 太線枠丸角</div>
２重線枠＋塗りつぶし
<div style="background-color: #fceff2; border: 4px double rgb(255, 102, 153); font-size: 100%; padding: 20px;">２重線枠＋塗りつぶし</div>
文字数に合わせて枠線のサイズを変更する⇨<div style="の後にdisplay:inline-block;のコードを追加します
吹き出し
左向き吹き出し
<div style="border-radius: 10px; border: 2px solid rgb(204, 204, 204); display: inline-block; font-size: 100%; margin: 1em 0px 1em 20px; padding: 20px; position: relative;"><span style="border-bottom: 15px solid transparent; border-right: 15px solid rgb(204, 204, 204); border-top: 15px solid transparent; display: block; height: 0px; left: -15px; position: absolute; top: 20px; width: 0px;"></span>左向き吹き出し<span style="border-bottom: 15px solid transparent; border-right: 15px solid rgb(255, 255, 255); border-top: 15px solid transparent; display: block; height: 0px; left: -12px; position: absolute; top: 20px; width: 0px;"></span></div>
右向き吹き出し
<div align="right"> <div style="border-radius: 10px; border: 2px solid rgb(204, 204, 204); display: inline-block; font-size: 100%; margin: 1em 20px 1em 0px; padding: 20px; position: relative;"><span style="border-bottom: 15px solid transparent; border-left: 15px solid rgb(204, 204, 204); border-top: 15px solid transparent; display: block; height: 0px; position: absolute; right: -15px; top: 20px; width: 0px;"></span>右向き吹き出し<span style="border-bottom: 15px solid transparent; border-left: 15px solid rgb(255, 255, 255); border-top: 15px solid transparent; display: block; height: 0px; position: absolute; right: -12px; top: 20px; width: 0px;"></span></div></div>
左向き背景色付き吹き出し
<div style="background: rgb(238, 238, 238); border-radius: 10px; font-size: 100%; margin: 1em 0px 1em 20px; padding: 20px; position: relative;"><span style="border-bottom: 15px solid transparent; border-right: 15px solid rgb(238, 238, 238); border-top: 15px solid transparent; display: block; height: 0px; left: -15px; position: absolute; top: 18px; width: 0px;"></span>コメント入れる</div>
左向き背景色付き吹き出し 文字長さにあわせる
<div style="background: rgb(238, 238, 238); border-radius: 10px; display: inline-block; font-size: 100%; margin: 1em 0px 1em 20px; padding: 20px; position: relative;"><span style="border-bottom: 15px solid transparent; border-right: 15px solid rgb(238, 238, 238); border-top: 15px solid transparent; display: block; height: 0px; left: -15px; position: absolute; top: 18px; width: 0px;"></span>コメント入れる</div>
参考にさせてもらったサイト(囲み線と同じです）👇👇👇
仕切り線を入れる
簡単に入れれるコードがあります。
<hr />
コレを書き込めば線が出てきます。
参考にさせてもらったサイト
まとめ
Bloggerでも色々できますね。これからも進化させて行きたいと思います。
参考にさせてもらったサイト
その他の記事もよろしくお願いします⇨サイトマップ
バイバイキーン
コメント