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

      2020/07/15   1518文字

今回は、先日行った自社コンテンツリニューアルの話題をお届けします。

ちょっとデザインが古臭くて気になっていましたが、最近の技術力やセンスでリニューアルしてみました。さっそくポイントをみていきます。

対象のサイト『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でシェアしてもらったときの画像に使うなど、戦略の幅が広がります。

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


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

あとがき

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

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


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)
【WordPressサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る
WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法
サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)
【wordpress制作事例】自社著作権フリー音楽サイト、ロゴ付きおしゃれ1カラムデザインにリニューアル
ワードプレスサイト・スマホ対応・SSL事例~『仙台国分町の馬刺し・馬肉料理店 馬いものきふくさま』
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い