アイコン、ドロップキャップ、見出し装飾をやってみましょう！
- 練習用固定ページに文章と画像を入れる カラム３：１（2分割）
- 左のカラムに下記の文章を入れてみましょう
知らぬ土地を訪れても、ただ景色を眺め感動するだけではつまらない.短い時間でも共有する話題、共有する感動を口に出してみる。自分の住んでいる地域との比較も時にはいいものです。そんな流れが不思議と他人との距離を狭めることでしょう。景色以外にも楽しみ方はいっぱいあるはずです。
その土地の特色を持つお料理を食べてみる。誰にでもはなしかけてみる。方言にも耳をかたむける。八百屋を覗くとその土地の特産物がわかる。
右のカラムに画像をいれる。・・・・添付した画像を２枚使う
ドロップキャップを入れる・・・style を入れる
カスタムHTMLを使って下記をコピーして貼り付ける
<style>
/*dropcap*/
p.dropcap:first-letter {/*疑似要素first-letter*/
font-size:2.5em; float:left; line-height:1em; padding:0.1em 0.2em 0 0;}</style>
<style>
.big-text {
font-size: 3em; /* 文字の大きさを調整 */
font-weight: bold; /* 必要であれば太字に */
line-height: 1; /* 行の高さを調整して、前後の行と重ならないように */
margin-right: 0.1em; /* 後ろの文字との間隔を調整 */
}
</style>
③高度な設定をする。
最初の文章 知らぬ土地のところにカーソルを置く（段落）左の設定の高度な設定をクロックして
追加CSSのところにdropcapと入力する
今回は下書き保存。従来は保存をクリックする、
①と②と同じように下記の文章を入れてみましょう
画像は添付したものを使ってください。同じように函館市は・・・のところの段落をクリックして
高度な設定 追加CSSにdropcapを入れてみてください。
函館市は北海道南端の渡島半島南東部に位置し、天然の良港である函館港によって 北海道と本州を結ぶ交通結節点、道南の中心都市として発展してきました。2016年3月26日に開業した 北海道新幹線の函館や北海道各地への乗り換え駅となるのが終点・新函館北斗駅です。函館駅までは約18Kmの 距離で、アクセス列車は「はこだてライナー」を利用します。
毎年500万人近い観光客が訪れる観光都市です。室町時代、津軽の豪商河野政通が湾の端に館を築き 形が箱に似ていることから「函館」と呼ばれるようになりました。
◎次はアイコンをやってみます。
①プラグインを入れる Font Awesome ②カスタムHTMLに次のstyle を入れてください
<style>
/*アイコンフォント Font Awesome*/
/*alert*/
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
</style>
③各行の前にアイコンをつけていきます
主なアイコンフォントです。
fa-camera fa-book fa-calendar fa-envelope fa-phone fa-mobile fa-fax fa-home fa-map-marker fa-file-pdf-o fa-file-word-o fa-file-excel-o fa-file-image-o fa-youtube-play
例=クラス『box』の要素の背景色を#aefにしてください=
カスタムHTMLに書き込みます。アイコンはcamera を使ってみます。
<p><i class=”fa fa-camea fa-fw trend”></i> クラス『box』の要素の背景色を#aefにしてください</p>
アイコンフォントを変えて下記２行にもアイコンを入れてみてください
クラス『box』の要素を横に並べてください
クラス『box』の要素を画面中央に表示させてください
◎文字の装飾を行う 下記のstyle をコピー貼り付けする・・・カスタムHTML
<style>
/*Heading装飾*/
.hbottom, .htop, .hleft2{position:relative;}
.hbottom:after {
bottom:-3px;
content: “”;
height:4px;
left:0;
position:absolute;
width:65px;
background:#00A0B0 none repeat scroll 0 0;
}
.hleft {padding-left:5px; border-left:7px solid #00A0B0;}
.hleft2 {padding-left:5px; border-left: 7px solid #00A0B0;}
.hleft2::before {
position: absolute;
left:-7px;
bottom: 0;
content: “”;
width: 7px;
height: 50%;
background-color:#F5DF4D;
}
.htop:before {
content: “”;
height:2px;
left:0;
position: absolute;
top:-3px;
width:30px;
background: #00A0B0 none repeat scroll 0 0;
}
.hleft {border-left:7px solid red;}
</style>
上記のstyle の中で配色が書いてあると思うのですが、探して好みのもののコードを使ってくださって構いません。例題は赤のようです。 hbottom は下に htopは上に hleftは左に 装飾される。 hleft2 （配色が２段）
使い方は自由です。H1の見出しに htop を使っても良いです。□の中に書いてあるのは、高度な設定で追加css に書き込むコードです。
見出しを装飾してみましょう
見出し装飾A補足事項 をクリック、右の設定から高度な設定 追加CSSの欄に hbottom
保存（下書きの場合は下書き保存）を忘れないように。
上記を参考にしてやってみてください。
2025.12.25 安部記
