「ワードプレスでSANGOのテーマを使っているけど、影が気になる。なんとか消す方法はないのかな。」
こういった疑問を解決します。
SANGOは洗練されたテーマでデザインもいいですが、フラットデザインが好きな人にとっては影が気になってしまうことも。
ここに関してはCSSを追加するだけで一発で解決します。
初心者でもコピペでできる内容となっているので、影を消したいという方は安心して進めてみてください。
目次
SANGOの影を消すカスタマイズ：２つ紹介します
影を消すカスタマイズする上で知っておきたいのは、影を反映させているのは「box-shadow」というコードであるということです。
このコードによって影を付け、幅や色を指定がされています。
少し難しく感じるかもしれませんが、つまりはこの値を「0」にしてあげればOKというイメージです。
ここでは以下の２点について、「影を消す」カスタマイズを行っていきます。
- ヘッダー下の影
- トップページ：アーカイブの記事一覧
上記内容について１つずつ解説していきます。
ヘッダーの影を消すカスタマイズ方法
まずはヘッダーの影を消すカスタマイズですね。完成イメージは以下です。
ヘッダー下の影が消えています。
このカスタマイズを、以下の３ステップで行いましょう。
- STEP.1テーマの編集画面へ
ワードプレスの管理画面より「外観」→「テーマの編集」をクリックします。
- STEP.2スタイルシートを選択
カスタマイズ画面から「スタイルシート（style.css）」を選択します。
- STEP.3コードを追記
CSSの最下部に、以下のコードを追記します。
.header {
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}追記ができたら「ファイルを更新」をクリックしておきましょう。
これだけで、ヘッダーの影を消すカスタマイズは完了です。
トップページ：アーカイブの記事一覧の影を消すカスタマイズ方法
次にアーカイブの記事一覧（トップページ）の影を消すカスタマイズですね。完成イメージは以下です。
記事一覧の影が消えています。
このカスタマイズを、以下の３ステップで行いましょう。
- STEP.1テーマの編集画面へ
ワードプレスの管理画面より「外観」→「テーマの編集」をクリックします。
- STEP.2スタイルシートを選択
カスタマイズ画面から「スタイルシート（style.css）」を選択します。
- STEP.3コードを追記
CSSの最下部に、以下のコードを追記します。
.cardtype__article {
box-shadow: 0 0 0px 0 rgba(0,0,0,0), 0 0px 0px 0 rgba(0,0,0,0);
}追記ができたら「ファイルを更新」をクリックしておきましょう。
これだけで、アーカイブの記事一覧（トップページ）の影を消すカスタマイズは完了です。
変更したCSSが反映されない場合
変更したCSSが反映されない場合、以下の原因が考えられます。
- コードの記述が間違っている
- ブラウザの履歴の影響
コードはコピペして最下部に貼り付けるので、ほぼほぼ間違いはないと思います。
最も多いのはブラウザの履歴の影響ですね。
ブラウザは読み込んだ履歴を記憶してしまっているため、CSSを変更しても記憶が優先されて反映されてしまっている時があります。
こういった場合は、履歴を一度削除してしまいましょう。
この後ページを再読み込みすることで、カスタマイズしたデザインが反映されます。
他の場所の影も消したい：検索窓を例にカスタマイズ解説
今回は２点の影を消す方法について解説しましたが、他の場所の影も消したいという人向けに、自分で場所を探してカスタマイズする方法を解説しておきます。
先述したように、影は基本「box-shadow」で指定されています。
つまりCSSの中から、この「box-shadow」を探して、値を「０」にしてあげればいいわけです。
メインテーマのCSSから検索する
CSSによる検索を行うには、style.cssのファイルを開く必要があるので、専用のエディタを使用して作業を行った方が安心です。
フリーのものでも大丈夫なので、専用のエディタをダウンロードして作業しましょう。
»参考：【Mac】プログラミング初心者におすすめのエディタは２つです
以下が検索方法です。
※この記事では「CotEditor」を使用した例で作業を進めていきます。
- STEP.1CSSを開く
専用のエディタでSANGOのメインテーマのCSSファイルを開きます。
- STEP.2シャドウを検索
command+Fで検索を開き「box-shadow」を検索します。
これで「box-shadow」が指定されているコードを、全て探すことができます。
探したコードの中から、影を消したい部分をカスタマイズしていきましょう。
今回は「サイドメニューの検索窓」を例に、影を消す作業を行っていきます。実際に検索したコードが以下ですね。
input#s {
padding-right: 48px;
border-bottom: solid 1px #efefef;
background: #fff;
outline: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15);
transition: .3s ease-in-out;
-webkit-appearance: none;
}
このコードをここから編集していきます。
影を消すカスタマイズ
影のついている場所が分かったら実際に影を削除していきましょう。
方法は以下の３ステップです。
- STEP.1新規ファイルにコードをコピペ
影を消したいコードを丸ごとコピーして、新規のエディタにペーストします。
- STEP.2コードの編集
影以外のコードを削除し、影のコードの部分の値を全て「０」に入れ替えます。
実際に編集を行ったコードが以下となります。
input#s {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0), 0 0px 0px 0px rgba(0,0,0,0);
} - STEP.3ワードプレスでカスタマイズ
できあがったコードをコピーして、ワードプレス内のCSSの最下部にペーストします。
これで「ファイルを更新」をクリックすればOKです。
確認すると、対象部分の影は消えているかと思います。
この方法で、気になる影は全て消すことができるので、ぜひ参考に試してみてください。
というわけで今回の内容は以上となります。
オススメ【初心者向け】ゲームブログを収益化する方法＋運営のコツを解説
オススメ【超初心者向け】ワードプレスでのブログの書き方、公開までの流れを解説する
コメントを残す