WrodpressテーマHummingbird(ハミングバード)の関連記事CSSを自分好みのデザインにカスタマイズする

スポンサーリンク

今まで内部リンクはoEmbedを利用したブログカードを使っていました。

最初は見た目がきれいで喜んでいましたが、どうやら喜んでいたのは自分だけで見ている人にはあまり好まれないと思い始めました。

せっかくハミングバードに変えたのでショートコード[kanren postid=”記事番号”]を使おうと思ったのですが、微妙に私の好みではありません。

そこで今回は、ショートコードのCSSをちょっとカスタマイズして自分好みの関連記事に変更したいと思います。

関連記事の表示を設定するCSSファイルの場所を探す

library/shortcode.php の中に関連記事のタグがあります。

その中に related_article cf というクラスがあります。

このCSSクラスを編集するればいいのですが、style.cssにはどこにも記述がありません。

関連記事のCSSは、管理画面からは見えない

FTP接続で

/themes/hummingbird/library/css とたどっていくと

ありました

shortcode.cssです。

ダウンロードしたら中身を変更していきます。

通常はサムネイルが左でリンクの色が黒です。これを、サムネイルを右にしてタイトルを青色に変更します。

出来上がりは↓こんな感じです。

WordpressのテーマをHummingbird(ハミングバード)へ変更!なぜ有料テーマを選んだのか!?

CSSの修正箇所は4か所です

1つ目: PCとタブレットの左画像用余白を小さくする

.related_article .inbox{
padding-left:25%;
}

これを

.related_article .inbox{
padding-left:1%;
}

この設定は、左寄せのサムネイルの場所を確保するための余白設定です。右寄席なので余白は必要ありません。

2つ目:サムネイルを左から右へ変更

.related_article .thum{
width: 22%;
float:left;
}

これを

.related_article .thum{
width: 22%;
float:right;
}

3つ目:タイトルの色を変更

.related_article p.ttl{
margin: 0 0 0.1em;
font-size:1em;
color:#333;
}

これを

.related_article p.ttl{
margin: 0 0 0.1em;
font-size:1em;
color:#1122cc;
}

色は好きな色に変えてください。

4つ目:スマホの左余白を小さくする
/* モバイル関連記事 */

.related_article .inbox{
padding-left: 33%;
}

これを

.related_article .inbox{
padding-left: 1%;
}

関連記事の日付を消す

私は関連記事リンクに日付は必要ないと思っているので消すことにしました。

管理画面の「外観」ー「Hummingbird」-「shortcode.php」を選択します。

以下を削除

<span class=”date gf”>”.$date.”</span>

これで完了です。

もし私と同じような関連記事でよければ上記のように設定してください。

スポンサーリンク
スポンサーリンク