wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@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

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

メールアドレスが公開されることはありません。

  関連記事

サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜ …

ワードプレスサイト・スマホ対応・SSL事例~『仙台国分町の馬刺し・馬肉料理店 馬いものきふくさま』

今回は、管理人が最近力を入れている、『ワードプレス・スマホ対応・SSL』 …

サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜ …