カスタマイズは自己責任で!
ワードプレステーマ

子テーマ

この記事では
POROPUで簡単に挿入できる「おすすめ記事トップページ一覧」に更新マークを追加したカスタマイズ方法を説明。
POROPUで簡単に挿入できる「おすすめ記事トップページ一覧」に更新マークを追加したカスタマイズ方法を説明。
POINT
このカスタマイズは、おすすめ記事をリトライしたのをお知らせすることが目的でやってみたものです。こんな感じに変更(PC)
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
カスタマイズをする準備
PORIPUの設定
まだおすすめ記事を設定していない方は
WordPress>外観>カスタマイズ>PORIPUの設定>トップのおすすめ記事で見出し・ID・タイトルを追加します。
おすすめ記事を設定している方は
WordPress>外観>カスタマイズ>PORIPUの設定>トップのおすすめ記事でタイトル部分にこちらのコードを追加します。
タイトル部分に追加するコード(更新マーク・更新日)
1 2 3 4 |
<span class="kousin"><span class="blue"> </span><i class="fa fa-refresh" aria-hidden="true"></i><span class="green"> </span><div class="k-hiduke">1.1</div><span class="red"> </span></span>★タイトル★ |
1列目と4列目:更新マークをプラスするコード
2列目:アイコンのコード
3列目:日付をプラスするコード
日付は自分で入力しなくてはなりません。ごめんなさい。
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズのコードを追加
style.css(追加するコード:トップおすすめ記事に更新マーク追加)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*-------------------------------------- PORIPU おすすめ記事に更新マークを付ける --------------------------------------*/ .kousin{/*更新マーク*/ position: absolute;/*基準を元に*/ color: #fff;/*文字の色*/ background: #ffAA52;/*背景色*/ font-size: 23px;/*アイコンのサイズ*/ line-height: 37px;/*行の高さ*/ width: 37px;/*横幅*/ height: 37px;/*縦幅*/ border-radius: 50%;/*丸にする*/ right: 15px;/*右からの位置*/ top: 15px;/*上からの位置*/ transform-origin: 50% 50%; animation: animScale 3.5s ease-out;/*アニメーション*/ } .k-hiduke{/*日付*/ font-size: 16px;/*文字の大きさ*/ white-space: nowrap;/*改行しないように*/ } /***** スマホでの表示 *****/ @media screen and (max-width: 500px){ .kousin { font-size: 12px; line-height: 22px; width: 22px; height: 22px; right: 12px; top: 12px; } .k-hiduke{ font-size: 10px; white-space: nowrap; }} |
style.css(追加するコード:トップおすすめ記事に更新マーク追加)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*-------------------------------------- PORIPU おすすめ記事に更新マークを付ける --------------------------------------*/ .kousin{ position: absolute; color: #fff; background: #ffAA52; font-size: 23px; line-height: 37px; width: 37px; height: 37px; border-radius: 50%; right: 15px; top: 15px; transform-origin: 50% 50%; animation: animScale 3.5s ease-out; } .k-hiduke{ font-size: 16px; white-space: nowrap; } @media screen and (max-width: 500px){ .kousin { font-size: 12px; line-height: 22px; width: 22px; height: 22px; right: 12px; top: 12px; } .k-hiduke{ font-size: 10px; white-space: nowrap; }} |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
これでいつ更新したのかわかりますね
手順まとめ
手順をザクッと説明
変更手順
- PORIPUの設定。
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
PORIPUさまさまです!