Affinger変更メモ

個人的なメモ。

詳しくない人間が見よう見まねでやってみたもの。

うまくいかないかもしれない。

いつの間にかうまくいかないようになっている場合もあり

『headに出力するコード』に記入

Affingerの場合は「headに出力するコード」にそのページのみに適用したいコードを記入する。

<style></style>で囲む。

行が空いているとうまくいかない。

プレビューで見てもすぐには変わらない。

<style></style>

アイキャッチを非表示

アイキャッチを投稿記事に表示させない(設定によって変わるかもしれない)

下は「アイキャッチ画像をタイトル下表示に変更する」チェックを入れてる場合

<style>.st-eyecatch-under {display: none;}</style>

アイキャッチの形などを変更

楕円にする

アイキャッチを楕円にする

<style>
.st-eyecatch-under img {
height: 100%;
width: 100%;
border-radius: 50%;/*角を丸める*/
object-fit: cover;/*縦横比を維持*/
position: relative;
}
</style>

半透明の黒いカバー

アイキャッチの上に半透明の黒いカバーをつける

<style>
.st-eyecatch-under::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.6);/*半透明の黒(R,G,B,透明度)*/
border-radius: 50%;/*角を丸める*/
object-fit: cover;/*縦横比を維持*/
}
</style>

うまくいかない場合以下をつける

.st-eyecatch-under img {
position: relative;
}

楕円に変更＋半透明の黒いカバー

アイキャッチを楕円に変更、半透明の黒いカバーをつける

<style>
.st-eyecatch-under img {
height: 100%;
width: 100%;
border-radius: 50%;/*角を丸める*/
object-fit: cover;/*縦横比を維持*/
position: relative;
}
.st-eyecatch-under::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.6);/*半透明の黒(R,G,B,透明度)*/
border-radius: 50%;/*角を丸める*/
object-fit: cover;/*縦横比を維持*/
}
</style>

記事のバックの色を変える

以前に記載していた内容だとうまくいかなくなっているが「!important;」を付ければうまくいくかもしれない

記事の周囲の色を変える

<style>
body.custom-background {
background: #ffffff!important;
}
</style>

記事の周囲の色をグラデーションにする(横のみ)

<style>
body.custom-background {
background: linear-gradient(to right,#f9fcff,#f9fff9)!important;
}
</style>

グラデーションの向きを変える場合

 linear-gradient(#f9fcff,#f9fff9)/*上から下へ*/
 linear-gradient(to right,#f9fcff,#f9fff9)/*左から右へ*/
 linear-gradient(45deg,#f9fcff,#f9fff9)/*45度*/

投稿記事の中の色を変える

<style>.mainbox{background: #f9fcff;}</style>

<style>.ad {display: none;}</style>

スクロール広告を非表示

スクロール広告を非表示にする

<style>div#scrollad{display: none;}</style>

SNSボタンを非表示

上下のSNSボタンを非表示にする

<style>.st-sns-singular{ display: none;}</style>

上のSNSボタンのみ非表示にする

<style>.st-sns-top{ display: none;}</style>

ヘッダー部分

ブログ名のバックの色を変更

<style>div#headbox-bg{background: #f9fcff;}</style>

カテゴリーメニューのバックの色を変更(さかい目の線は残る)

<style>div#st-menuwide{background: #f9fcff;}</style>

カテゴリーメニューを非表示

<style>div#st-menuwide{ display: none;}</style>

目次を非表示

「Rich Table of Contents」を使っている場合

<style>.rtoc-mokuji-content {display: none;}</style>

広告の非表示

「設定内の広告を表示しない」で非表示

「設定内の広告を表示しない」で非表示されるもの

• Affinger管理画面で設定する広告
• ウィジェットの「広告」記載のある場所
• ウィジェットの「カスタムHTML(広告用)」を利用したもの

特定の広告を非表示

ウィジェットや個別投稿(single.php)に挿入するコードにわかりやすい名前(ここでは「sponsor」)を付けておく

<div class="sponsor"> 広告コード </div>

「headに出力するコード」に以下入力

<style>.sponsor {display: none;}</style>

<style>.ad {display: none;}</style>

画像のキャプション

画像を左寄せにした時キャプションを画像の真下につける。

カラムに画像を入れて幅指定した方が早いかもしれない

画像の「追加cssクラス」でクラス名を入力し、幅を指定する。

（キャプションが長い時はその幅で改行される)

例）追加cssクラス「fig1」、画像の幅100px

画像の「追加cssクラス」

fig1

headに出力するコード

<style>
.fig1 {
    width: 100px;
}
</style>

キャプションごと線で囲って余白をつける

<style>
.fig1 {
    width: 100px;
    margin: 0 0 1.5em;
    padding: 8px 8px 3px;
    border: #eaedf2 2px solid;
}
</style>

利用できそうなもの

display: none;/*表示させない*/
background: transparent;/*透明にする*/
!important/*優先*/