見出し画像

アフィンガー・カスタマイズ備忘録メモ

Koichi

■アドセンス画像の遅延読み込み

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyloadads = true;
}
}, true)
//]]>
</script>


■Twitter貼り付け

<a class="twitter-timeline" data-height="400" href="https://twitter.com/KoichiBlog?ref_src=twsrc^tfw">Tweets by KoichiBlog</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

■テーマアップロード方法

① infoサイトの閲覧専用ページ
② AFFINGER5EX版更新通知パスワードを入力
③ 外観→テーマで有効化
④ キャッシュの削除、パーマリンクの更新
⑤ テーマアップデートの更新通知をオフにする

Webpを使うためにコノハウイングのhttpskjkjに修正
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

■カラーコード

#23527c 　デフォルトカラー
#3379b7 　テキストリンク、カテゴリ、ボタン
#23527c 　マウスオーバー
#2ac489 　緑（freepik参考）
#fb2f6c 　矢印
#1f2f54 　ダークネイビー

#7B7B7B 記事タイトル（ブログタイトル、プロフィールカード）
#7f7f7f 　見出し背景
#3e3e3e 　基本文字（h2、h3）
#444444 　見出し文字（h2の左余白 50px）
#FFFDE7 　見出し付フリーボックス
#eeeeee 　引用
#ef5350   ランキング赤
#e53935   ランキング赤
#b61b17   ランキング赤

■マナブログ風引用デザイン（追加CSSに入力するだけ、簡単

.post blockquote{
background: #eeeeee;
padding: 20px 20px;
}
.post blockquote::before{
content: '';
    content: "\f10d";
    font-family: FontAwesome;
    color: #b0b0b0;
    font-size: 28px;
    line-height: 1;
    font-style: italic;
}
.post blockquote p{
padding-left: 40px;
padding-right: 40px;
    color: #676767;
    font-style: italic;
}
.post blockquote .p1{
margin-top: 10px;
}
.post blockquote a{
text-decoration: none;
    color: #3379b7;
    font-size: 17px;
}

■テキストリンクの下線を消す（サルワカさん参考

.entry-content p a,
.entry-content li a {
  text-decoration: none;
｝

■マウスオーバー時に下線をつける

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

■内部リンクの下線を消す → 追加CSSに記載

.entry-content p a,
.entry-content li a {
  text-decoration: none;
｝

■マウスオーバー時の色を変える

親テーマのスタイルシートで「マウスオーバー」で検索
カラーコードを変えるだけ
#B22222 　→ #235180

■アーカイブの数字を横に配置する方法

アフィンガー childじゃないアフィンガー のファンクションの最下段に下記貼り付け

//投稿数の表示
add_filter( 'get_archives_link', 'my_archives_link' );
function my_archives_link( $output ) {
  $output = preg_replace('/<\/a>\s*(&nbsp;)\((\d+)\)/',' ($2)</a>',$output);
  return $output;
}

■記事一覧に投稿日のみ、記事に投稿、更新日の両方を入れる方法

子テーマJETの「外観」→「テーマエディター」→「itiran-thumbnail-on.php」を選択して、該当箇所に下記コードをコピペ。

✔︎ Before
<i class="fa fa-refresh"></i><?php the_modified_date( 'Y/n/j' ); ?>

✔︎ After
<?php /* <i class="fa fa-refresh"></i><?php the_modified_date( 'Y/n/j' ); ?> */?>
<i class="fa fa-clock-o"></i><?php the_time( 'Y/n/j' ); ?>

■ヒートマップ導入のため


外観→テーマエディター→header.php→</head>のタグ上にペースト
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "50trxbmp5w");
</script>

■ヘッダーメニューの横幅を均一化

/*ヘッダーメニュー幅*/ 
header .smanone ul.menu li {
 width: 155px !important;
}
※サイト背景色が原因

■CopyRightをプライグイン無しで変える方法（トモキさん引用）

「テーマの編集」という画面になったら、【編集するテーマを選択:】を「WING-AFFINGER5」にして、すぐ横の【選択】ボタンを押す。
【編集するテーマを選択:】のところは「WING-AFFINGER5 Child」を間違えて選択しないようにする。
 次は【テーマファイル】のところで「st-kanri.php」を選択してクリックしてください。
 
コードを書き換える作業。
動作不良の時のために「st-kanri.php」のバックアップ推奨
 
「st-kanri.php」内から下記のコードを探す。
（アフィンガー4132行目〜41237行目あたり？)
 
 html
if ( !function_exists( '_cr_pb' ) ) {
function _cr_pb() {
echo '<p class="' . 'c' . 'o' . 'p' . 'y' . 'r' . '" ' . 'd' . 'a' . 't' . 'a' . '-' . 'c' . 'o' . 'p' . 'y' . 'r' . '>' .
_cr_pb_get_content() . '</p>';
}
}
 
コード全てを下のコードに書き換える。
 
 html
if ( !function_exists( '_cr_pb' ) ) {
function _cr_pb() {
echo '<p class="' . 'c' . 'o' . 'p' . 'y' . 'r' . '" ' . 'd' . 'a' . 't' . 'a' . '-' . 'c' . 'o' . 'p' . 'y' . 'r' . '>' .'Copyright © 任意の文字列 , All Rights Reserved.'.'</p>';
}
}
 
書き換えたら下の方にある【ファイルを更新】を押す。

✔︎ 元のコード

if ( !function_exists( '_cr_pb' ) ) {
function _cr_pb() {
echo '<p class="' . 'c' . 'o' . 'p' . 'y' . 'r' . '" ' . 'd' . 'a' . 't' . 'a' . '-' . 'c' . 'o' . 'p' . 'y' . 'r' . '><small>' .
    _cr_pb_get_content() . '</small></p>';
}
}

✔︎ 書き換えコードは上記

■スマートフォン（～599px）閲覧時のフォントサイズ

基本（Pタグ 他）
サイズ：16 px
/ 行間：30 px
記事タイトル
サイズ： 20px
/ 行間：35 px

H2

サイズ： 20px
/ 行間：27 px

H3

サイズ： 19px
/ 行間：27 px

H4

サイズ： 17px
/ 行間：26 px
記事一覧
サイズ： 18px
/ 行間：26 px

■タブレット（959px～600px）閲覧時のフォントサイズ

基本（Pタグ 他）
サイズ：17 px
/ 行間：35 px
記事タイトル
サイズ：25 px
/ 行間：40 px

H2

サイズ：25 px
/ 行間：35 px

H3

サイズ：20 px
/ 行間：32 px

H4

サイズ：18 px
/ 行間：31 px
記事一覧
サイズ：20 px
/ 行間：30 px

■PC（960px以上）閲覧時のフォントサイズ

基本（Pタグ 他）
サイズ：17 px
/ 行間：35 px
記事タイトル
サイズ：25 px
/ 行間：40 px

H2

サイズ：25 px
/ 行間：32 px

H3

サイズ：20 px
/ 行間：30 px

H4

サイズ：18 px
/ 行間：26 px
記事一覧
サイズ：18 px
/ 行間：26 px

■タグ・カテゴリリンク設定（NOJIさんのブログ参照）

１　以下は最小に199行目にあり、改ページ、広告の行の間にコードを入れた

<?php if ( trim( $GLOBALS['stdata277'] ) === '' ):    // タグ・カテゴリリンク ?>
<p class="tagst">
<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
<?php the_tags( '<i class="fa fa-tags"></i>-', ', ' ); ?>
</p>
<?php endif; ?>

２　改ページの後に「<?php get_template_part( 'sns' );    // ソーシャルボタン読み込み ?>」を挿入

■青枠の文字列行間あける：追加CSSへ記載

.st-mybox.st-mybox-class.padding-add p {
line-height: 40px !important;
}
ダッシュボード＞＞外観＞＞カスタマイズ＞＞追加CSS
に
こちらを追記してください。
40pxのところで調整可能です

■見出しh2の左ライン、フォントの変更：追加CSSへ記載

.h2modoki:before, .post h2:not(.st-css-no):before {
position: absolute;
content: '';
width: 9px;
height: 100%;
background-color: #235180 ;
left: 0;
bottom: 0;
}
.st-author-profile .st-author-nickname, .st-web-font, .st-step-title, .st-point .st-point-text, .n-entry, h4:not(.st-css-no) .point-in, .cat-itiran p.point, .form-submit, .news-ca, .st-widgets-title, .st-widgets-title span, h4.menu_underh2 span, .st-header-flextitle, .post h2:not(.st-css-no), .post h2:not(.st-css-no) span, .post h3:not(.st-css-no), .post h3:not(.st-css-no) span, .h2modoki, .h3modoki, .entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {
font-family: "Noto Sans JP", sans-serif;
font-weight: 600!important;
}
@media only screen and (min-width: 960px){
.post .entry-content h2:not(.st-css-no2), .post .entry-content .h2modoki {
font-size: 20px;
}
}
@media only screen and (max-width: 599px){
.post .entry-content h2:not(.st-css-no2), .post .entry-content .h2modoki {
font-size: 20px;
}
}

■チェックマーク枠上の幅 ：追加CSSへ記載

<p class="mokuji-design"><i class="fa fa-check fa-lg" style="color: steelblue;"></i> <strong>本記事の内容</strong></p>
ダッシュボード＞＞外観＞＞カスタマイズ＞＞追加CSS
に
p.mokuji-design {
margin-bottom: 0px;
}

こちらを設定すると、上記classを設置した段落要素は下のマージンが0になるという意味。

■青枠内の幅を増やす：追加CSSへ記載

.st-mybox.st-mybox-class.padding-add {
padding: 20px 20px 20px 20px;
}

以上です。

この記事が気に入ったらサポートをしてみませんか？