賢威で抜粋のサイズとかカラー弄ってみたよ(*´▽`*)

スポンサーリンク

どうもこんにちは!!

IT大好きFwwwです

最近は賢威のデザイン変更に凝ってしまい、ブログの記事更新を怠ってしまっていましたw

そしてせっかくなので、それを記事にすることにしました

ということで、本題に戻ります

賢威を使用している皆さんはSimplicityというわいひらさんが開発した、

SEO対策済みのテーマご存知ですよね?

Simplicityのサイトをスマホなどで観覧している時に気になったことが一つありました

それは記事の抜粋と記事内の文字サイズがそれぞれ微妙に違うことです

こんな感じになってます

比較

なぜこんなことになってるかというと、

記事一覧ページでは一画面にたくさんの記事を見れるようにしたいからだと思います

そうするとサイト内回遊率がアップするからです

ということで、今回は賢威の記事抜粋のフォントサイズやら色やらをわかりやすく設定していきましょう!!

スポンサーリンク

賢威の記事抜粋のフォントサイズとかカラーを弄ってみようヽ(*´∀`)ノ

外観⇒テーマの編集⇒メインインデックスのテンプレート (index.php)に移動してください

こんな箇所がありますよね

<!–本文抜粋–>
<?php the_excerpt(); ?>
<p class=”link-next”><a href=”<?php the_permalink() ?>”>「<?php echo(get_the_title(”, ”, false)); ?>」の続きを読む</a></p>
<!–/本文抜粋–>

この中の<?php the_excerpt(); ?>というのは記事の抜粋を取得するコードです

なのでここを弄ってやれば、記事の抜粋をカスタマイズすることができます

CSSからクラスを指定していないため、CSSでフォントサイズを指定することはできません

僕も最近CSSは慣れてきた方ですが、

<span style=”font-size:;”><?php the_excerpt(); ?></span>

<p style=”font-size:;”><?php the_excerpt(); ?></p>

はもちろんできませんでした

そのままこのコードが表示されてしまう始末にwww

そして最終的にたどり着いたのがこちらのコードです

<font size=”フォントサイズ” color=”カラー”><?php the_excerpt(); ?></font>

なのでまとめるとこうなります

<!–本文抜粋–>
<font size=”フォントサイズ” color=”カラーコード”><?php the_excerpt(); ?></font>
<p class=”link-next”><a href=”<?php the_permalink() ?>”>「<?php echo(get_the_title(”, ”, false)); ?>」の続きを読む</a></p>
<!–/本文抜粋–>

尚フォントサイズは規定値が3となっていますので大きくしたい場合は3以上にしてください

ptやpx、emなどは使用できません

なので値だけ入力してください

colorはカラーコードを入力してください

そのままでいいのであれば、その項目を消してもらって大丈夫です

今回僕はフォントサイズを4.5にしてカラーを#FF0000(赤)にしたのでこのように変わりました

抜粋サイズと色

これで少しは見栄えが変わりますよね

そして忘れてはいけないのが、アーカイブ(カテゴリ)ページでもこれを表示させることです

なので、archive.phpの本文抜粋の部分もコピペするなりして適応させておきましょう!!

最後まで読んでいただきありがとうございました

スポンサーリンク

シェアする



URLをコピーする

関連記事