Techismの記事ヘッダーやフッターにはアイコンフォントと言う
アイコンとフォント両方の扱いの特殊なアイコンが使われている
ヘッダーは日付の横の時計マーク、フッターはカテゴリー名のフォルダマーク等
このアイコンはstyle.cssでは色しか変更できない
そこでこのアイコンサイズやアイコンの種類そのものを変えてみる
設定ファイルは /wp-content/themes/techism/assets/css の中にある
genericons.css
に書かれているのでそれを開き
28px と書いてある部分すべてを 20px あたりに設定
以下に一例を部分的に抜粋する
.more-link:before {
content: '\f403';
display: inline-block;
font: 22px/1 'Genericons';
vertical-align: middle;
pointer-events: none;
text-align: center;
width: 1em;
margin-right: 3px;
}
.posted-on:before {
content: '\f305';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'Genericons';
vertical-align: middle;
}
.entry-date:before {
content: '\f303';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'Genericons';
vertical-align: middle;
}
ここで.more-linkと書いてある部分が
Read more(続きを読む)のボタンに指定してあるアイコンで
content: '\f403';
この部分がアイコンの指定コードなのでこいつを書き換える
コードの指定方法はGenericonsの公式ページから指定したいコード番号を選択
当方の場合はf434を指定
まず以下のコード追記
.genericon-dropdown-left:before { content: '\f434'; }
その後以下のように修正
.more-link:before {
content: '\f434';
display: inline-block;
font: 22px/1 'Genericons';
vertical-align: middle;
pointer-events: none;
text-align: center;
width: 1em;
margin-right: 3px;
}
設定し終わったらこのcssファイルを同じ場所にアップロードし直せば
ブログに反映されるだろう
あとはRead moreの目玉マークを消していた
以下のstyle.cssの設定を消すかコメントアウトする
/* a.more-link:before{
content: unset;
}
*/
これでRead moreのアイコンを変更することができた
*とここまで書いておいてf434の場合はFirefoxでは表示されずに
文字化けしたものが表示された(Edgeでは問題ない)
この作戦は失敗で保留中
コメントを残す