GOMA(ゴーマ)の休日2017年京都胡麻(ごま)に移住、田舎暮らしを提案するデザイン事務所GOMA(ゴーマ)クマさん(夫)とキノコ(妻)。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。(ゴーマ)】くまさん(夫)ときのこ(妻)のユニット。京都胡麻(ごま)に移住して、新しい田舎暮らしを提唱するGOMA(ゴーマ)を立ち上げました。ゲストハウス経営とサイクリングツアーをはじめとしたアウトドアアクティビティ、ウェブデザイン、デジタルマーケティング、ドローンフォトグラファーなど多業を行なっています。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。Zwiftでヴァーチャルライド中心にロードバイクを楽しんでいます。Higashiura(https://gomanote.com/)」。2019年夏からマラソン挑戦に続き2020年からトライアスロン挑戦。作業内容GOMAでのweb案件の実例クライアントのリクエスト作業内容グローバルメニューにSNSアイコンを入れたいHTMLCSSボタンのカラーを変えたい作業内容フッターエリアに「youtube」のアイコンを入れたいHTML特定ページのフッタースライダーを消したいCSSテンプレートを利用した固定記事にyoutubeの画像を埋め込みたいHTMLyoutube動画レスポンシブCSS記事01のカスタムCSS記事02のカスタムCSS記事03のカスタムCSSまとめwordpressによるコーポレートサイトを作ろう!くまさん僕のwordpressによるコーポレートサイトの作り方を伝授します!プロフィールを見ていただければわかりますが、僕はwebもやるデザイナーです。いえ最近の案件の中心はwebサイト構築が多く、そのほとんどがwordpressを利用したコーポレート(会社)サイトの構築です。今回は、「wordpressを利用してテーマをカスタマイズして納品する」という実際にあった案件を通して、個人事務所のweb制作においてどういう風にwordpressによるコーポレートサイトが完成するのかを実録で紹介しようと思います。具体的な作業について挙げていきますので、wordpressのテーマのカスタマイズ方法などで参考になると思います。デザイナーの友人、という具合にミニマムで行っています。きのこチームGOMA(ゴーマ)と名乗っています。今回の案件でどう言った作業を行ったかを、wordpressのカスタマイズ作業をメインにご説明します。今回のクライアント様はデザイン事務所。Aデザイン様と仮にしますね。Aデザイン事務所はデザインのみでweb制作は行っていません。Aデザイン事務所が企業のホームページ制作案件を受注して、デザインは行い、webの構築部分はGOMA(僕の事務所)に発注しています。今回のリクエストはコスト削減のためにwordpressのテーマを利用し、それをカスタマイズしての納品です。サーバーは先方が用意したAWS(アマゾンウェブサービス)を利用し、テーマをインストールされた状態からのスタートです。記事を書くのは企業の方ができますので、僕はクライアントであるデザイナーさんの理想をサイトに反映させるのがミッションとなります。GOMAでのweb案件の実例wordpressのテーマ、特に僕が感心するのが「TCD(株式会社デザインプラス)」のテーマです。元からデザインがきっちりしてて、レスポンシブにも対応。管理画面も使いやすい。昔はサイトを作る時基礎設計から全部やってたのですが、そのせいもありコストが大幅にかかっていました。現在は、基礎設計とデザインをテーマにすることにより大幅にコスト削減ができるようになりました。余談ですが、僕がweb制作を始めた2000年代前半は、20年後は全ての人がキーボードとマウスを駆使してパソコンを使いこなす時代になると考えていました。ところが、スマホの台頭で今や家にパソコンがない家庭も当たり前、若い世代はワードやエクセルはおろかキーボードすら触ったことがない子も多く、パソコンは本当に開発者のためのものになっちゃいました。くまさん今やスマホがアクセスの過半数をはるかに超える現実。クライアントのリクエスト話を戻して今回の作業から、今回ご紹介する内容を抜粋しました。(本当はもっと作業があります)もちろん作業の前には「子テーマ」を設定しています。子テーマについてはこちらの記事をどうぞ。wordpressの子テーマの作り方って理解できてますか?くまさん僕は最初まーったく理解できませんでした。上の画像は今回カスタマイズするTCDテーマ「KADAN」のデモサイトです。グローバルメニューがありますが、この部分に「フェイスブック」「インスタグラム」「youtube」のアイコンを入れて欲しい、とのリクエスト。通常、wordpressのメニューは「外観」>「メニュー」から設定するのでテキストデータしか入りません。力技でソース改変も考えましたが便利なプラグインがありました。easily.ja.wordpress.orgプラグインインストール後、メニューの設定で画像のアップロードができるようになります。「メニュー画像」から画像を設定します。画像はpngデータを使えば透過を使えますので今回はそうしています。そのままでは「画像サイズ」を選んでもオーバーサイズになってしまうので、該当するCSSを書き換えて高さと位置を揃えています。5.55556%!important;}}}メニューに自動で振られるIDに対してCSSで制御を入れています。各アイコンの高さを20pxに設定しているのとpaddingの調整、レスポンシブで画面幅が991px以下になった時はメニューがスマホ専用になるので、再びpaddingを調整しています。PCスマホ透過PNGで作成したSNSアイコンが、PCとスマホのメニューにちゃんと表示されました。ボタンのカラーを変えたいクライアントのデザイン事務所からは、デザインデータをPDFデータでいただいています。ボタンのカラーなどは既存のテンプレートから変更されていますので、そのカラーをCSSで反映させます。作業内容PDFの画面をスクリーンショットでキャプチャして、フォトショップで開くスポイドツールで該当箇所の色を拾うwebカラーを確認してCSSに落とし込むこの流れでデザインデータのカラーを正確に再現できます。最下段の#の場所がwebカラーです。6桁の16進数で表示されます。フッターエリアに「youtube」のアイコンを入れたいデモサイト、フッターエリア上記はデモサイトのフッターエリアです。ソーシャルのアイコンが並んでいますが、youtubeがありません。今回使うアイコンはフェイスブック、インスタグラム、そしてyoutube。表示は管理画面から制御できるので、不要なアイコンは消すことができますが、ないものは作るしかありません。アイコンはグローバルメニュー用で作っていますが、色が白だったので黒でもう一つ作成。該当箇所のソースを改変します。?></ul>カスタマイズ後youtubeのアイコンが入りました。特定ページのフッタースライダーを消したいTCDテーマ「KADAN」フッターTCDのテーマ「KADAN」には、フッターエリアに記事のスライダーが入る仕様となっています。このスライダーを特定の記事のみ消したいというリクエスト。該当箇所をデベロッパーツールで探します。Chromeデベロッパーツールソースがわかったら該当箇所を制御しているクラスを探します。class=”p-footer-slider”>の部分です。TCDのテーマには、記事の投稿画面に「カスタムCSS」を設定できるところがあります。カスタムCSSこれは、該当記事のみに適応できるCSSです。今回はこれを利用します。none;}これでフッタースライダー部分のみ、この記事では非表示になります。「KADAN」の固定ページには、あらかじめ用意されたカスタム投稿枠に、画像やテキストを流すだけで美しい仕上がりになる「テンプレート」機能があります。リクエストは、このテンプレートを利用して3種類の固定ページを作り、それぞれ縦書きの説明部分の下にyoutubeの埋め込み動画を入れること。これを再現するにはいくつかの合わせ技を使います。該当のテンプレートファイルを解析し、ファイル名は「page-type5.php」ということがわかりましたので、動画を挿入したい場所にコードを挿入します。テンプレートは1種類、それを利用して3種類の固定ページを作り、それぞれに違う動画を入れるとなるとそのままでは不可能です。そこで、先ほどのカスタムCSSを合わせて利用します。-->テンプレートの該当箇所に、3種類のyoutube動画を埋め込みます。それぞれに「temp-01」「temp-02」「temp-03」のクラスも設定しておきます。動画をレスポンシブ化するために以下のCSSを記述。100%;}次に、表示を制御するCSSを各記事のカスタムCSSに記述します。none;}これで、表示している記事以外の動画が画面に表示されなくなるので、結果として該当の動画のみが画面に表示されるようになります。まとめいかがでしたか?テンプレートのカスタマイズをどんな風に行なっているかを、かなり具体的に紹介してみました。僕はプロとして、デザイナーさんからの要求に可能な限り「できない」と言わないよう心がけています。昔はデザイナーから上がってきた画像を、Fireworksのスライスツールでテーブルレイアウトにしてそのまま利用したりしていましたが、いつの間にやら時代はwebプログラム優先になっていたと思います。これからwebの世界は本当の意味で「デザイン」が大事になると思います。プロダクトデザインなど、人が普遍的に「美しい」と感じるものが、もっと価値を持つ時代がくるのではないでしょうか。パソコンに光回線が来たように、スマホに5Gがやってくることで容量の束縛から解き放たれて、良い意味で「なんでもあり」の時代が来ると思います。くまさんGOMAはどこまでも時代を追い続けます!GOMAデザインもっと楽しく伝わる「カタチ」をつくりませんか。京都を中心に、ローカルでビジネスを行う中小企業や団体に着目したホームページ制作会社です。地元を元気にするページづくりを心がけます。ウェブのちょっとしたことから、ウェブ制作・リニューアルまで、お話をじっくり聞いて最善の選択ができるようご提案しています。くまさんの10年以上のデザイナー歴で獲得したノウハウと、東京、大阪で磨いたきのこのマーケター視点から見た最新のトレンドで、印刷物、web、広報、SNSを「どうやって使って成果に結びつけるか」まで、責任を持ってお手伝いします。関連記事デザイン&マーケティング田舎で創業するか、いまの暮らしを続けるか、それが問題だ。こんにちは、GOMAきのこです。京都の田舎南丹市で移住を機に夫と2人でGOMAという会社を立ち上げました。自分の中ではとても自然な流れのように感じています。今回はホテルを営んでおられるクライアントさんからのご依頼で、サイトのリニューアルおよび自社サイトの中で稼働する予約...2018.02.23デザイン&マーケティングユーザー目線でホームページをリニューアルしました。こんにちは、くまさんのマネージャーきのこです。GOMA(ゴーマ)のオフィス兼ゲスト...2018.05.13デザイン&マーケティングハンバーグに釣られて「新規顧客開拓」をお手伝いした話。こんにちわ!今回は京都亀岡で20年目を迎える和食居酒屋さんのご依頼で、チラシを作成したお話をきのこがお送りします。こんにちわ!GOMAくまさんの妻きのこです。僕は最初まーったく理解できませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【癒しのジョシカツ】朝ヨガの会はじめます。【フリーランス限定】ウェブ制作合宿プラン作りました。暮らすGOMAってこんなことしてます。暮らすGOMA(ゴーマ)は、京都丹波と呼ばれる南丹市日吉町胡麻にある、里山をベースとした遊びのある新しい暮らしのあり方を提案するプロジェクトチーム。主軸は、サイクリングツアー(遊ぶ)、Web制作(働く)、移住体験(暮らす)の3サービス。僕たちに会いに来てください。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。www.goma.life【GOMAサイクリングツアー】GOMAと一緒に走りましょう。GOMAサイクリングツアー│京都の里山を走ろうGOMAサイクリングツアーは京都の里山を楽しむ体験型アクティビティ。初心者歓迎、ツアー詳細、ご予約はこちらから。【癒しのジョシカツ】朝ヨガの会はじめます。【フリーランス限定】ウェブ制作合宿プラン作りました。暮らすGOMAってこんなことしてます。暮らすGOMA(ゴーマ)は、京都丹波と呼ばれる南丹市日吉町胡麻にある、里山をベースとした遊びのある新しい暮らしのあり方を提案するプロジェクトチーム。主軸は、サイクリングツアー(遊ぶ)、Web制作(働く)、移住体験(暮らす)の3サービス。僕たちに会いに来てください。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。心静かに自分を見つめる場所、胡麻にある古民家離れのお宿。www.goma.life【GOMAサイクリングツアー】GOMAと一緒に走りましょう。GOMAサイクリングツアー│京都の里山を走ろうGOMAサイクリングツアーは京都の里山を楽しむ体験型アクティビティ。初心者歓迎、ツアー詳細、ご予約はこちらから。初心者向け子育て田舎暮らし。