【STORK】1日で確実に終わらせる初期設定カスタマイズ

 

こんばんわ!

福岡県で飲食店を経営している丸窓店主です!

 

僕の飲食店のホームページも『ワードプレス』と『STORK』で作成しておりまして、このサイトは記憶障害で忘れっぽい自分の為に2017年の8月から運営していた、飲食店とは全くの別サイトになります。

色んな人の記事をパクリまくりながら記事を書き、書くことによって己の記憶に刻み、あわよくばアフェリエイトで小銭でも稼ごうとしてたんですけど、そんな情熱は遠い過去の産物です。

実際は幾らか稼げてはいたのですが(ホント雀の涙ほど)もうその収入管理すら面倒くさくなってきて、1年ほど放置して確定報酬の確認もしないまま全捨てしました。二度とアフェリエイトはやりません。面倒くさがりやの僕には完全に向いてないです。

おかげさまで、自分で満足できる程度のワードプレス知識は付きましたし、これ以上『ワードプレス関連の記事を書きたい』という意欲が微塵も出てきやしません。

最終的に『放置してても独自ドメイン料が勿体ないから、もう店のサブドメインに移行しとくか』という流れで、今回晴れて島流しする事になりました。

『もう全部消しちまうか』とも思いましたが、せっかく2年弱に渡って書き続けた記事なんで、ちゃちゃっと再編集して残しときます。誰かのなんかの役に立てば幸いです。

 

 

STORKとは

『STORK』とは有料で販売されているワードプレステーマの1つです。STORK以外にも『賢威』『SANGO』など色々あるので、興味がある方は自分に合った有料テーマを探すのも面白いと思います。もちろん無料テーマもいっぱいあります。

飲食店のサイトも、この【丸窓のワードプレスメモ】も、全てワードプレスのSTORKで作成してます。

もちろん無料のテーマでもサイトは作れますが、僕はあまりおすすめしません。サイトを理想の形にするまでには途方もない時間と労力がかかるからです。

『サイトならなんでもいいや』って方なら無料で充分ですけど。

STORKを含む『有料テーマ』ってのは素人には用意できない便利な機能を、頭のいい人たちが事前にプログラミングしてくれてるってヤツですね。そのプログラム料金としてお金を払うワケでございます。

これはたまねぎ剣士がいきなりオニオンソードを手にするようなもので、ド素人が無料テーマでコツコツ作るより、断然早く本格的なホームページが作れます。

【ピアノ】ファイナルファンタジー3・ボス戦(バトル2)

 

【必読】カスタマイズを始める前に

どんなワードプレステーマを使うにしても『最初に必ずやらなくてはいけない事』が存在します。

それが『子テーマの導入』と呼ばれるものです。

もし親テーマが壊れたら素人による修復はほぼ不可能だから、事前に影武者を用意しとこ!』って事です。

子テーマは完全無料配布なので仮想通貨で全てを失った方も安心して導入できます。もし導入しなければ以下の様なデメリットに襲われる可能性があるので要注意。

 

カスタマイズミスの危険性

親テーマでのカスタマイズミスは許されません。

僕も実際に大事なプログラムをいじくってワードプレスにログインできなくなりました。復旧にかなりの労力と涙と男と女が必要になりますので、必ず子テーマを導入しましょう。

 

カスタマイズ初期化の危険性

『僕はおりこうさんだからプログラムなんてイジくらないもーん』

と危機感ゼロの浅はかな考えを持ってしまった方に朗報です。

親テーマのアップデート時に全て初期化する可能性があります。

命を削って頑張った何十時間が無に帰すという意味です。

ところがどすこい子テーマのカスタマイズは消滅しません。

ここまで言って導入しない方はアホの坂田より数段アホです。

などと供述しておりますが、僕も親テーマでカスタマイズしてた黒歴史を持つ坂田チルドレンの1人。

初心者の頃は何の知識もなく突き進むしか無かったため、子テーマの存在なんて知るワケがありません。1ヵ月過ぎて気づいた頃には時すでにお寿司。急いで導入したものの、親テーマのカスタマイズは子テーマに反映されません。

要するに同じ作業を1から全部やり直しって事です。

もし一度だけ過去に戻れるとしたら、あの日の自分を思いっきりビンタしてから競馬に行こうと思いました。

 

子テーマの導入方法

親テーマをインストール

STORKを使いたいのであれば購入必須です。

下の画像をクリックすればSTORK購入画面に移動できます。ちなみに僕はSTORK販売員の手先ではない(アフェリエイトではない)ので安心してクリックしてください。

 

 

購入が終わると『jstork.zip』という名のzipデータが取得可能になりますのでパソコンにダウンロードしてください。これがSTORKの親テーマです。

ダウンロードが完了したら次は『jstok.zip』をワードプレスにインストールします。武器は装備しないと使えないってドラクエの商人も言っている様に、ワードプレステーマも装備しないと使えません。

インストール手順
【ダッシュボード・左メニュー・外観】【テーマ】【新規追加】【テーマのアップロード】『jstork.zip』を指定して【インストール】

この手順が分からないならもう諦めてください。

 

子テーマをインストール

親テーマのインストールが終わったら【STORKの子テーマ配布ページ】に移動してください。

リンクに飛ぶといくつか子テーマが表示されます。

『STORK用・jstork_custom.zip』をパソコンにダウンロードし、親テーマと同じ手順でワードプレスにインストール。

インストール手順
【ダッシュボード・左メニュー・外観】【テーマ】【新規追加】【テーマのアップロード】『jstork_custom.zip』を指定して【インストール】

 

子テーマを有効化

親子2つのテーマのインストールが完了したら、最後に必ず『jstork_custom』を有効化してください。

上図左・オレンジ部分に【有効:stork_custom】と表示されている事を確認してください。ここで親テーマを有効化しては何の意味もありません。

 

 

STORKの初期カスタマイズ開始

子テーマを有効化した直後のサイトへアクセスしたら上図の状態。

あまりにも貧相すぎて課金してあげたくなるレベル今からこのノッペリしたサイトを適当にいじってパワーアップさせていきます。

【ダッシュボード・左メニュー・外観】【カスタマイズ】

これで画面左に外観カスタマイズメニューが表示されます。今回はメニューにスポットを当て、全てこっちの都合で説明します。大人には色々と事情があるのです。

 

 

サイトカラー設定

現時点であなたのサイトはさぞかしダサい配色で彩られている事でしょうが安心してください。全21箇所が変更可能。

ちなみに【サイトカラー設定】では絶対に色が変えれない箇所も存在します。

これは後から記述する裏ワザでどうにかなるので、そんな慌てないで大丈夫です。そもそも色なんて変わろうが変わらまいが死にゃしません。

 

 

タイトル直下にテキストリンク作成

【グローバル設定】【ヘッダー下お知らせテキスト】

ヘッダーっていうのはサイトの最上部の事を指します。

逆に最下部はフッターって呼びます。

この項目をいじると『タイトル(ヘッダー)の真下にお知らせテキストリンク』を作成できますよって話。

上図『あああ』と表示されている赤い帯の部分の事ですね。

ここをクリックすると指定したリンクに飛ばすことができます。

テキストを表示させるには【ヘッダー下お知らせリンク】の指定が不可欠。

現時点で決まったURLが無いなら適当に『aaa』とか『sorimatitakashi』とか適当に英語を入力しとけば大丈夫です。

 

さてここで初心者にはどうしようもできない問題が発生。

 

つい数分前に言ってたことなんですがこの赤い帯は【サイトカラー設定】で色の変更ができないので、中途半端なわけわからん朱色で一生暮らしていかなくてはなりません本当にご愁傷さまでした。

と言いたいところですが【CSS】を使えば色を変えることができます。

 

関連記事
CSSとは?

 

CSSで帯の色を変える

STORKが事前に準備してくれている装備でも戦えない事は無いんですが、やはり細かい設定までゴムゴムのピストルを伸ばすのは不可能。

初心者にとってこのCSSが1つのハードルとなりますが、ワードプレスではとても簡単にCSS編集する事が可能です。

コツさえ掴めばある程度は自由にサイトをカスタマイズできるようになるので覚える一択です。HTMLとか無視してください。まずはCSSを覚えます。

 

【カスタマイズ・左メニュー】【追加CSS】

 

左にメモ帳の様な物がでてきますわね。

ここが『CSSコードを入力する場所』となります。

的確に命令文を書き込めば『ここの色は赤にして』とか『ここの文字はもっと大きくして』とか『アレクサ電気つけて』とか結構どんな言う事でも聞いてくれます。

とりあえず試しに下のCSSをコピペしてみてください。

 

/*タイトル下テキストの色を変更*/
#container .header-info a{
background: black;
}

 

帯色が『黒』になるはずです。ならないなら失敗です。あなたはワードプレスに嫌われていますので中田英寿と一緒に自分磨きの旅に出てください。

コピペしたCSSに注目。

『background:black;』という部分が『帯の色を決める命令』になります。

日本語に翻訳すれば『背景:黒;』って書いてあるワケですが、実際に日本語で書いても何の反応も起こりません。

全ての命令はグローバルな英語で表記する必要があります。

【CSS】【HTML】での色の指定方法は2種類。これから色々な場面で『色の指定』をする事が多くなるので両方覚えておくといいでしょう。

 

色の指定方法

英語表記

まず1つ目は英文から色を取得する方法。

原色を指定する場合はこちらの方が早い上、後からコードが読みやすいです。複雑な色を呼び出す事はできませんが、基本的に僕はこの手法を使います。面倒くさがりやなんで。

 

赤にしたければ『red』

黄色にしたければ『yellow』

黒にしたければ『shigerumatsuzaki

 

コード表記

2つ目がコードから色を取得する方法。

細かく色を指定したければ『カラーコード(#と6桁の英数字)』を使います。見た目が文字の羅列なので、後からコードを見て何色か判別するのは困難。名探偵困難。

 

白にしたければ『#FFFFFF』

黒にしたければ『#000000』

 

こんな具合で全ての色のコードが決まっています。

地球が誕生する以前から決まってます。

ただし天文学的な数のコードを全て頭に詰め込むのは不可能なので【カラーコード表】から目的の色を探し、コードを取得してきましょう。リンク先は別サイトなので、ブックマークしておくと便利です。

 

色が決まったらCSSコード内『black』の部分を色々かえてみましょう。帯はあなたの命令した色になり、つかの間の支配者気分を味わえます。

 

 

トップページ上部に大きな画像を設置する

【トップページ設定】

ヘッダー背景画像・テキスト大・テキスト小・テキストボタンリンクを追加する事が可能。

今回は試しに『よく分からん桜』を背景に表示させてみました。

この画像があるだけでサイトの見栄えが全然変わります。家で言うと玄関、人間で言うと顔、我修院達也でいうと眉毛。

サイトの第一印象がここで決まりますので、しっかり自分のサイトに合った画像を選んだ方がユーザーが分かりやすいです。飲食店のホームページのトップ画像が片目の無い人形とかだったら怖いですから。

ちなみに【丸窓のワードプレスメモ】はヘッダー背景画像を表示しているワケじゃなく『タイトルロゴ画像』を拡大して表示しています。

今回紹介した『ヘッダー背景画像』に『タイトルロゴ画像(拡大)』が加わると『大きな画像が2連続で登場』する事となり、少々ウザくなっちゃうので僕はタイトルロゴしか使ってません。

タイトルロゴ画像の拡大方法は記事後半で説明します。

 

画像の準備

僕の場合は『word・画像加工ソフト・ペイントソフト・キャプチャソフト』色々なソフトを駆使して作成しますが、何の技術も持ち合わせてない方には『無料で素材を提供してくれるサイト』というダメダメ人間救済措置サイトに頼りましょう。

自分好みの画像データをダウンロードするだけです。

 

【写真 画像 風景 フリー素材】等のワードで検索すると色々でてくるので、自分のダンススタイルに合ったサイトを探してみてください。

 

 

タイトル背景の幅を広げる

ビフォー

デフォルトではタイトルロゴの両端が途中で切れちゃってます。

A型几帳面人間の僕としては非常に気持ち悪いです。

 

アフター

だからこんな感じでヘッダーの帯を広げるひと手間が必要です。

A型面倒くさい大魔王人間の僕としては、なぜこれがデフォルト設定じゃないのか理解できません。

【グローバル設定】【ヘッダー背景設定】【コンテンツ幅】になっているボタンを【フルサイズ(横幅いっぱい)】に変更

 

 

投稿・固定ページをカスタマイズ

SNSボタンとは

デフォルトでは記事の上下にSNSボタンが付いており、それに挟まれる形で記事が表示されます。記事が長くなればなるほど上ボタンと下ボタンの間隔が広がります。

 

固定ページでもSNSボタンを表示する

デフォルトでは『SNSボタンが表示されるのは投稿ページのみ』です。

初心者の方は現時点で【投稿ページと固定ページの違い】が分からないと思いますが『減るもんじゃないならとりあえずどこにでも表示させとけぇい!』という勢いのある方はどうぞ表示させてください。

【投稿・固定ページ】【固定ページでもSNSボタンを表示する】にチェック

 

SNSボタンを非表示にする

僕も色々なSNSボタン(プラグイン)を試したのですが、結局このデフォルトのボタンが一番使いやすいと思いました。消す必要性は特にありませんが、どうしても『めざわり』だと感じる方は消してください。コンテンツ的にはスッキリします。

【投稿・固定ページ】【SNSボタンを表示しない】にチェック

 

コンテンツ内のアイキャッチ画像を非表示

記事を投稿する際に1つだけ『アイキャッチ画像』が設定できます。

『記事の顔』ですね。家で言えば玄関、人間で言えば顔、温水洋一で言えば頭。多少面倒ですが設定した方がカッコイイし見やすいです。

上図は新着記事(トップページ)です。指先部分をご覧ください。先ほどまで灰色で『NO IMAGE』と表示されていた部分に画像が表示されました。

これがアイキャッチ画像。

記事の内容に合わせた画像を設定する事によって、読む側もイメージしやすくなります。

 

 

ただしアイキャッチ画像を設定した場合、上図のように記事コンテンツのトップにも連動して同じ画像が表示されます。

これも邪魔であれば非表示にできます。

新着トップページでは表示させたいけど、コンテンツ内には表示させたくないという場合に利用できるでしょう。

【投稿・固定ページ】【記事・固定ページでアイキャッチ画像を非表示】にチェック

 

『この記事を書いた人』を非表示にする

【ダッシュボー・左メニュー・ユーザー】【あなたのプロフィール】

この欄を入力すれば、全ての記事の下へ自動的に『この記事を書いた人』が挿入されます。

 

※2019年5月現在は改行は反映されるようになってます

 

表示させたくなければ『書かない』でも大丈夫です。

ただし別のプラグインを使って『この記事を書いた人』を表示させたい場合は、この項目にチェック・非表示にする必要があります。

【投稿・固定ページ】【記事下に投稿者情報を表示しない】にチェック

 

 

更新日を非表示にする

デフォルトでは『投稿日のみ表示する』になっているはずなのに、なぜか『更新日』まで表示される事があります。

そんな時は設定しなおせば消えますのでパニックに陥る事はありません。投稿日・更新日の両方を非表示にする事も可能です。

【投稿・固定ページ】【投稿日・更新日表示設定】で選択

 

 

記事下に『facebookいいねボックス』を表示する

フェイスブックのアカウントを持っているのであれば記事の下にカッコイイボックスも表示できます。

フェイスブックURLを入力するだけで自動的に作成されるので楽ちんです。

【投稿・固定ページ】【記事下にfacebookいいねボックスを表示】にURL入力

 

 

メニューを作る

上部のグローバルナビ

下部のフッターナビ

図の位置に『カスタムリンク』『固定ページ』『記事』『カテゴリー』『タグ』など、自由な組み合わせで好きなメニューを作る事が可能。

 

表示される名称は好きに変える事ができます。

ほとんどが内部リンク(自分のサイト内を移動するリンク)になると思いますが、カスタムリンクを使うとURL指定で外部へも飛ばせます。

 

新規固定ページをメニューに自動追加する

【このメニューに新しいトップレベルページを自動的に追加】にチェック

この機能は推奨しません『新規に固定ページを作成したら自動的にメニューへ追加してくれる』という非常に非情なおせっかい機能で、ただただ邪魔なだけです。

 

 

ウィジェットを設定する

ウィジェットを使えば『コンテンツ外のカスタマイズ』が可能です。

全て説明するとかなり複雑になるので頭が水素爆発します。自分でいじってみた方が知識がつくと思うので、特殊なワードだけ説明しておきます。

 

PCとSP

【PC】パソコンにだけ表示されるウィジェット

【SP】スマートフォンにだけ表示されるウィジェット

 

ハンバーガーメニュー

スマホでサイトにアクセスした場合のみ、左上に『三本ラインのボタン』が表示されますが、これをハンバーガーアイコンと呼び、これをタップすると表示されるメニューの事をハンバーガーメニューと言います。

どこかの食いしん坊が『見た目がハンバーガーっぽい』とかいうジャンクな理由で名付けたと聞いておりますが、僕には三にしか見えません。これを機にもう三メニューに変えましょう。

 

フッター

フッター(最下部)には最大3つのウィジェットを設置する事が可能。

※ヘッダー(最上部)にはウィジェットで手を加える事はできません。

 

もっと細かくウィジェットを設定する

実は今いじくってる【カスタマイズ画面のウィジェット設定(ライブプレビュー)】では細かい設定ができません。

更に細かい設定をするにはウィジェット専用の画面にアクセスする必要があります。

一旦カスタマイズ画面から【ダッシュボード】へ戻り【左メニュー・外観】【ウィジェット】をクリック

カスタマイズ画面から移動する際、カスタマイズ画面の『公開ボタン』を押さないと、ここまでのカスタマイズが全て消滅します。後悔したくなければ公開してください。

 

ウィジェット画面では『アフェリエイトの広告などを表示する場所』なども細かく設定できます。

ここでどんなに無茶苦茶してもワードプレスがぶっ壊れる事は無いので気が済むまでいじくり倒してください。

もし異常が出てもウィジェットを消すだけで復旧します。

 

 

ホームページを固定ページに変える

ホームページとは

サイトトップのURLに表示されるページの事。このサイトのホームページはhttps://wordpress.marumado.net/です。

 

投稿ページとは

『最新の投稿』が表示されるページの事で、デフォルトでは『ホームページ=投稿ページ』の状態に設定されてます。

投稿ページは編集ができません(ウィジェットを使えば多少は可能)

 

ホームページを固定ページに変更する

何が言いたいかと申しますと『サイトトップのURLに表示されるページを変える』って事です。

具体的に言えば『サイトトップURL=投稿ページ』ではなく『サイトトップURL=固定ページ』にするのです。この設定は少しややこしいので手順を。

デフォルトで固定ページは1つしか存在していませんので、まずは固定ページを2つにする必要があります。

 

①【ダッシュボー・左メニュー・固定ページ】【新規追加】で新規固定ページを作成して固定ページの合計数を2つ以上にする

②【ダッシュボード・左メニュー・外観】【カスタマイズ】【ホームページ設定】【ホームページの設定】で【固定ページ】を選択

③【ホームページ】にはホームページにしたい固定ページを割り当てる

④【投稿ページ】には投稿ページにしたい固定ページを割り当てる

 

 

とまあ言葉で説明するのがめちゃくちゃ難しい設定が必要なのですが、これでホームページに『編集可能な固定ページ』を割り当てる事ができます。

投稿ページも『2つ目に指定した固定ページ』に割り当てられましたので、現時点で『ホームページ=投稿ページ』ではありません。

投稿ページをリンクで呼び出す際には『投稿ページに指定した固定ページのURL』が必要となります。

 

 

大きなタイトルロゴを作る

【サイトロゴ・アイコンの項目】ではブログの顔となる『タイトルロゴ』を設置できます。タイトルロゴってのは画像で設定します。

先ほどまで『新しいブログサイト』と表示されていたテキスト部分と、任意の画像を入れ替える事になります(テキストと画像の両方を表示するのは不可能)

サイトもかなり完成して徐々にテンションが上がって来たこのタイミングでいきなりちかっぱい地ベタに叩き落とされます。カイジの地下労働施設にぶち込まれるぐらいテンションが下がります。

 

 

タイトルロゴを設定したはいいものの、STORKではこれ以上画像が大きくならないのです。

ほとんどの初心者はここで約2日もがき苦しみます。

せっかくメインとなる画像を設置したのに、米粒レベルの小ささで表示されて一体どうしろと言うのか。

もしワードプレスがスーファミソフトならコントローラーぶん投げて破壊してます。

しかしどれだけイライラしても画像は大きくなりません。どこをどう設定しても大きくなりません。諦めてください。

と言いたい所ですが、このタイトルロゴ画像もCSSを使う事で拡大可能なので以下の手順通り進んでください。

 

 

①【グローバル設定】【ヘッダーロゴレイアウト】【中央に配置】を選択

②【追加CSS】に以下のコードをコピペ

 

/*タイトル画像を原寸大で表示*/
.header.headercenter #logo img {
max-height: initial;}

 

はい。めちゃめちゃでかくなりました。

今、僕の事を神と思ったでしょう。

あながち間違いではございません。

 

 

ファビコン・アイコンを設定する

ファビコンとは

ブラウザのタグに表示される小さなアイコンの事。

 

基本的には1つのアイコン使いまわし

引き続き【サイトロゴ・アイコン設定】にてファビコンを設定。

正方形のアイコンを自作するか、どっかのフリー素材からパクってきてください。アップロード更新するとすぐに反映されます。

 

 

 

トップページ上部にスライドショーを作成

このスライドショーが表示されるのはトップページのみです。

とりあえずこれを付けとくと華やかさはアップするし、なんかプロが作ったホームページっぽさが多少にじみでます。僕は使いませんけど。

とりあえず設置方法がめちゃくちゃ簡単なので一度やってみてください。覚えとけばいつでも使えます。

【ダッシュボード】【投稿】で適当な記事を選択し【ビジュアルエディタの右メニュー・タグ】に『pickup』と入力し確定・更新

 

 

画像を枠で囲む方法

僕はこの方法を知らずにずっと『Wordで1つ1つ手作業で画像に枠を付ける』などという愚かな行為に没頭しておりました。

本当にツーといえばカーぐらい意味不明の行動ですよ。一度だけ過去に戻れるとしたらその時の自分をビンタしたい気持ちを押さえてオートレースに行きます。

この方法を知ってからは作業が数段スムーズになりましたので内緒で教えます。さきほど説明した『CSS編集』の命令記入欄に以下のCSSをコピペしてください。

[/box]

/* 画像に枠【aaa】 */
img.aaa {
border: solid 2px #848484;
box-shadow: 2px 2px 3px #848484;
}

コードを直訳すれば『aaaクラスの画像だけに枠を付ける』という命令になります。

ただし今回はこのコピペだけじゃ何も変化はありません。

枠で囲みたい画像に『aaaクラス』を指定しなくてはならないのです。

 

画像に『クラス』を与える方法

【ビジュアルエディタ】【枠を付けたい画像】をクリック【鉛筆マーク】をクリック【画像CSSクラス】『aaa』と入力・更新

これだけで画像に枠を付ける事が可能です画像を囲む線の太さ、影の強さ、色等は『CSSの中の数字』をいじれば変える事ができます。

『aaa』は僕が勝手に定義しているクラス名なんで自由に変えて大丈夫です『sandaime-je-so-ruburaza-zu』でもいけます。

ただし他の英文(クラス名以外)を変にいじると命令が機能しなくなりますのでご注意あれ。

 

 

初期設定を終えて

余裕でしたね。おそらく1日もかからなかったと思います。19時間あれば余裕なカスタマイズだったんじゃないでしょうか。今日はゆっくり寝て、明日の仕事に遅刻してください。

これで大雑把なSTORKの外観設定は終了。

もっと深いカスタマイズをやるには【CSS】【HTML】【FTP・PHP】など、様々な知識が必要になってきますが、このサイトをブラブラ歩いてりゃ勝手に身に付くと思います。身につかなけりゃごめんなさい。

 

次はいよいよ記事を書く段階に入りますが、正直ワードプレスのデフォルトエディタは粉雪が空に帰るぐらい使いにくいです。

【ワードプレス】ビジュアルエディタの初期設定を参考に、最低限やっておくべき設定だけは先にやらないと、ストレスで病院送りになる可能性がありますのでご注意ください。

 

タイタニックのエンディングがすごすぎる

4 件のコメント

  • はじめまして。阿部と申します。
    ストークでブログを作り始めたばかりでカスタマイズ方法を色々と調べていたところ、こちらのブログにたどり着きました。
    タイトル画像を原寸大で表示するCSSを追加するだけですと、どんなに大きな画像を使用しても画像の外側に水色の余白が残ってしまいますが、この余白が見えなくなるまでヘッダー部分いっぱいいっぱいにタイトル画像を表示するにはどうしたらよろしいでしょうか。
    おそらくヘッダー部分のpaddingかmarginといったものをいじらないといけないのかと思うのですが、CSS初心者のためどういったコードを追加すれば良いのかがわかりません。
    ネットで検索しても解決策が見つからなかったため、コメントにて質問させていただきます。

    お手数をおかけしますが、ご教授いただけますと幸いでございます。