Cyfonsのテンプレートmusic3をカスタマイズしてみた

cyfons music3のカスタム

メールマガジン発行にCyfonsを愛用しています。このツールは会員サイトもカンタンにかっこ良く見せることが出来るので非常に気に入ってます。

最近Cyfonsのテンプレートで「music3」というものを採用しようと思ってます。こんな感じ。

cyfons_music3custom1

カッコイイですよね?でもコンテンツの部分が透けているのですが、もう少し透け具合を抑えたほうが文字が読みやすいかなと思ってカスタマイズしました。手順をスクショしたので参考にして頂ければ。

スポンサーリンク

Google Chromeの「要素を検証」を押す

cyfons_music3custom2

Chromeは右クリックを押すと上図のように「要素の検証」というメニューが出ます。これをクリックしましょう。

cyfons_music3custom13

 

すると上図のようなものが出てきます。その中でも左側にある

<div class=”wrap-content zerogrid”>

というものをクリックして下さい。

cyfons_music3custom3

上図のやつです。すると、
cyfons_music3custom6

右側にこんなやつが出ると思います。この中の(0, 0, 0, 07)という部分の「0.7」という部分を修正すれば背景色が濃くなります。(これは修正後で、デフォルトでは0.4という数値だったと思います。)

ではFileZillaやFFFTPでCyfonsのフォルダの中から「add.css」を編集しましょう。

Cyfons

ドメイン名/public_html/freemember/template/music3

というフォルダに入ってるはずです。任意の場所にダウンロードして、テキストエディタで開いてください。

 

cyfons_music3custom8

⌘F、あるいはControl+Fで検索窓を出し、「wrap-content」と検索すると該当の部分が出るはずです。

 

cyfons_music3custom9

上図の用な感じ。この中で(0, 0, 0, 0.4)という部分を0.7くらいにしてみましょう(ちなみに1にすると真っ黒になります)

cyfons_music3custom10

こんな感じですね。

add.cssを上書き保存

cyfons_music3custom11

編集できたらファイルを上書き保存して、Cyfonsの前述の

  • ドメイン名/public_html/freemember/template/music3

という部分にアップロードします。上図のように「上書きしますか?」と聞かれるので上書きして下さい。

背景色がやや黒くなった!

変更前

cyfons_music3custom1

変更後

cyfons music3のカスタム

いかがでしょうか?微妙な違いなのですが、デフォルトだとやや文字がチカチカして見えづらいので、メリハリを付けてみました。

cyfons music3のカスタム

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。