ブログ初心者が深みに陥るWordPressのデザイン〜前編〜

※このブログは、有料テーマ『The thor』を利用しております。

初心者が悩むWordPressデザイン

1. 外部リンクのアイコンを表示させること
2. SNSフォローのアイコンを変えること
3. CSSでフッターエリアの背景色と文字色を変更すること
4. アイキャッチ右上にあるカテゴリーの色を変更すること
5. サイドカラムエリアのデザイン変更すること

外部リンクのアイコンを表示させる

このマーク⇒見たことありますよね？

このマークがあると読者さんにこのリンクマークを押したら別のページに行きますよっていうことを認識して頂きやすくなると思い、導入したかった機能です。

このマーク一つ付けるのに１時間弱はかけた気がします。

【方法】

①プラグイン『Font Awesome』を導入する

『Font Awesome』はウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

リンクマークはこのサービスにあるので、『Font Awesome』のプラグインを導入して有効化しましょう。

②CSSを変更する

『外観』⇒『カスタマイズ』⇒『追加CSS』

追加CSSにて以下のコードを入力

a[target="_blank"]:after{
    content: "\f35d ";
    font-family: FontAwesome;
    margin: 0px 3px;
}

③リンクを貼りたい文字を選択して『command+B』を押す

こんな感じになります。

④ポップアップの”『検索またはURL』を入力”に用意したURLをペーストする

⑤新しいタブで開くをクリック

これが重要で、ここをクリックしないと出てきません。

ここも少し悩んだので、共通の悩みを持っていた方が解決できたら嬉しいです。

SNSフォローのアイコンを変えること

私が使用している有料テーマ【THE THOR（ザ・トール）】には、11種類のSNSフォローのアイコンがあります。

どれも工夫されてていいのですが、ただ、全て色が濃く塗りつぶされているので、私が作りたい薄い感じのサイトにしたい場合には、フォローのアイコンが強調されすぎてしまう印象がありました。

もう少し自分のブログのイメージに近いのはないかと探して見つけたのが、
こちらのサイト。

今回、私が使用させて頂いたもの以外にも、とても良いアイコンを作成されています。

このサイトと同じアイコンは、『外観』⇒『カスタマイズ』⇒『追加CSS』と進み、

『追加CSS』にて以下のコードを入力

.socialList {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}.socialList__item{
width:11.8%;
}.socialList-type11 .socialList__link::after {
content: attr(title);
display:none;
}.socialList-type11 .socialList__item {
height: 35px;
line-height: 35px;
margin: 0px;
}.socialList__link.icon-facebook {
border:solid 1px #3b5998;
color:#3b5998;
background:#fff;}
.socialList__link.icon-facebook:hover {
background:#3b5998;
color:#fff;}.socialList__link.icon-twitter {
border:solid 1px #00b0ed;
color:#00b0ed;
background:#fff;
}
.socialList__link.icon-twitter:hover {
background:#00b0ed;
color:#fff;
}.socialList__link.icon-google-plus {
border:solid 1px #df4A32;
color:#df4A32;
background:#fff;
}
.socialList__link.icon-google-plus:hover {
background:#df4A32;
color:#fff;
}.socialList__link.icon-hatenabookmark {
border:solid 1px #008fde;
color:#008fde;
background:#fff;
}
.socialList__link.icon-hatenabookmark:hover {
background:#008fde;
color:#fff;
}.socialList__link.icon-pocket {
border:solid 1px #eb4654;
color:#eb4654;
background:#fff;
}
.socialList__link.icon-pocket:hover {
background:#eb4654;
color:#fff;
}.socialList__link.icon-line {
border:solid 1px #00c300;
color:#00c300;
background:#fff;
}
.socialList__link.icon-line:hover {
background:#00c300;
color:#fff;
}
.socialList__link.icon-linkedin {
border:solid 1px #0e76a8;
color:#0e76a8;
background:#fff;
}
.socialList__link.icon-linkedin:hover {
background:#0e76a8;
color:#fff;
}
.socialList__link.icon-pinterest {

border:solid 1px #cb2027;

color:#cb2027;

background:#fff;

}

.socialList__link.icon-pinterest:hover {

background:#cb2027;

color:#fff;

}

https://affirepo.com/thor-customize-snsbtn/

まとめ

WEBデザインを変更し出すとすごい時間がかかりますね。

今回、ご紹介させて頂いたのは、以下2点でした。

少しでも悩まれている方の解決になれば幸いです。

また改めて、以下についてもご紹介致します。

【関連する記事】

ブログ運用中の方も、ブログ運営コストを下げることができます。