思いついたらふわっと書く雑記ブログ

VanBlog

Wordpress

AFFINGER5のカスタマイズ集

投稿日:2018年4月3日 更新日:

AFFINGER5にしてから細かく行った色んなカスタマイズを備忘録として置いておきます。

随時更新予定。

トップページの記事タイトル

タイトルフォントサイズ変更

affinger5親テーマのstyle.cssを開き、下のコードを探す。

	/*トップ記事一覧
dd h3:not(.st-css-no2) a {
color: #333;
text-decoration: none;
font-size:20px;
line-height: 35px;
}*/

Ctrl+Fで「トップ記事一覧」を検索するとすぐ出てくると思う

このコードを子テーマのstyle.cssにコピーする。/* */で囲まれて無効化されているので削除するのを忘れないように。

 

私の場合、スマホでの記事タイトルのフォントサイズのみ変更したかったので以下のように記述した。

/*media Queries スマホサイズ(669px以下) */
@media only screen and (max-width: 669px) {
/*トップ記事一覧 */
dd h3:not(.st-css-no2) a {
color: #333;
text-decoration: none;
font-size:16px;
line-height: 25px;
}
/*-- ここまで --*/
}

font-sizeを小さくし、line-heightも小さくした。

子テーマのstyle.cssにはスマホサイズ用@media Queriesがないので新たに記述。max-widthの部分はサイズ変更しているので自分のサイズを入力。

 

おすすめ記事・関連記事編

ついでにおすすめ記事・関連記事のタイトルフォントも、スマホビューだと大きすぎるので変更した。

  /*おすすめ記事タイトル*/
.kanren .clearfix dd h5:not(.st-css-no2) a {
font-size: 16px!important;
line-height: 25px!important;
}

このコードを子テーマのstyle.cssに張り付けてfont-sizeline-heightをいじるだけ。

 

 

投稿日時とカテゴリを横並びに

縦幅が長いなぁと思ったので動かしてみました。

親テーマフォルダから以下の3つのファイルを子テーマにコピー。

  • itiran-original-thumbnail-on.php
  • itiran-thumbnail-on.php
  • st-single-category.php

itiran-thumbnail-on.php

<dd>
<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
<h3><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h3>
<div class="blog_info <?php st_hidden_class(); ?>">
<p><i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>
&nbsp;<span class="pcone">
<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
</span></p>
</div>

この部分を書き換える。

<dd>
<h3><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h3>
<div class="blog_info <?php st_hidden_class(); ?>">
<p><i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>
&nbsp;<span class="pcone">
<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
</span></p>
</div>

46行目を54行目にもってくるだけ。

全く同様のことをitiran-original-thumbnail-on.phpにも行う。

 

st-single-category.php

<span class="st-catgroup itiran-category">
<?php
if ( $categories ) {
foreach( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '" title="' 
. esc_attr( sprintf( "View all posts in %s", $category->name ) ) 
. '" rel="category tag"><span class="catname st-catid' . $category->cat_ID . '">' . $category->cat_name . '</span></a>' . $separator;
}
echo trim( $output, $separator );
} ?>
</span>

書き換え後のコード。

7行目と17行目は<p>になっているので<span>に変更。

 

 

全体のフォントサイズ変更

記事のフォントサイズなどを変更する場合は簡単。

親テーマのstyle.cssから以下のコードをコピーする。

/*基本のフォントサイズ*/
p, /* テキスト */
.st-kaiwa-hukidashi, /* ふきだし */
.st-kaiwa-hukidashi2, /* ふきだし */
.yellowbox, /* 黄色ボックス */
.graybox, /* グレーボックス */
.redbox, /* 薄赤ボックス */
#topnews .clearfix dd p, /* 一覧文字 */
.post ul li, /* ulリスト */
.post ol li, /* olリスト */
#comments #respond, /* コメント */
#comments h4, /* コメントタイトル */
.post h5, /* H5 */
.post h6 /* H6 */
{
font-size: 18px;
line-height: 30px;
}

子テーマのstyle.cssに上記コードを記述し、font-sizeline-heightを好きな値に編集する。

デバイスごとにサイズを切り替えたい場合は@media Queries内に記述。

 

 

サムネイル画像

枠線の太さを変更

まずサムネイル画像に枠線を追加する方法。

ダッシュボードで外観→カスタマイズ→オプションカラー→サムネイル画像の枠線色変更

初期値では枠線の太さが3pxに設定されているので太い。

 

親テーマのst-themecss.phpを直接カスタマイズ。

st-themecss.phpのバックアップを作成しておきましょう

 

st-themcss.php

<?php if($st_thumbnail_bordercolor): ?>
/*サムネイル画像のボーダー*/
.kanren dt img {
border:solid 3px <?php echo $st_thumbnail_bordercolor; ?>;
box-sizing:border-box;
}
<?php endif; ?>

border:solid 3pxの部分の数値を変更する。

 

角の丸みを調整

ちょっと横着します。

ダッシュボード→AFFINGER5 管理→デザイン→サムネイル画像設定→サムネイル画像を丸くするにチェック

これにチェックを入れるとサムネイル画像が丸くなる。この丸みを調整してしまおう。

 

子テーマのstyle.cssを開く。

.kadomaru img{
border-radius:100px;
}

上記コードを貼り付けて数値を変更。角を少しだけ丸くしたいなら5pxくらい。

角の丸みをなくしたければ、サムネイル画像を丸くするのチェックを外すだけでオフ・オン可能になった。

 

画像サイズの変更

親テーマから以下のファイルを子テーマにコピーする。

  • itran-thumbnail-on.php
  • itiran-original-thumbnail-on.php
  • kanren-thumbnail-on.php
  • popular-thumbnail-on.php

itiranは新着記事、kanrenは関連記事、popularはおすすめ記事。

 

popular-thumbnail-on.php

<dl class="clearfix">
<dt class="poprank"><a href="<?php the_permalink() ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>

上記コードを探し、<dl class="clearfix">の後ろにカスタムクラスをつける。

例:<dl class="clearfix kanren-thumbsize">

同様のことを先にダウンロードした全てのphpファイルに行う。

 

子テーマのstyle.cssを開き、カスタムクラスを追加する。

  /*サムネイルサイズ*/
.kanren-thumbsize dt {
width: 80px;
}
.kanren-thumbsize dt img {
width: 80px;
}
.kanren-thumbsize dd {
padding-left: 95px;
}

widthのサイズを好きなように変更し、padding-leftはwidth+10px~15pxに設定。

私はスマホでのみサムネイル画像を小さくするため、スマホ用@meida Queries内に記述した。

大きくはしてないので推測になるけど、設定→メディア→サムネイルのサイズを変更し、Regenerate Thumbnailプラグインでサムネイル再生成をする必要があるかもしれない。

 

 

おすすめ記事

任意の場所に追加

AFFINGER5の管理画面から追加できるおすすめ記事の場所は限られている。そこで直接phpに書き込んで好きな位置に表示させる。

ここではサイドバーの一番下に追加する。他の場所に追加したい場合でも、この方法を参考にしながらやってみてほしい。

 

親テーマからsidebar.phpを子テーマへコピーする。

sidebar.php

<?php if ( is_active_sidebar( 1 ) ) { ?>
<div id="mybox">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 1 ) ) : else : //サイドウイジェット読み込み ?>
<?php endif; ?>
</div>
<?php } ?>
<div class="smanone">
<?php get_template_part( 'popular-side-thumbnail-on' ); //サムネイルあり ?>
</div>
<div id="scrollad">
<?php get_template_part( 'popular-thumbnail-sc' ); //任意のエントリ ?>
<?php get_template_part( 'scroll-ad' ); //追尾式広告 ?>
<?php if ( isset($GLOBALS['stplus']) && $GLOBALS['stplus'] === 'yes' ) {
get_template_part( 'st-rank-side' ); //ランキング
} ?>

40行目~42行目が追加したコード。基本的には41行目のコードをサイドバーの好きな場所に入れれば良い。smanoneを指定しているのは、PC表示でのサイドバーでのみ適用したかったからだ。必要なければ40と42は削除でOK。

サイドバーでない場合はpopular-thumbnail-onなので注意。

 

サムネイル画像のサイズを変更する

popular-side-thumbnail-onを親から子テーマへコピーする。

サムネイル画像→画像サイズの変更を参考にしてください。

 

 

メディアクエリ

切り替えポイントの変更

PCビュー・タブレットビュー・スマホビューの切り替わりポイントの変更をします。

親テーマのstyle.cssを直接カスタマイズ。

親テーマ内のファイルを直接編集するので、バックアップ厳守で。

 

Ctrl+Fで「@media」と検索しよう

@media only screen and (max-width: 959px) {

上記のようなコードがメディアクエリの切り替えポイント指定。

これがそれぞれ

  • スマートフォンとタブレットサイズで適応したいCSS
  • タブレットサイズのみで適応したいCSS
  • タブレット以上で適応したいCSS
  • PCサイズ以上で適応したいCSS

と4種類あるので、それぞれ切り替えたいポイントへ変更していく。

 

次にst-kanricss.phpというファイルを親テーマ内で直接カスタマイズ。

ここでも「@media」で検索し、切り替わりポイントをstyle.cssの変更に準じて変更する。

これで切り替わりポイントが無事に変わったはず。

 

 

アドセンス

トップページの下に広告表示

初期設定ではトップページに広告が表示されない。

外観→ウィジェット→トップページ下部ウィジェット

ここにカスタムHTMLを追加し、アドセンスコードを貼るだけ。

レスポンシブが良いと思う。

 

スマホで広告が全幅表示され、右側が切れる

アドセンスはスマホビューだと全幅表示されるようになっている。

全幅をやめて通常通りボックス表示したい場合は以下を参考。

 

AFFINGERだと少し手を加えないと以下のようになってしまう。

分かりづらいが、赤枠の部分まで広告が見えているはずだが真っ白くなってしまっている。

これはcssでoverflow: hidden;ではみ出し部分が見えないように指定されてしまっているせい。

st-ad-on.phpを見れば分かるが、スマホ用の広告に適用しているクラス名はadsbygoogle

 

子テーマへ以下のコードを書き足せばok。

子テーマのstyle.css

.adsbygoogle {
overflow:visible;
}

これで右端が白く切れることがなくなったはず。

インフィード広告とかの場合も同様に、overflow:hidden;を上書きしてあげれば良い。

 

 

Powered by AFFINGER5

フッターのクレジット削除

phpでは探せなかったので素直にプラグインを使用。

プラグイン→新規追加→プラグインのアップロード→ファイルを選択

AFFINGER5のダウンロードファイル内にあるcredit-remover.zipを選択して有効化。

こんなのもあります

1

オフィスで使うために電源タップを探していたのだが、まぁタップにも色々種類があるようで。Amazonなんかで迷ったときのためにちょっとしたまと ...

2

大事なファイルはセキュリティ機能付きのUSBメモリに保存しておくのがオススメ。私は仮想通貨のパスワードを記載したエクセルファイルやウォレット ...

3

Youtubeで配信用や作業用に垂れ流せるオススメの音楽チャンネルを5つ紹介。どれも登録者数が多い人気チャンネルだ。 ちなみにそのまま流すと ...

4

iQOSの掃除、皆さんどうしていますか? 私は購入した時にタバコ屋の店員さんから教えてもらった通りにしています。掃除するとやっぱり吸い心地が ...

-Wordpress

Copyright© VanBlog , 2018 All Rights Reserved.