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

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

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

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

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

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

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

<div class=”wrap-content zerogrid”>

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

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

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

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

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

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

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

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

こんな感じですね。

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

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

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