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

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

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

この記事では
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
テーマエディター
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;
}}

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

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;

}}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

これでいつ更新したのかわかりますね

他にもいっぱいあるよ

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～ホームへ戻る

手順まとめ

手順をザクッと説明

変更手順

PORIPUの設定。
FTPソフトとテキストエディタを開いて準備OK。
追加のコードを書き込んで、保存。アップロード。
更新して確認。

PORIPUさまさまです！

お問い合わせやコメントについて

カスタマイズをする準備

PORIPUの設定

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

手順まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル