前回作成したものを改良しました
画像の間に余白をつくる
前回作成したCSSでは画像の間に余白ができなかったので，Web上の情報を色々調べました。調べる中で，justify-contentタグはtemplate-flexクラスの方に入れないといけないようだったので修正し，gapタグを入れたところ余白ができました。
横幅を分割をするクラスを変更
前回作成したCSSでは２分割用と３分割用の2種類のクラスを用意したのですが，分割した領域の幅の指定をwidthタグからflexタグに変更したところ，クラスが1つでどちらにも対応できるようになりました。
画像2分割テンプレートです
画像3分割テンプレートです
デフォルトテンプレートも書き替えました
今回作成したCSSの2つのクラスでデフォルトテンプレートもできそうだったので作成しました。
前回チェックしていなかった画像アップローダで画像を挿入するときに設定できるキャプションも確認しました。
画像を挿入した後，ソース表示にしてbc-captionタグの中にあるstyle=”width:640;”を削除するとレイアウトもキャプションもしっかり表示されました。
これは左画像，右テキストのテンプレートです
この記事へのコメント
コメントはまだありません。
コメントを送る