この記事では、このブログを運営するにあたって導入しているCSSのコードやfunctions.phpに導入しているHTMLコードなどを、備忘録的にまとめています。
このブログでは無料のワードプレステーマCocoonを使用しています。一部のコードはCocoonの機能に特化したものになっています。
その他のテーマでも広く使えるものもありますので、ブログ作成の参考にして、ぜひ活用してください。
サイトトップの固定ページの不要なパーツを非表示にする
サイトのフロントページ（トップページ）は、集客する上では大きな役割を果たすため、シンプルで機能的である必要があります。
TOPページのタイトル見出しやフォローボタン、投稿日などの情報が煩雑になってしまって情報が見づらくなることがあります。
ユーザーの快適性を損なうことは、ユーザーの回遊率を下げるばかりか離脱率を高めてしまうことにもつながりますので、しっかりと気を配ってカスタマイズをしましょう。
そこで、そういった各パーツの非表示を行うCSSコードをご紹介します。
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}上記は各パーツを個別に非表示にすることができるCSSコードです。
下記は上記の項目をすべて非表示にするCSSコードになります。
/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
display: none;
}引用元：トップページを固定ページにした際にタイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示を切り替えるCSS例
SNSシェアボタンのカスタマイズ
SNSシェアボタンは、各種SNSのシンボルカラーを反映しているデザインが多いため、ブログの中でもひときわ目を引きやすいパーツです。
したがって、SNSシェアボタンを見やすくカスタマイズすることは、ブログ閲覧中のユーザーの行動を大きな効果を持つことができます。
特に他のSNSへの誘導を目的にする場合には、デザイン性を高めることが効果的です。
今回ご紹介するのはこんな感じの丸くてかわいいボタンデザインへの変更方法です。
このデザインへ変更するCSSコードはこちらです。
/*全てをまとめて非表示*/
.home.page .entry-title,
main .button-caption {
display: none; /*キャプション非表示*/ } /SNSシェアボタン/ .sns-share-message{ font-weight: bold; /太字/ color: #875d5b; /文字色/ } .sns-share-buttons { flex-wrap: nowrap; /折り返さない/ justify-content: center; /中央寄せ/ } .sns-share-buttons a { border-radius: 50%; /丸くする/ font-size: 20px; /アイコンのサイズ/ margin: 0 10px; /ボタン同士の間隔/ } main .sns-share a { width: 40px; /*ボタンの横幅*/ height: 40px; /*ボタンの高さ*/ }CSSコードを導入した上で、他にもCocoon設定をいじる部分があるので、そちらについては引用元のwebサイトをご参照ください。
引用元：【Cocoon】SNSシェアボタン・フォローボタンを丸く＆小型化【カスタマイズ】
Cocoonブログカードのファビコン（サイトアイコン）を消す
ブログカードとは、サイト内リンクをビジュアル的に表示するために使用される機能ですね。
Cocoonテーマでは、自サイトのURLを貼り付けるだけで自動で埋め込みがされて、以下のようなデザインで表示する機能が標準で搭載されています。
しかし、そもそも自分のサイトなのだからサイトアイコンは不要！という人も多いと思います。（私は一時期消していたのですが、また元に戻しました笑）
そこでこのCSSコードを使用するとファビコンを消すことができます。
.blogcard-favicon {
display: none;
} そもそもサイトアイコンどころか、ドメイン名や更新日など全部いらない！
という場合には、ブログカードのフッター全体を消すことができるコードもあります。
/内部ブログカードのフッター非表示/
.internal-blogcard-footer{
display:none;
}引用元：ブログカードのサイトアイコン「非表示」設定はありますか？ | 要望 | Cocoon フォーラム
記事サムネの左上にあるカテゴリーラベルを消す
最新記事や人気記事、関連記事などが表示されているとき、サムネの左上にカテゴリーのラベルがついているのが邪魔だなぁ、と思ったことはありませんか？
そんなときはこちらのCSSコードを導入するだけでラベルを簡単に消すことができますよ。
/** サムネ左上のカテゴリーラベルを消すコード */
.cat-label {
display: none;
}長い記事タイトルの３０文字以降を「…」にする
ウェジェットで最新記事や人気記事を表示する機能がCocoonには標準搭載されています。
そうした記事のタイトルを表示するスペースは、基本的にタイトルが全文字表示されるようになっています。
長いタイトル記事をつけていると、かなり伸びてしまうため見栄えが非常に悪くなってしまうのが難点ですね。
そこで、以下のコードをfunctions.phpに書き加えることで、長い記事タイトルの３０字以降を「…」で省略することができます。
add_filter( 'the_title', 'titlelimitchar' );
function titlelimitchar($title){
if(mb_strlen($title) > 30){
$title = mb_substr($title,0,30) . "…";
}
return $title;
} この関数内の30となっているところを、任意の数字に変える事で、タイトル文字数を自由に変更することができるので試してみてください。
引用元：記事タイトルの表示文字数の制御 | カスタマイズ相談 | Cocoon フォーラム
外部リンクに矢印マークをつける
外部リンクと内部リンクを、一目で見分けられるようにすることはユーザービリティの向上につながるため、ユーザーの信頼性を上昇させることにつながります。
例えばこんな感じで、外部リンクには矢印をつけるととても親切で分かりやすいですよね。
ということで、こういった外部リンクに矢印を付け加えるCSSコードをご紹介します。
※コード導入前に引用元サイトのFont Awesome導入法に従って実行しておきましょう
/** 外部リンクにアイコンを付ける */
.entry-content a[target="_blank"]
:not([href^="https://dekunoboh.com"]) :not([class="amazonjs_link"]):not([href$=".jpg"])
:not([class="yyi-rinker-link yyi-rinker-tracking"])
:not([class="yyi-rinker-tracking"])
:not([class="btn btn-m has-background has-pink-background-color"]) :not([href$=".png"])
:not([href$=".gif"])
::after{ margin-right: 3px; content: "f08e"; font-family: FontAwesome; display: inline-block; vertical-align: -1px; }
/* ↑Rinker、ボタンの中ははずした。
:not([class="yyi-rinker-link yyi-rinker-tracking"
]):not([class="yyi-rinker-tracking"])の部分で */アフィリエイトサポートアプリ『Linker』を使っている人は、そちらのリンクボタンにもが表示されてしまうため、Rinkerは除外するようにコードに編集を加えています。
