今まで内部リンクはoEmbedを利用したブログカードを使っていました。
最初は見た目がきれいで喜んでいましたが、どうやら喜んでいたのは自分だけで見ている人にはあまり好まれないと思い始めました。
せっかくハミングバードに変えたのでショートコード［kanren postid="記事番号"］を使おうと思ったのですが、微妙に私の好みではありません。
そこで今回は、ショートコードのCSSをちょっとカスタマイズして自分好みの関連記事に変更したいと思います。
ワードプレステーマ・htmlに関連する記事のまとめはこちら
関連記事の表示を設定するCSSファイルの場所を探す
library/shortcode.php の中に関連記事のタグがあります。
その中に related_article cf というクラスがあります。
このCSSクラスを編集するればいいのですが、style.cssにはどこにも記述がありません。
関連記事のCSSは、管理画面からは見えない
FTP接続で
/themes/hummingbird/library/css とたどっていくと
ありました
shortcode.cssです。
ダウンロードしたら中身を変更していきます。
通常はサムネイルが左でリンクの色が黒です。これを、サムネイルを右にしてタイトルを青色に変更します。
出来上がりは↓こんな感じです。
-
ワードプレスのテーマをHummingbird（ハミングバード）へ変更！なぜ有料テーマを選んだのか！？
つい先日までは「luxeritas（ルクセリタス）」という無料のテーマを使っていました。 2016年末に出てきたテーマで、とにかくカスタマイズが簡単でSEOも完璧でamp対応、デザインもフラットデザイ ...
CSSの修正箇所は４か所です
.related_article .inbox{
padding-left:25%;
}
これを
.related_article .inbox{
padding-left:1%;
}
この設定は、左寄せのサムネイルの場所を確保するための余白設定です。右寄席なので余白は必要ありません。
.related_article .thum{
width: 22%;
float:left;
}
これを
.related_article .thum{
width: 22%;
float:right;
}
.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;
}
色は好きな色に変えてください。
/* モバイル関連記事 */
.related_article .inbox{
padding-left: 33%;
}
これを
.related_article .inbox{
padding-left: 1%;
}
関連記事の日付を消す
私は関連記事リンクに日付は必要ないと思っているので消すことにしました。
管理画面の「外観」ー「Hummingbird」－「shortcode.php」を選択します。
以下を削除
<span class="date gf">".$date."</span>
これで完了です。
もし私と同じような関連記事でよければ上記のように設定してください。
