【WordPress】Xeoryのテーマをちょこっとだけカスタマイズする!後編

2015/08/11

 

今回は前回からの後半部分になります。

 

前半

 

・front(TOP)ページのでかい見出しを小さくする。

 

・人気記事と最近の投稿の順番を逆にする。

 

・front(TOP)ページのいらないコンテンツを削除する。

 

後半

 

・front(TOP)ページの記事のタイトルの文字を太くする。

 

・記事のフォントと文字の間隔を変更

 

・front(TOP)ページの記事のアイキャッチの粗さを直す

 

 

※phpを編集する時は必ずバックアップをして下さい。windows標準のメモ帳などではなく、テキストエディターのフリー版でもいいのでダウンロードして下さい。
バックアップの仕方が解らない方は、phpのところをカスタマイズすると最悪の場合は、真っ白になって戻せなくなります。

 

 

スポンサーリンク

スポンサーだよ

 

 

front(TOP)ページの記事のタイトルの文字を太くする

 

 

Xeoryテーマ カスタマイズ2
frontページの記事のタイトルが、少し物足りなく感じたので装飾してみます。

 

 

 

の、<h3><?php the_title(); ?></h3>の部分、ここを、

 

<h3 style="font-size: 20pt"><?php the_title(); ?></h3>

 

でフォントのサイズを指定したり、

 

 

<h3 style="font-weight: bold"><?php the_title(); ?></h3>

 

単純に文字を太くしたりします。

 

 

Xeoryテーマ カスタマイズ3

classを指定してcssで色々装飾を試すのもいいですね。

 

記事のフォントと文字の間隔を変更

 

 

 

Xeoryテーマ カスタマイズ4

 

デフォルトの記事だと、文字と文字の行間が無駄に空いていて、自分の意図した間隔で改行などをしたい時に、自分で空けた改行なのか、元からの行間なのか解らないくらい空いています。

 

なので文字サイズと同じくらいの行間にしたいと思います。

 

 

cssに以下を追加。

 

 

.post-content p

 

というのが記事の本文のところです。

line-height: 24px;

そこの行間のサイズを指定したり、

 

margin-bottom: 2px;

marginの下側を少し調整してます。

 

 

もちろんお好きなようにfontサイズを指定したりして下さい。

 

 

Xeoryテーマ カスタマイズ5

 

これでスッキリしました。

 

front(TOP)ページの記事のアイキャッチが粗さを直す

 

 

Xeoryテーマ カスタマイズ6

 

TOPページ(front-page)の記事のアイキャッチの画像が粗くて、特にスマホで見た時に画像が粗いのが目立ちます。

アイキャッチは記事の顔なので、そこで粗い画像が使われるとインパクトが無くなってしまいますよね。
小さいサイズの時はいいですが、スマホやタブレットになると途端に粗さ目立ってしまいます。

 

 

Xeoryテーマ カスタマイズ7

 

F12で確認。テーマのfront-page.phpを見てみると、

35行目あたりに、

 

 

の、<?php the_post_thumbnail('small_thumbnail'); ?>があやしい…。

 

スモールサムネイル、って記述してますよね。

WordPressは、1つの画像をアップロードしても、複数のサイズを自動的に作ってアップロードしてるみたいです。

 

サーバーのFTPを見てみると、wp-content → uploads → 日付、で

 

 

Xeoryテーマ カスタマイズ8

 

やはり複数のサイズの画像が作られているのが確認できます。

その一番小さいサムネイルのサイズを、TOPページの記事のアイキャッチにサムネイルとして使用しているみたいです。

 

小さいサムネイルを作らない、作らせない方法は難しくて断念、作らせなければ任意のサイズだけでサーバーの容量を圧迫させずに済むんですけど、

今回はとりあえず、TOPページの記事のサムネイルを綺麗に表示させられればいいので、このように記述しました。

 

 

 

<?php the_post_thumbnail('small_thumbnail'); ?> の、

 

('small_thumbnail'); を、(array(1200, 630, true)); と変えました。

 

TOPページじゃなく、ブログの記事のsingle.phpの部分、その記事のアイキャッチは綺麗で大きいので、その部分をそのまま流用しました。

 

 

Xeoryテーマ カスタマイズ1

 

これで粗い画像が綺麗に表示できました。

TOPページ(front-page)の部分では、人気記事と最近の投稿が2つあるので、同じように記述して下さい。

 

まとめ

以上でちょこっとだけ?Xeoryのテーマをカスタマイズしてみました。

本当はデザイン部分にも色々とカスタマイズしていきたいんですが、デザインの部分はきりがないですし、飽きたり気に入らなくなったらまたカスタマイズしないといけないので、最低でも直したい箇所だけにしました。

 

-WordPress, ブログ
-,