【wordpress制作事例】自社著作権フリー音楽サイト、ロゴ付きおしゃれ1カラムデザインにリニューアル

今回は、先日行った自社コンテンツリニューアルの話題をお届けします。 ちょっとデザインが古臭くて気になっていましたが、最近の技術力やセンスでリニューアルしてみました。さっそくポイントをみていきます。

対象のサイト『SSフリーミュージック』

管理人が2016年くらいに作った自社運営の著作権フリー音楽サイトです。構築はwordpressで、もとのテーマは、stinger改造版だったと思います(管理人のブログがstinger改造版だから、それをFFFTPでコピーした)。

最近バナーやロゴがちょっと古いかな～と気になっていました。 (実際、ユーザーからの見た目や操作感だけではなく、管理者の更新モチベーションにもつながります)

リニューアル結果

というわけで、このような形になりました。以前のバージョンより、かなりモダンな、最近のコーポレートっぽい感じになったかと思います。

著作権フリー・無料音楽素材サイト　ssフリーミュージック https://ss-freemusic.sounds-stella.jp

リニューアルのポイント

トップ1カラムレイアウト採用(下層ブログページは2)

WPテーマにある機能『トップページでは、記事でなくフロントページセクション部分出力』です。具体的には『ヘッダーの大きい画像・カテゴリーや詳細ページに飛ばすバナー・このサイトについて』みたいな部分です。 ここら辺は、ロゴ画像をアップすると、中央の画像に重なってしまったりと、挙動が難しい部分があります。しかし・・・

親テーマに『ribbon_section.php（このフロントページなどを出力するプログラム）』があるので、ここをカスタマイズすることにより、ほぼ自分の好みに変えることが可能です。 『中央の大きい画像を変える機能が、wpのカスタマイザーになくて変わらない』などの場合も、『functions.phpなどでdefault-header-image（もともとのヘッダー画像）が指定されていたりする』ので、ここを書き換えればかわります。

ロゴもしっかり作りこもう！印象が変わる！

あと、取り入れたのはサイトロゴです。以前のバージョンでは、ヘッダーの大きい画像に適当な洋物フォントで打っただけでした（それゆえゆるい雰囲気だった）。新しいバージョンでは、専用のロゴを制作しました。

ロゴは、一部を切り取ってファビコンにしたり、snsでシェアしてもらったときの画像に使うなど、戦略の幅が広がります。

ボタンは画像に文字入れしたタイプから、ＣＳＳだけで作ったタイプへ

目立たない部分ですが、変えたのはボタンもです。以前は画像に文字入れしたものでしたが、フォントが変わっていたので『統一感がない』とう欠点がありました。ＣＳＳでボックスにしてボタンにしました。フォントがバラバラにならないので統一感がでます。

あとがき

というわけで、wordpressでリニューアル事例でした。デザインがイイ感じになったので、著作権フリー曲のアイデアも、かなり沸いてきています。こんごも楽曲を追加して、動画やお店・ダンスやDJやってる方々のお役に立てるようにしたいです。

著作権フリー・無料音楽素材サイト　ssフリーミュージック https://ss-freemusic.sounds-stella.jp