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

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に書き込んで好きな位置に表示させる。

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

 

まずはおすすめ記事を設定する。

AFFINGER5 管理を選択し、以下の画面で表示させたい記事をIDで指定。

記事間の,にはスペースを入れない

ここにチェックボックスがある位置への挿入は簡単。私は投稿の記事下に表示するにチェックしている。サイドバーはPCのみでおすすめ記事表示させるようにしているので、携帯で見た際は投稿記事下に表示するようにしている。

 

親テーマから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' ); //ランキング
} ?>

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

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

サイドバートップとサイドバーウィジェットの間にコードを挿入すれば途中でおすすめ記事を表示するなど柔軟にできる。

 

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

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

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

 

サイドバー

ウィジェット間のパディング調整

初期設定だと、ウィジェットで登録するタイトルのpaddingがちょっと微妙なので調整する。

コンテンツと次のタイトルの隙間を少し開けたいので、padding-bottomを変更。

子テーマのstyle.css

/*サイドバーウィジェットのタイトルパディング */
.ad {
padding-bottom: 10px;
margin:0px;
}

上記のコードをコピペする。

サイドバーのウィジェットはadで囲まれているので、ここのpadding-bottomを任意の数字に変更するだけ。15pxくらいがオススメ。

 

SNSアイコンの位置変更

記事下のSNSアイコンを広告の上にする

親テーマから以下の2つのファイルをダウンロードして開く。

  • single-type1.php
  • single-type2.php

どっちかでも良いかもしれないけど、両方で変更しておけば確実かも。

<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>

128行目にある上記のコードを移動する。

 

<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>
<?php get_template_part( 'st-kai-page' ); //改ページ ?>
<?php get_template_part( 'st-ad-on' ); //広告 ?>

115行目に挿入する。これだけ。

 

メディアクエリ

切り替えポイントの変更

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

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

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

 

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

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

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

これがそれぞれ

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

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

 

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

アップデート以降、st-kanricss.phpがなくなりst-themecss.phpに統合された

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

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

 

 

アドセンス

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

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

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

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

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

 

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

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

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

 

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

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

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

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

 

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

子テーマのstyle.css

.adsbygoogle {
overflow:visible;
}

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

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

 

タブレットでアドセンスが横並びにならない

アップデートした後に苦労したのがこれ。オリジナルバージョンだと大丈夫。

タブレットサイズに切り替わった時にアドセンスが横並びにならうず、縦にズレてしまう時の対処法。

 

親テーマにあるst-themecss.phpを開く。

st-themecss.php

Ctrl+Fでアドセンスと検索しよう。

    <?php if(trim($GLOBALS['stdata142']) !== ''){ ?>
/*PCアドセンスを横並び*/
.adbox:after {
content: "";
display: block;
clear: both;
}
.adbox div {
float:left;
margin-right:20px;
padding-top:0!important;
padding-bottom:10px;
}
.adbox div:last-child {
margin-right:0px;
}
<?php } ?>

調整後なのでライン番号は少しズレているかも。

このコードをまるっとコピー。

 

次にCtrl+Fで@mediaと検索し、タブレットサイズ以上のメディアクエリを見つける。

メディアクエリ内に先ほどコピーしたコードをそのまま貼り付けるだけ。

アップデートした後からこの記述が消えてしまった模様。

 

Powered by AFFINGER5

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

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

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

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

新着記事

2018/7/18

Amazonプライムデーセールを終えて。安くなったデバイスの値段リスト

2018年のアマゾンプライムデーセールが終わりましたね。 毎回新しく傘を買い直しているのですが、今年も例にもれず買いました。この前の台風でバキバキにやられたので。折れない傘が欲しい。 アマゾンデバイスもかなり安くなっていました。次回のプライムデーに向けて、割引率や値段はどんなものだったのか備忘録的に置いておこうと思います。 もくじアマゾンプライムデーとは?プライムデーのお得ポイントプライム会員になるか迷っている方へ100%カートでも諦めるな!2018年アマゾンデバイスの値段リストAmazon EchoFi ...

続きを読む

tablet_thumbnail

2018/7/17

そこの目が悪い諸君。iPhoneで漫画読むのやめてタブレット買った方がいいよ

iPhoneのKindleでめちゃくちゃ漫画を買っています。昔から漫画は大量に買う方だったのですが、スペース的に厳しくて電子書籍に移行しました。 携帯1つに漫画本が全部入っているので最高に便利なのですが、iPhoneの小さい画面(iPhone7)で漫画読み続けたせいか、悪い目がさらに悪化した気がしますね。 漫画の文字自体小さいので、漫画を読むなら大きめのタブレット購入が絶対オススメです。 Kindle Fire なんでKindleFireを推すのかっていうと、単純に安いから。 Kindleにはサイズが3種 ...

続きを読む

2018/7/17

0.015BTCから始めるBTCFX PART2

  狩られました。笑 ショートエントリーしてたところ、ロングにはねましたね。$10くらい上のところでストップ成行かけてたんですが、発動せず。そのままゼロカットと相成りました。 ヒゲキャッチ作戦が結構あたっていたんで、調子にのってショートナンピンし続けてたのが良くなかった。全部イカれました。 $10幅で損切りかけてたんで大丈夫かと思ってたら、サーバーがふっとんだのか全然ストップかかりませんでしたねー。恐ろしい。普通にその時板は見てたので手動で成行損切り発動しておけばよかった・・ 資金管理大事よ。 ...

続きを読む

2018/7/16

iPhoneでRAW撮影した写真データをパソコンへ移動する方法を3つ紹介

こんにちは。 iPhoneってRAW撮影できるの?マジ!?ってなったのがつい最近という情弱の私です。 一眼レフではもっぱらRAW撮影が基本になっていたので、iPhoneでのjpeg画像にイライラしておりましたがそれもついに終わりになりそうです。   私はパソコンのPhotoshopで編集する派なので、データをパソコンに移そうと思ったらデータ量が10MBオーバーとな・・メールじゃ無理ですね。 そこで、ここではRAW撮影した写真データをパソコンに移動する方法を紹介します。 RAW写真はJPEGでなく ...

続きを読む

2018/7/12

結婚式でかけたい人気の洋楽を集めました70選!

結婚式で流す曲目って、実は結構膨大なリストになるんですよね。1から探すとぶっちゃけかなり大変。 洋楽好きだからなるべく洋楽流したい、でもそんなに思いつかないよ!っていう人達のために、自身が選んだ曲も含めてオススメの曲を70曲紹介します! 聞いたことあるなという曲から、初めて聞くけどスゴイ良いじゃん!っていう曲まで。自分の結婚式にピッタリな曲がきっと見つかるはず! それでは前置きはこれくらいで。シンプルに紹介していきます。 結婚式に流したい洋楽70選 曲名リンクをクリックするとYoutubeへ飛びます。 ノ ...

続きを読む

ピックアップ

1

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

2

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

3

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

4

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

Copyright© VanBlog , 2018 All Rights Reserved.