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

子テーマ

この記事では
商品管理プラグインのRInkerをシンプルにカスタマイズした方法を説明。
前のRinkerカスタマイズはこちら

こんな感じに変更(スマホ)
Before

After

After 2


めっちゃシンプルにしてみました!

2番目を採用やな
こんな感じに変更(PC)
Before

After

After2

ほんまもんのカード
ソニー(SONY)
¥9,685
(2019/02/22 21:46:24時点 Amazon調べ-詳細)
ソニー(SONY)
¥9,685
(2019/02/22 21:46:24時点 Amazon調べ-詳細)
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
カスタマイズをする準備
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズのコードを追加
パターン1のカスタマイズ
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
/*-------------------------------------- Rinker パターン1 --------------------------------------*/ div.yyi-rinker-contents { border: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; margin: 1em 0; position: relative; } div.yyi-rinker-contents div.yyi-rinker-box { padding: .7em 0; } div.yyi-rinker-contents div.yyi-rinker-image { margin-left: 3%; width: 30%; } div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info { padding: 0 3%; width: 100%!important; } div.yyi-rinker-title { font-size: .9em; } div.yyi-rinker-contents div.yyi-rinker-title p { margin: 0 0 5px 0; } div.yyi-rinker-contents div.yyi-rinker-title a { color: #0066c0; font-weight: 500; } div.yyi-rinker-contents div.yyi-rinker-title a:hover { color: #c45500; } div.yyi-rinker-detail div.credit { font-size: 10px; color: #626262; opacity: .7; font-family: 'Avenir',sans-serif; } div.yyi-rinker-contents div.yyi-rinker-detail a { font-size: 12px; color: #556FB5; font-family: 'Avenir',sans-serif; } div.yyi-rinker-contents div.yyi-rinker-detail { font-size: .8em; color: rgba(0,0,0,.38); padding-left: 0; margin-top: 0; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box { margin: .5em 0; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price { letter-spacing: 0.1em; font-size: 1.2em; margin-right: .5em; } div.yyi-rinker-contents ul.yyi-rinker-links { text-align: center; } div.yyi-rinker-contents ul.yyi-rinker-links li { position: relative; width: 65px; height: 60px; padding: 0; margin: .5em 4% .4em 0; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); font-weight: 500; } div.yyi-rinker-contents ul.yyi-rinker-links li a { height: 60px; line-height: 60px; padding-left: 0; padding-right: 0; border-radius: 3px; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before { display: none; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { background: #FFC266; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a { color: transparent; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before { content: "\f270"; width: 100%; color: #3A4D66; font-family: "FontAwesome"; left: 0; font-size: 30px; line-height: 60px; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { background: #D95656; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ color: transparent; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before { content: "\f25d"; width: 100%; color: #fff; font-family: "FontAwesome"; left: 0; font-size: 30px; line-height: 60px; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { background: #FF4D4D; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{ color: transparent; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink:before { content: "\f19e"; width: 100%; color: #fff; font-family: "FontAwesome"; left: 0; font-size: 30px; line-height: 60px; } div.yyi-rinker-contents ul.yyi-rinker-links li:hover { box-shadow: 0 13px 20px -3px rgba(0,0,0,.24); } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { box-shadow: none; } div.yyi-rinker-contents ul.yyi-rinker-links li a:hover { opacity: 1; } @media (max-width: 500px) and (min-width: 100px){ div.yyi-rinker-contents ul.yyi-rinker-links { -webkit-flex-flow: wrap; flex-direction: row; justify-content: space-between; } div.yyi-rinker-contents div.yyi-rinker-box { display: block; } div.yyi-rinker-contents div.yyi-rinker-image { width: auto; } div.yyi-rinker-info { padding: 0; margin: auto; width: 87%; text-align: center; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price { display: block; } body .yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0; } div.yyi-rinker-contents ul.yyi-rinker-links li { margin: .5em 0% .4em 0; }} |
パターン2のカスタマイズ
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
/*-------------------------------------- Rinker パターン2 --------------------------------------*/ div.yyi-rinker-contents { border: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; margin: 1em 0; } div.yyi-rinker-contents div.yyi-rinker-box { padding: .7em 0; } div.yyi-rinker-contents div.yyi-rinker-image { margin-left: 3%; width: 30%; } div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info { padding: 0 3%; width: 100%!important; } div.yyi-rinker-title { font-size: .9em; } div.yyi-rinker-contents div.yyi-rinker-title p { margin: 5px 0 10px 0; } div.yyi-rinker-contents div.yyi-rinker-title a { color: #0066c0; font-weight: 500; } div.yyi-rinker-contents div.yyi-rinker-title a:hover { color: #c45500; } div.yyi-rinker-detail div.credit { font-size: 10px; color: #626262; opacity: .7; font-family: 'Avenir',sans-serif; } div.yyi-rinker-contents div.yyi-rinker-detail a { font-size: 12px; color: #556FB5; font-family: 'Avenir',sans-serif; text-decoration: none; } div.yyi-rinker-contents div.yyi-rinker-detail { font-size: .8em; color: rgba(0,0,0,.38); padding-left: 0; margin-top: 0; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box { margin: .5em 0; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price { letter-spacing: 0.1em; font-size: 1.2em; margin-right: .5em; } div.yyi-rinker-contents ul.yyi-rinker-links { } div.yyi-rinker-contents ul.yyi-rinker-links li { position: relative; width: 45%; height: 45px; padding: 0; margin: .5em 4% .4em 0; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); font-weight: 500; } div.yyi-rinker-contents ul.yyi-rinker-links li a { height: 45px; line-height: 45px; padding-left: 0; padding-right: 0; border-radius: 3px; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before { display: none; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { background: #FFC266; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a { color: rgba(0,0,0,.54); text-indent: 25%; font-size: 17px; font-weight: 500; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before { content: "\f270"; color: rgba(0,0,0,.54); font-family: "FontAwesome"; left: 5%; font-size: 21px; line-height: 45px; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { background: #D95656; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ color: rgba(255,255,255,.9); text-indent: 25%; font-size: 17px; font-weight: 400; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before { content: "\f25d"; color: rgba(255,255,255,.9); font-family: "FontAwesome"; left: 5%; font-size: 21px; line-height: 45px; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { display: none; } div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { display: none; } div.yyi-rinker-contents ul.yyi-rinker-links li:hover { box-shadow: 0 13px 20px -3px rgba(0,0,0,.24); } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { box-shadow: none; } div.yyi-rinker-contents ul.yyi-rinker-links li a:hover { opacity: 1; } @media (max-width: 1000px) and (min-width: 100px){ div.yyi-rinker-contents ul.yyi-rinker-links { -webkit-flex-flow: wrap; flex-direction: row; justify-content: space-between; } div.yyi-rinker-contents div.yyi-rinker-box { display: block; } div.yyi-rinker-contents div.yyi-rinker-image { width: auto; } div.yyi-rinker-info { padding: 0; margin: auto; width: 87%; text-align: center; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price { display: block; } div body .yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0; } div.yyi-rinker-contents ul.yyi-rinker-links li { margin: .5em 0% .4em 0; width: 48.5%; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:before { left: 7%; font-size: 18px; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before { left: 7%; font-size: 18px; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a { text-indent: 10%; font-size: 14px; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ text-indent: 10%; font-size: 14px; }} |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

長いコードで頭がおかしくなりそうです。
手順まとめ

手順をザクッと説明
変更手順
- リンカーの設定
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。

もっとたくさん考えてたけど、コードを書くのが大変過ぎて、、、

いや、1個で十分やろ