webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2020/07/15

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

対象のサイト『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サイト制作事例
【タグ】 -

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう

今回は、以前にちょっとお仕事で扱った、『ログインした会員が、コン ...

WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト

今回は、(twitterにもちょっと書いたんですけど)管理人が、 ...