
・記事下の『関連記事』をおしゃれにカスタマイズしたい
※この記事の作成者
現在は仕事や副業に関するブログ執筆を行いながらWebライター、Web制作を副業として活動中。
少しでも皆さんの悩みを解決できる記事を目指して日々、成長をしていきます。
この記事は以下の内容を書いています
- 記事下の『関連記事』をカスタマイズしたい
- Cocoonのカスタマイズ方法を知りたい
無料テーマのCocoonを利用していますか?
ブログを始めてたばかりの人が多く使っているのではないでしょうか?
ある程度、Cocoonの設定でカスタマイズをすることは可能ですが、枠の形や、ボタンの表示方法などのデザインを変更したいとなるとCSSコードをいじる必要があります
そこで今回は「無料テーマCocoonで記事下の「関連記事」をおしゃれにカスタマイズする方法」を紹介します
この記事を読んでいただき、少しでも役に立ったと感じていただければ幸いです
記事下の「関連記事」のカスタマイズをする手順
カスタマイズ手順としては以下です
以上です
たったの3STEPで自分の好きなようにカスタマイズが出来ちゃいます
では、実際にどんなCSSコードなのかカスタマイズ内容を説明します
STEP1 CSSの変更
スタイルシートにCSSコードを書いていきます

外観からテーマエディターを選択し、「Style.css」を開きます

※すでにはじめからコードが書かれているので、消さないように注意をする
※CSSコードを追記していくのは一番したから書いていけば良いです
まずは「関連記事」の見出しのカスタマイズについてです
コード別の役割をコメントとして記載をしていますので内容を理解しつつ、どのコードがどんな役割をしているのか知識を広げていきましょう
h2.related-entry-heading span:before{
content:"";
z-index: 0;
width: 42px; /*幅の設定*/
height: 42px; /*高さの設定*/
border-radius: 50%; /*四隅の丸み*/
font-family: "Font Awesome 5 free" !important;
content: "\f328"; /*Font Awesome 5 freeから好きなアイコンを選んでね*/
color: #404040; /*アイコンの色*/
background-color: #fff; /*背景の色*/
display: inline-block;
text-align: center;
}
h2.related-entry-heading span{
color: #fff;
}
.related-entry-heading{
border-bottom:none;
background: #404040;
padding:1px 1px 1px 1px;
border-radius:30px;
}
次にブログカードのタイトルのカスタマイズです
.entry-card-title, .related-entry-card-title{
color:#000;
background:none;
padding:5px;
font-weight: normal;
font-size:18px !important;
border-left: none;
}
さらにブログカードのカスタマイズについてです
.main .related-list .a-wrap{
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.15);
}
.main .related-list .a-wrap:hover{
box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.25),0px -1px 4px 1px rgba(0,0,0,0.1);
}
CSSコードの入力が完了したら「ファイル更新」をクリックします
これでまずはSTEP1が完了です
STEP2 自分の好きな色に変更をする

自分好みの色を探してみてください
私はよく、下記から色を探します

実際の色とカラーコードがすぐに確認ができるのでこのサイトから探せば好みの色が探せると思います
STEP3 確認をする
最後に、STEP1、2でやってきたことが正しく動作しているか確認をします
今回は以下のようになっていれば正しく動作していることになります

もし、うまく動作しなかった場合はもう一度、CSSコードをみて、スペルミスや記入漏れがないか確認をしてみましょう
カスタマイズは様々な役割を持ったコードを組み合わせてデザインをしているので、うまく表示されないこともあります
まとめ
いかがでしたか?
今回は記事下の関連記事をおしゃれにカスタマイズしてみました
皆さんも色々試してみて自分の目指すデザインにしていきましょう
また、わからないことがあれば気軽にコメントください
一緒に解決していきましょう
それでは、また。。
この記事を書いた人

-
35歳の2児のパパです。
12年目サラリーマンが副業(Webライター・Web制作)やブログに関する情報を配信しています。
本業と副業を両立しながら家族を幸せにする計画を実行中です。
将来のために日々、独学で勉強し成長しています!
ぜひ、皆さんと一緒に成長していく仲間を募集してます!一緒に切磋琢磨していきませんか?
最新の投稿
Web制作2023年11月28日副業Web制作に求められるスキルとは?これだけは持っておきたいスキルを紹介!
副業2023年11月26日正社員におすすめの副業7選!副業の始め方や注意点を紹介します!
Webライター2023年10月22日未経験者におすすめ!あなたのライターキャリア講座の特徴や評判を徹底解説!
副業2023年9月17日副業が続かない方へ!継続力が上がる思考法を公開します
コメント