ダイエット、禁煙方法、子どもとiphoneなど

GOOD DAY

ブログ

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

更新日:

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

スポンサーリンク

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

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

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

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

ワードプレステーマ・htmlに関連する記事のまとめはこちら

関連記事ワードプレステーマとhtmlテンプレートを色々使ってみた感想

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

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

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

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

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

FTP接続で

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

ありました

shortcode.cssです。

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

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

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

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

つい先日までは「luxeritas(ルクセリタス)」という無料のテーマを使っていました。 2016年末に出てきたテーマで、とにかくカスタマイズが簡単でSEOも完璧でamp対応、デザインもフラットデザイ ...

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>

これで完了です。

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

Hummingbird(ハミングバード)|OPENCAGE

スポンサーリンク

  • この記事を書いた人
  • 最新記事
まっさん

まっさん

高校生、中学生の子どもを持つ40代後半のパラレルワーカーです。ネット関連の仕事柄、ブログや広告の知識があります。ブログでは自分の経験をもとに高校、大学と続けたテニスやダイエット、禁煙に成功したこと、起業で経験したことなどを執筆。

-ブログ
-, ,

Copyright© GOOD DAY , 2019 All Rights Reserved.