【SANGOを自分でカスタマイズ】PORIPUのトップおすすめ記事に更新マークをプラス

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事では
POROPUで簡単に挿入できる「おすすめ記事トップページ一覧」に更新マークを追加したカスタマイズ方法を説明。

POINT

このカスタマイズは、おすすめ記事をリトライしたのをお知らせすることが目的でやってみたものです。

こんな感じに変更（PC）

Before

After

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズをする準備
- 1.1 PORIPUの設定
2 カスタマイズのコードを追加
3 手順まとめ

カスタマイズをする準備

PORIPUの設定

まだおすすめ記事を設定していない方は

WordPress＞外観＞カスタマイズ＞PORIPUの設定＞トップのおすすめ記事で見出し・ID・タイトルを追加します。

おすすめ記事を設定している方は

WordPress＞外観＞カスタマイズ＞PORIPUの設定＞トップのおすすめ記事でタイトル部分にこちらのコードを追加します。

タイトル部分に追加するコード（更新マーク・更新日）

<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>★タイトル★

★タイトル★

１列目と４列目：更新マークをプラスするコード

２列目：アイコンのコード

３列目：日付をプラスするコード

日付は自分で入力しなくてはなりません。ごめんなさい。

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコードを追加

コメントあり（style.css）

style.css（追加するコード：トップおすすめ記事に更新マーク追加）

/*--------------------------------------
  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 おすすめ記事に更新マークを付ける

--------------------------------------*/

.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）

style.css（追加するコード：トップおすすめ記事に更新マーク追加）

/*--------------------------------------
  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;
}}