wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/07/15

こんにちは、管理人@SS_mshpです。

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

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

対象のサイト『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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

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

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

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

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

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

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

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、 ...

WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる

今回は、管理するサイトが増えてきて、『id/pass管理めんどく ...

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)

WordPress・twenty seventeenテーマ改造で、ファンクション名変更と整理・ファイル削減などを行っていたら出たエラー(カスタマイザープレビューが表示されなくなった)に対処。

【オリジナルWPサイト】スターターテーマ(underscores)&フレームワーク・Materializeでオリジナルデザインに

今回は、wordpressオリジナルデザインカスタマイズによく使 ...