アメブロデザインカスタム | WEBデザイナー「スイ」のオリジナルアメブロデザイン -23ページ目

アメブロデザインカスタム | WEBデザイナー「スイ」のオリジナルアメブロデザイン

アメブロデザインを魅力的に♪[アメブロカスタム受付中]

muku様、ご依頼ありがとうございました!

☆製作したアメブロカスタムデザインはこちら☆
http://ameblo.jp/muku1130/

帽子/ストール・雑貨のお店mtgショップ店長muku様のブログ


ショップのご紹介
とってもかわいくてカジュアルな帽子、ストールがメインのネットショップです。
楽天、Yahoo!ストアにご出店されております。

☆mtg楽天店☆
http://www.rakuten.co.jp/mtg/

☆mtgYahoo!店☆
http://store.shopping.yahoo.co.jp/mstyle-mtg/




【声】muku様より制作に関してに感想をお客様の声としていただきました☆
お忙しい中ありがとうございます。

muku様『”スピード感があってまさか2日でできるとは思っていませんでした。
こちらの要望も取り入れていただきプライス的にも満足しています。”

それとスイさんのブログは親切ですし分かりやすい制作説明をされてすぐ入っていけると思います
が私自身基本がわかっていないため時間をかけるほうを選びませんでした』



muku様この度はご依頼ありがとうございました。
また、ブログでの情報交換お願いいたします☆




夜な夜なこんばんは!

スイのオリジナルアメブロテンプレート「Dynamic Monochrome」の制作も大詰め。
今日の作業はフッターを付ける作業を行いました。

早速イメージを添付↓

$アメブロデザインカスタム


このような感じでフッターには
自己紹介?の欄
好きなリンク先の欄
そして新着のツイッターのつぶやき
を表示。

一層、ホームページに近づいたかな?

詳細はデモコーディングをしている下記サイトで御覧いただけます。
Dynamic Monochrome

「Dynamic Monochrome」の特徴のおさらい。

コンセプト

アメブロ専用テンプレートのDynamic Monochromeは大胆なレイアウトと
分かりやすい行間、文字サイズにこだわった、大胆なテンプレートです。

・ヘッダー画像はオリジナルに差し替え可能。
・素敵な背景を12パターン同梱。お好きな背景を選べます。
・カラーパターンは6種類同梱。お好きなカラーでブログを作れます。
・950pxのゆったりレイアウトで、大きく分かりやすいレイアウト。
・透明感ある素材使った、クリアなデザイン。
・シンプルでどんな業種にも適応可能なデザイン。
・フッターエリアを新設。
・最新ツイッターつぶやきの表示。
・Twitter、FaceBookボタン同梱。
・簡易設置マニュアル同梱。
・別途設置代行も可能。
・別途ヘッダー画像も作成代行可能。
・ブログコメント欄にて無償サポートご提供

以上!おやすみなさい^ー^v


今回の投稿中でも使えるCSSチップスは画像へ付ける枠線(ボーダーライン)です。
画像の周りを枠で囲みたい時ありますよね。強調したり目立たせたり、引き立たせる役割で使います。
よく使うものだけ・・をチップス化しました。

使いかたはimageタグの後にclassを入れてあげるだけです。
赤文字の部分を追加。スタイルによってclass名を変えます。


img src="画像URL" class="SuiCssImageBorderBK"



ブラックイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderBK"

CSSへ追加
/*ブラック*/
div.subContents .SuiCssImageBorderBK {
border:solid 1px #000000;
}


グレーイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderGRY"

CSSへ追加
/*グレー*/
div.subContents .SuiCssImageBorderGRY {
border:solid 1px #666666;
}


ライトグレーイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderLGRY"

CSSへ追加
/*ライトグレー*/
div.subContents .SuiCssImageBorderLGRY {
border:solid 1px #D3D3D3;
}


ライトグレードットイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderLGRYdot"

CSSへ追加
/*ライトグレードット*/
div.subContents .SuiCssImageBorderLGRYdot {
border:dotted 1px #D3D3D3;
}


レッドイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderRD"

CSSへ追加
/*レッド*/
div.subContents .SuiCssImageBorderRD {
border:solid 1px #FF0000;
}


オレンジイメージボーダー
$アメブロデザインカスタム


class名
class="SuiCssImageBorderORG"

CSSへ追加
/*オレンジ*/
div.subContents .SuiCssImageBorderORG {
border:solid 1px #FFA500;
}



このようにいくつか作成してみました。
無限につくることができてしまうので、取り急ぎですが、もしこんな色でこんなスタイルのボーダー作って?っというご要望があればコメントください!

よなよなこんばんは。

基本のカスタムを早くまとめたくて作業中です。

これはもう誰でもやっているカスタムですが基本なので簡単にコピペで出来ちゃうように、CSSをまとめておきます。

ヘッダーに画像を入れる前
$アメブロデザインカスタム


ヘッダーに画像を入れた後
$アメブロデザインカスタム


CSS

/*ヘッダー画像*/
#overHeader {
width: 800px;//ヘッダー画像の横幅
height: 300px;//ヘッダー画像の縦幅
margin: 0 0 20px 0;
padding: 0;
background-image: url(http://画像URL);
}


とこのようになります。
赤字部分を直した後、そのままCSSはCSSの編集に追加してもらってOKです!


こちらはSuiオリジナルのテンプレートご購入画面となります。
Paypalによるクレジット決済がご利用いただけます。

現在販売中のテンプレートはこちら。
※7月26日にアメブロのカスタマイズ可能なテンプレートが大きく変更となりました。
その関係でこちらのテンプレートは旧カスタマイズ可能なテンプレートにのみ対応しております。
旧カスタマイズ可能なテンプレートをご利用の方は問題なくお使いいただけます。
ご了承の上、ご購入くださいませ。


「Dynamic Monochrome」
$アメブロデザインカスタム

「Dynamic Monochrome」このテンプレートは二つのライセンスでご購入いただくことができます。
1サイトに使用する場合は1ドメインライセンスをお選びください。

制作会社もしくは開発者様等、商用利用をされる方は商用ライセンスをお選びください。
制作会社様は商用ライセンスを使って、クライアントさま納品用に使っていただくことができます。
個人の場合でも他の複数のブログへ適応する場合は商用ライセンスをご購入ください。

引き続き設置込みキャンペーン中!
通常設置代行が+2100円のところ+1050円と半額です。



ご購入後、購入時決済画面でご入力されたメールアドレスに
テンプレートファイル一式をメールでお送り致します。

ご不明点はお問い合わせくださいませ。