bingo!CMS TIPS BLOG
2015年07月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;
}



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

2015/07/14 12:31 | デザイン&レイアウト