ウェブ制作のクラウドビジネスをはじめよう！

TIPS BLOG アーカイブ

配信日：2015年7月14日

「画像+タイトル+テキストユニット」の画像にテキストを回りこませるカスタマイズ方法

今回は「画像+タイトル+テキストユニット」の画像にテキストを回りこませるカスタマイズ方法をご紹介いたします。

ユニットのカスタマイズにはスキンのCSSファイルの変更が必要となります。CSSファイルの変更方法は2通りあります。一つはサーバー上のCSSファイルを直接編集しアップロードして変更する方法。もう一つはbingo!CMSの機能「スキンのCSSファイルを編集する」を使用し、CSSファイルを編集、変更する方法となります。今回は、「スキンのCSSファイルを編集する」機能を使用したカスタマイズ方法をご紹介いたします。

直接サーバー上のスキンのCSSファイルを変更しカスタマイズする場合は下記のスキンカスタマイズ方法を参考に該当するCSSファイルの変更を行ってください。

テンプレート管理画面テンプレート管理画面
ここではPC用スキン「PC7-PN-01-6」のカスタマイズをモデルに説明いたします。
スマートフォン用スキンのカスタマイズ方法も「テンプレート管理」にてスマートフォン用テンプレートを選択することで同様に可能です。

bingo!CMS管理画面にログイン後、上部メニュー「テンプレート管理」をクリックします。
次に該当するテンプレートのチェックボックスにチェックを入れ「テンプレート編集」プルダウンメニューより「スキンのCSSファイルを編集する」を選択します。
CSS編集画面CSS編集画面
ポップアップ画面にて『CSS編集画面』が開きました。
『CSSファイル一覧』の「CSS」→「units」→「bImgTtlTxt.css」を順番にクリックしていきます。
右側『CSS表示エリア』に「bImgTtlTxt.css」ファイルに記述されている内容が表示されます。
CSS編集画面CSS編集画面
下記、スキンカスタマイズ方法を参考に『.bImgTtlTxt .bImgTtlTxtLeft』と『.bImgTtlTxt .bImgTtlTxtRight』の値を変更し、「保存」ボタンをクリックします。保存完了後『CSS編集画面』を閉じてください。
これで、「画像+タイトル+テキストユニット」の画像にテキストを回りこませるカスタマイズが完了いたしました。

最後にプレビュー画面、公開画面にてユニットの表示確認をし完了となります。


■ PC向けスキンカスタマイズ方法

対象CSS
/usr-data/template/スキン名/css/units/bImgTtlTxt.css

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
24行目〜
margin-right: 20px;を追加する
※ margin-rightの値はスキンにより変わります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
《オリジナル》
.bImgTtlTxt .bImgTtlTxtLeft {
width: 40%;
}
↓
《変更後》
.bImgTtlTxt .bImgTtlTxtLeft {
width: 40%;
margin-right: 20px;
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
34行目〜
marginとpaddingの値を0にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
《オリジナル》
.bImgTtlTxt .bImgTtlTxtRight {
margin: 0 0 0 40%;
padding: 0 0 0 20px;
}
↓
《変更後》
.bImgTtlTxt .bImgTtlTxtRight {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

 
■ スマートフォン向けスキンカスタマイズ方法

対象CSS
/usr-data/template/スマートフォン用スキン名/css/units/bImgTtlTxt.css

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
24行目〜
margin-right: 10px;を追加する
※ margin-rightの値はスキンにより変わる場合があります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
《オリジナル》
.bImgTtlTxt .bImgTtlTxtLeft {
width: 40%;
}
↓
《変更後》
.bImgTtlTxt .bImgTtlTxtLeft {
width: 40%;
margin-right: 10px;
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
27行目〜
paddingの値を変更する
※ paddingの値はスキンにより変わる場合があります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
《オリジナル》
.bImgTtlTxt .bImgTtlTxtLeft p.imgCap {
margin: 0;
padding: 5px 0 0 0;
font-weight: normal;
text-align: center;
line-height: 1.4em;
}
↓
《変更後》
.bImgTtlTxt .bImgTtlTxtLeft p.imgCap {
margin: 0;
padding: 5px 0 5px 0;
font-weight: normal;
text-align: center;
line-height: 1.4em;
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
34行目
marginとpaddingの値を0にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
《オリジナル》
.bImgTtlTxt .bImgTtlTxtRight {
margin: 0 0 0 40%;
padding: 0 0 0 20px;
}
↓
《変更後》
.bImgTtlTxt .bImgTtlTxtRight {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
 
 
以上、「画像+タイトル+テキストユニット」の画像にテキストを回りこませるカスタマイズ方法となります。

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ