【makeshop】テンプレート「ENKEL」の見出しを左寄せにして少しおしゃれにする方法

ネットショップ作成サービス「makeshop」にはデザイン性も見やすさも良い、ENKELというすばらしいテンプレートがあります。
デフォルトだとトップページの見出しが中央揃えになっていて、装飾がなく少し殺風景なので、左寄せににて少しおしゃれにする方法をご紹介します。

makeshop ENKEL トップ見出しカスタマイズ

見出しを左に寄せる

独自デザイン→共通CSS管理 から

.main-contents h2{
    text-align:center; 
    margin:48px auto;   
    font-size:28px;
}

の記載部分を探し、
text-align:center; の部分をtext-align:left;
に変更後保存を押す。 すると

makeshop ENKEL トップ見出しカスタマイズ2

左揃えになります。

記載部分を探す方法は、macであれば⌘+F、windowsであればcontrol+Fで検索窓が出現するので、キーワード検索ができます。
キーワード検索を使い該当部分を効率的に見つけられます。

下線を引いて装飾する

これでもまだ寂しいので、同じく共通CSS管理から

.main-contents h2 {
    text-align: left;
    margin: 48px auto;
    font-size: 28px;
}

先程編集したの部分に、border-bottom: 3px solid #333; を追記する

.main-contents h2 {
    text-align: left;
    margin: 48px auto;
    font-size: 28px;
    border-bottom: 3px solid #333;
}

そうすると、見出しに下線が引かれます。
INFORMATIONの要素が中央に取り残されたままなので、

.index-news table table td:first-child{
	font-size:16px;
    text-align:right;→leftに変更
    width:35%;→11%に変更
	color:#777;
}

すると、

makeshop ENKEL トップ見出しカスタマイズ3

綺麗に整いました!
makeshopを使っている方は是非お試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です