2018年10月29日127AFFINGER5で細かく行った色んなカスタマイズを備忘録として置いておきます。今はJINテーマを利用していますが、別のサイトではまだまだバリバリAFFINGER5です。追記:アップデートによって機能が大幅に追加されているので一部のカスタマイズを修正・削除しましたタイトルフォントサイズおすすめ記事・関連記事のサイズ変更affinger5子テーマのstyle.cssを開き、以下のコードをコピペする。}font-sizeとline-heightを自分の好きな数値に変更する。これでおすすめ記事・関連記事のタイトルフォントが変更されます。こちらはアップデートでも項目追加されていないので、CSSをいじる必要があります。スマホビューのみでタイトルフォントを変更したい時スマホビューのみで変更したい場合はメディアクエリで囲ってあげます。--*/}子テーマのstyle.cssにはスマホサイズのメディアクエリがないので独自に追加しました。タブレットサイズのみで変更したい場合は以下のメディアクエリ内に追記します。--*/}これは最初からstyle.css内に記述されていますね。投稿日時とカテゴリを横並びに縦幅が長いなぁと思ったので動かしてみました。親テーマフォルダから以下の3つのファイルを子テーマにコピー。</span></p></div>この部分を書き換える。</span></p></div>46行目を54行目にもってくるだけ。同様のことをitiran-original-thumbnail-on.phpにも行う。?></span>書き換え後のコード。7行目と17行目は<p>になっているので<span>に変更。枠線の太さを変更まずサムネイル画像に枠線を追加する方法。初期値では枠線の太さが3pxに設定されているので太い。親テーマのst-themecss.phpを直接カスタマイズ。st-themecss.phpはバックアップを作成しておきましょう。親テーマ内でのファイル上書きについて親テーマ内で上書き保存すると、テーマをアップデートした時に消えてしまいます。親テーマ内で変更したファイルは子テーマのフォルダにも放り込んでおけば後で分かるのでおすすめ。3pxの部分の数値を好みのものに変更する。私は1pxにしました。角の丸みを調整ちょっと横着します。管理→デザイン→サムネイル画像設定→サムネイル画像を丸くするにチェックこれにチェックを入れるとサムネイル画像が円になる。この丸みを調整してしまおう。子テーマのstyle.cssを開く。img{border-radius:100px;}上記コードを貼り付けて数値を変更。角を少しだけ丸くしたいなら5pxくらい。角の丸みをなくしたければ、サムネイル画像を丸くするのチェックを外すだけでオフ・オン可能になりました。親テーマから以下のファイルを子テーマにコピーする。itran-thumbnail-on.phpitiran-original-thumbnail-on.phpkanren-thumbnail-on.phppopular-thumbnail-on.phpitiranは新着記事、kanrenは関連記事、popularはおすすめ記事。class=”clearfix”>の後ろにカスタムクラスをつける。kanren-thumbsize”>同様のことを先にダウンロードした全てのphpファイルに行う。子テーマのstyle.cssを開き、カスタムクラスを追加する。}widthのサイズを好きなように変更し、padding-leftはwidth+10px~15pxに設定。Queries内に記述した(本記事のタイトルフォントサイズを参照)。Thumbnailプラグインでサムネイル再生成をする必要があるかもしれない。カテゴリーカテゴリー名の変更カテゴリーページに飛ぶと、「カテゴリー名」+一覧と出てきますね。Affinger5では「カテゴリー」からそれぞれ名前の上書きが可能です。「〇〇」一覧というキーワードだけ一括で抜きたい・カテゴリーが多すぎるといった時の変更方法です。親テーマからcategory.phpを子テーマにコピーする。?>この部分の68行目に注目。一覧</h1>となっています。赤文字の部分がテキスト表記なので、好きなように変更します。?>がカテゴリー名です。116行目も同様の行があるので、同じように変更してください。任意の場所に追加AFFINGER5の管理画面から追加できるおすすめ記事の場所は限られています。そこで、直接phpに書き込んで好きな位置に表示させます。ここではサイドバーの一番下に追加します。他の場所に追加したい場合でも、この方法を参考にしながらやってみてほしい。管理を選択し、以下の画面で表示させたい記事をIDで指定。記事間の,にはスペースを入れないここにチェックボックスがある位置への挿入は簡単。私は投稿の記事下に表示するにチェックしています。サイドバーはPCのみでおすすめ記事表示させるようにしているので、携帯で見た際は投稿記事下に表示するようにしています。親テーマからsidebar.phpを子テーマへコピーする。?>39行目~41行目が追加したコード。基本的には40行目のコードをサイドバーの好きな場所に入れれば良い。smanoneを指定しているのは、PC表示でのサイドバーでのみ適用したかったからだ。必要なければ39と41は削除でOK。サイドバーでない場合はpopular-thumbnail-onなので注意。サイドバートップとサイドバーウィジェットの間にコードを挿入すれば途中でおすすめ記事を表示するなど柔軟にできる。サムネイル画像のサイズを変更するpopular-side-thumbnail-onを親から子テーマへコピーする。サムネイル画像の変更を参考にしてください。初期設定だと、ウィジェットで登録するタイトルのpaddingがちょっと微妙なので調整する。コンテンツと次のタイトルの隙間を少し開けたいので、padding-bottomを変更。margin:0px;}上記のコードをコピペする。サイドバーのウィジェットはadで囲まれているので、ここのpadding-bottomを任意の数字に変更するだけ。15pxくらいがオススメ。記事下のSNSアイコンを広告の上にする親テーマから以下の2つのファイルをダウンロードして開く。single-type1.phpsingle-type2.phpどっちかでも良いかもしれないけど、両方で変更しておけば確実かも。?>128行目にある上記のコードを移動する。?>115行目に挿入する。メディアクエリ切り替えポイントの変更PCビュー・タブレットビュー・スマホビューの切り替わりポイントの変更をします。親テーマのstyle.cssを直接カスタマイズ。親テーマ内のファイルを直接編集するので、バックアップ厳守で。{上記のようなコードがメディアクエリの切り替えポイント指定。これがそれぞれスマートフォンとタブレットサイズで適応したいCSSタブレットサイズのみで適応したいCSSタブレット以上で適応したいCSSPCサイズ以上で適応したいCSSと4種類あるので、それぞれ切り替えたいポイントへ変更していく。次にst-themecss.phpというファイルを親テーマ内で直接カスタマイズ。ここでも「@media」で検索し、切り替わりポイントをstyle.cssの変更に準じて変更する。これで切り替わりポイントが無事に変わったはず。初期設定ではトップページに広告が表示されない。外観→ウィジェット→トップページ下部ウィジェットここにカスタムHTMLを追加し、アドセンスコードを貼るだけ。レスポンシブが良いと思う。スマホで広告が全幅表示され、右側が切れるアドセンスはスマホビューだと全幅表示されるようになっている。全幅をやめて通常通りボックス表示したい場合は以下を参考。Adsense公式ヘルプAFFINGERだと少し手を加えないと以下のようになってしまう。分かりづらいが、赤枠の部分まで広告が見えているはずだが真っ白くなってしまっている。hidden;ではみ出し部分が見えないように指定されてしまっているせい。st-ad-on.phpを見れば分かるが、スマホ用の広告に適用しているクラス名はadsbygoogle。子テーマへ以下のコードを書き足せばok。overflow:visible;}これで右端が白く切れることがなくなったはず。インフィード広告とかの場合も同様に、overflow:hidden;を上書きしてあげれば良い。タブレットでアドセンスが横並びにならないアップデートした後に苦労したのがこれ。オリジナルバージョンだと大丈夫。タブレットサイズに切り替わった時にアドセンスが横並びにならず、縦にズレてしまう時の対処法。親テーマにあるst-themecss.phpを開く。st-themecss.phpCtrl+Fでアドセンスと検索しよう。?>調整後なのでライン番号は少しズレているかも。このコードをまるっとコピー。次にCtrl+Fで@mediaと検索し、タブレットサイズ以上のメディアクエリを見つける。メディアクエリ内に先ほどコピーしたコードをそのまま貼り付けるだけ。アップデートした後からこの記述が消えてしまった模様。ブログカードをおしゃれにカスタマイズAFFINGER5にはブログ風カードのショートコードが素材として組み込まれている。そのままだと見た目がシンプルなので、手を加えてみました。AFFINGER5フッターのクレジット削除phpでは探せなかったので素直にプラグインを使用。プラグイン→新規追加→プラグインのアップロード→ファイルを選択AFFINGER5のダウンロードファイル内にあるcredit-remover.zipを選択して有効化。