【SANGOカスタマイズ】パンくずリストや日付の前のアイコンマークを削除する方法

アイコンを表示させる意味、アイコンを表示させない意味。

WordPressテーマ「SANGO」を使用し始めてから少し経ちましたが、可愛らしいアイコンがかえってブランドイメージを変えてしまっているケースは少なくありません。Font Awesomeから取得したアイコンを多く使用しておりそれはそれでいいのですが、どうも「ここのアイコンはない方がいいかな?」と思うことがちょくちょくありました。

もちろん、アイコンを表示させているということはそこに表示させる意味があって、ユーザーに項目の役目をわかりやすくさせたり、そこに何があるのか?ということが視覚的に伝わりやすくなります。

 

しかし、WEBサイトのブランドイメージを伝えるための手段として、時にはアイコンは不要となるときももちろんあります。「アイコンを表示させない」ということにも、各々のサイト運営者の意識が向かっていくことは大切です。

ということで、そんなに大げさに言うほどのことでもない細かさですが、今回はSANGOのコンテンツ部分の前にあるパンくずリストや日付のアイコンマークを削除する方法を解説していきます。同様の感覚を抱いた馬の合うあなたも、ぜひ一度試しに設定してみてくださいね。

アイコンの削除イメージを画像で比較

まず、「パンくずリストや日付の前のアイコンってどこよ?」という方もいるかもしれないので一応確認しておくと、次の部分に当たります。

今回はこちらを削除していく(厳密には非表示にする)ということでしたが、実際にアイコンを削除した際の表示を確認してみると…

 

いかがでしょうか?サイト全体から見ればさほど大きな違いはないように見えますが、「わかる人にはわかる」そんな感覚の話だと思います。パンくずリストや日付自体を削除してしまうのはSEO的に良くない(説もある)ので、そのものを消してしまうのは好ましくないですが、アイコンだけ削除しても特に悪い影響はありません。

 

SANGOのポップなデザインイメージとはまた違った、洗練された世界観を演出したいという場合には、タイトル周りもスッキリさせた方が好ましいと思うので、ぜひそういった方はここからの解説に沿って設定を進めていきましょう。

SANGOのパンくずリストや日付の前のアイコンマークを削除する方法

ということで、早速パンくずリストや日付の前のアイコンマークを削除する方法について解説していきます。

削除というよりは「非表示」という設定にはなりますが、非常にカンタンに、かつパンくずリストの前だけ・日付の前だけ削除させることなどもできるので、ぜひ参考になさってくださいね。

「外観→テーマの編集」に移動する。

まず、CSSでカスタマイズを施していきたいので、WordPressのダッシュボード画面から「外観→テーマの編集」に移動しましょう。

「style.css(子テーマ)」でアイコンを非表示にする。

そして、子テーマの「style.css」を選択し、次のコードを一番下のあたりに追記します。(テーマの編集を行うときは必ず子テーマで行うようにしましょう。)

 

非常にシンプルですね。こちらのコードでは「content: none;」を記載することにより、SANGOのデフォルトで表示されているアイコンが、非表示になるよう設定を施しています。

もし仮に、「パンくずリストの前だけアイコンを削除したい」もしくは「日付の前のアイコンだけを削除したい」というような場合には、以下のコードを代わりに追加しましょう。

  • パンくずリスト前アイコンだけ非表示
  • 日付前アイコンだけ非表示

最後に

以上、パンくずリストや日付の前のアイコンマークを削除する方法ということで、SANGOの小技的カスタマイズを解説しました。いかがだったでしょうか?

SANGOはポップでユーザーファーストなサイトデザインを簡単に実現できる、非常に優れたWordPressテーマではありますが、デフォルトのまま使っていかなければいけない理由ってそこまでないんですよね。

そこは、あなたの実現したい世界観に合ったサイトデザインを表現していくべきだし、そうして自分らしいサイト運営をしていくために、SANGOのカスタマイズ性の高さも押し出されているのではないでしょうか。

 

アイコンという非常に細かい部分ではありますが、それがそこにあるかないかでは視覚的かつ感覚的に伝わっていく意味合いは変わっていきます。ぜひ、そういった些細なこだわりも大切にしていきながら、SANGOでのメディア運営を楽しんでいきましょう。

 

ABOUT ME

RIKU(坂本陸)WEBマーケター及びコンサルタント

オフィシャルメディア「LIVE YOUR LIFE」運営/オンラインスクール「THE LIFE SCHOOL」主催/早稲田大学在学中にPC1台で起業し、その後大学中退の道を選び独立。現在は個人ならびに法人向けのコンサルティング活動・メディア制作や、就職活動・進路選択に悩む大学生のキャリア相談など幅広く活動中。23歳、RADWIMPSと甘いものに目がない。

⇒詳しいプロフィールはこちら

4 Comments

misaki

とても参考になりました、ありがとうございます。
最終更新日自体を非表示にしたい場合はどうすれば良いでしょうか?これを非表示にするのはあまり良くないのかもしれませんが、できるだけスッキリさせたいため、非表示にしたいと思っています。
よければ教えていただければ幸いです。

返信する
RIKU

misakiさん

記事をご覧いただきありがとうございます!記事内容がご参考になったとのことで良かったです。
いただいたご質問について、最終更新日を非表示にするためには以下のコードをcssに追記していただければと思います。

.entry-time {
display: none;
}

ただ、やはりmisakiさんの仰るように日付を非表示にすることによって「この記事内容はどれくらい新しいのか・古いのか」というユーザー側の情報の判断基準を奪うことになるため、表示させておくに越したことはないかなとも思います。
しかし「タイトル周りをスッキリさせたい」というmisakiさんのご意見には僕も同感で、そのための対処法として日付部分のフォントファミリーやサイズ感などを調整し、見栄えを良くする方法を取っています。

ですので、もし日付を削除せずにスッキリさせるということでしたら、先ほどのコードではなく以下コードをcssに追記すると良いかと思います!ぜひ参考までに。

.entry-time{
margin: 0;
padding: 0 10px 0 0;
background: #fff;
clear: both;
font-size: 1.3em;
color: #777;
font-family: serif;
font-weight: 300;
line-height: 1.125;
}

またご質問などあれば気軽にお問い合わせくださいね、それでは引き続き当メディアを宜しくお願いいたします。

RIKU

返信する
misaki

ご丁寧にありがとうございます!少し説明が足りなかったのですが、更新日は残しつつ、その隣に表示される「最後に変更を加えた日」だけを消したかったのですが、上を参考に
.updated {
display: none;
}
で消せました。ありがとうございます!

RIKUさんのいい意味でsangoっぽさがないカスタマイズはとても参考になります。ワードプレス初心者なので、とても簡単に説明してくださっているのもありがたいです。

プロフィールのフォローボタンもシンプルでいいなと思うので、また機会がありましたら記事にでもしてもらえたら嬉しいです^^

返信する
RIKU

misakiさん

あ、そうでしたか!ご参考になったようで良かったです。
コンテンツに関するご感想もいただきありがとうございます、そう言っていただけると執筆者としても非常に嬉しく思います。

また、プロフィールボタンについても了解いたしました!僕も個人的に気に入っているポイントなので、ぜひ追って記事にさせていただきますね。

その他にも何かコンテンツ内容のご希望やカスタマイズに関するご質問などあれば、気軽にお問い合わせください〜。
それでは引き続き宜しくお願いいたします。

RIKU

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA