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

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

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

POINT

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

こんな感じに変更（PC）

Before

After

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズをする準備

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
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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;
}}