WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しました。

Apr 11, 2018
Jun 21, 2018
WordPress

熱しやすく冷めやすい、凝り性で飽き性、典型的Ｂ型のどうも僕です（笑）

最近またブログ熱が再燃しておりまして、久しぶりにブログ書こうかなー、でもその前に何か気分転換にテーマ変えたいなーと思って物色していたところ、これは！と思えるテーマを見つけましたのでご紹介します。

新テーマ名は「LION MEDIA」

とにもかくにもデモサイトをご覧ください。
こんなにしっかりしたテーマが何と無料です。

AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION MEDIA[ライオンメディア] – デモサイト

ダウンロードは以下のページよりどうぞ。

テーマ一覧・ダウンロード – FIT-フィット

特徴は数多くありますが、どれも無料で提供されているのが驚きなくらい充実しています。

LION MEDIAの機能・特徴まとめ「55の機能と特徴を備えた多機能で使いやすいWPテーマ」 │ LION MEDIA[ライオンメディア] – デモサイト

カスタマイズ

ここ数日、色々と弄ってみましたので備忘録的に書き残しておこうと思います。

ShareHTML

まずはウェブサイトやブログ記事などを紹介する際に使うブックマークレットですが、久しぶりに調べてみるとShareHtmlを、もっと綺麗にしたメーカーというサイトを発見しました。

ShareHtmlを、もっと綺麗にしたメーカー

ものすごく便利なサイトなんですが、リンク先のページを別タブで開きたい派の私にはちょっと…
それに、サイトによってはOGP設定がちゃんとできてなくて画質の粗い画像が表示されたりすることもあって「う～ん」となっちゃいました。

Chrome拡張機能「Create Link」

なので、上記のサイトを使うのは諦めて他の方法を探していたところ、Google Chromeの拡張機能が良さげでした。

ShareHtmlを上回ったか!?Chrome対応の拡張機能「GetTabInfo」 – 情報管理LOG

取得するコードも自分好みにカスタマイズできるので常用する一歩寸前まで来ましたが、イマイチな点がひとつ。
それは、開いているタブの全部についてコードが取得できるという点でした。
一見すると良さげな感じでしょうけど、できるだけワンクリックで必要なものだけを取得したいのでこれも「う～ん」です。

他にも探していると、Create Linkという拡張機能を見つけました。

URLコピーツールのCreate Linkが便利なのでぜひ使ってほしい｜ Developers.IO

これなら前面タブで開いてるページのコードだけ、しかもあらかじめ設定しておけばワンクリックで取得できます。
ということで、これを採用しました。

HTML

設定画面で以下のようなコードを設定しました。

<a href="%url%" target="_blank">
	<div class="link-box">
		<div class="img-box">
			<img src="http://capture.heartrails.com/195x121/?%url%" alt="%text%" width="195" height="121">
		</div>
		<div class="text-box">
			<p class="title">%text%</p>
		</div>
	</div>
</a>

</div>

</div>

</a>

class名はShareHtmlを、もっと綺麗にしたメーカーを真似てます。
ポイントはボックス全体をaタグで囲っている所ですね。
これも丸パクリですけど（笑）

CSS

CSSは以下のようにしました。

/*----- ShareHTML ----*/
.link-box {
	margin: 0 20px;
	padding: 20px;
	border: 1px solid #d0d0d0;
	background-color: #ffffff;
	display: flex;
	-webkit-box-shadow: 0 0 25px #e9e9e9 inset;
	box-shadow: 0 0 25px #e9e9e9 inset;
}

.link-box:hover {
	background-color: #fafafa;
	transition: background-color .35s;
	-webkit-transition: background-color .35s;
}

.img-box {
	float: left;
	width: 30%;
}

.text-box {
	padding-left: 20px;
	float: left;
	width: 70%;
}

.text-box .title {
	font-size: 1.1em;
	color: #58b2dc;
	font-weight: bold;
}

/*----- ShareHTML ----*/

.link-box {

margin: 0 20px;

padding: 20px;

border: 1px solid #d0d0d0;

background-color: #ffffff;

display: flex;

-webkit-box-shadow: 0 0 25px #e9e9e9 inset;

box-shadow: 0 0 25px #e9e9e9 inset;

}

.link-box:hover {

background-color: #fafafa;

transition: background-color .35s;

-webkit-transition: background-color .35s;

}

.img-box {

float: left;

width: 30%;

}

.text-box {

padding-left: 20px;

float: left;

width: 70%;

}

.text-box .title {

font-size: 1.1em;

color: #58b2dc;

font-weight: bold;

}

CSSは以下のブログで配布されているものを改良させていただきました。

ShareHTMLの新しい形！綺麗な記事リンクHTMLを作れる超便利ウェブツール | あなたのスイッチを押すブログ

スクリーンショットが不完全な場合もありますが、画質の粗い画像が表示されるよりはマシかなと思います。

カエレバ・ヨメレバ

続いては、アフィリエイトに欠かせないリンクツールです。
他にもポチレバとかトマレバがありますが、私はカエレバとヨメレバしか使っていないのでこの２つに絞ってお話しします。
と言っても詳しく解説されている方がたくさんいらっしゃいますので、参考にしてみてください。

商品紹介ブログパーツカエレバ

書籍紹介ブログパーツヨメレバ

コード取得時の設定

カエレバやヨメレバでコードを取得するときに指定するのは以下の項目です。

デザイン：amazlet風(改)-1
画像：小
アイコン：なし

多くのサイトでは「amazlet風-2(cssカスタマイズ用)」を選択するんですが、私はもともと以下の記事のCSSを参考にしていた関係で、今更全部のリンクを貼りなおす心の余裕はなかったので何とか今のままでできないか弄ってみました。

カエレバ・ヨメレバ・ポチレバ用のCSSサンプルをご紹介 | OPENCAGE

CSS

最終的には以下のような形で落ち着きました。

/*----- カエレバ・ヨメレバ -----*/
.kaerebalink-box,
.booklink-box {
	margin: 20px;
	padding: 20px;
	border: 1px solid #d0d0d0;
	min-height: 160px;
	-webkit-box-shadow: 0 0 25px #e9e9e9 inset;
	box-shadow: 0 0 25px #e9e9e9 inset;
}

.kaerebalink-image,
.booklink-image {
	text-align: center;
	float: left;
	width: 30%;
}

.kaerebalink-image a:hover,
.booklink-image a:hover {
	border-bottom: none;
}

.kaerebalink-name a,
.booklink-name a {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.4;
}

.kaerebalink-name p,
.booklink-name p {
	margin: 0;
}

.kaerebalink-powered-date,
.kaerebalink-detail,
.booklink-powered-date,
.booklink-detail {
	font-size: 0.6em;
	line-height: 0.2;
}

.kaerebalink-powered-date a,
.booklink-powered-date a {
	font-size: 0.6em;
}

.kaerebalink-link1 div,
.booklink-link2 div {
	font-size: 0.8em !important;
	margin: 10px 0 !important;
	display: inline-block !important;
}

.kaerebalink-link1 div a,
.booklink-link2 div a {
	font-size: 1.2em;
	color: #ffffff;
	line-height: 1.8;
	text-decoration: none;
	text-align: center;
	margin: 0 0.2em 0.7em 0;
	padding: 0.2em 0.7em;
	border-bottom: 5px solid #777777;
	width: 11em;
	display: block;
	border-radius: 0.3em;
}

.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover {
	color: #ffffff;
	text-decoration: none;
	border-bottom-width: 3px;
	position: relative;
	bottom: -2px;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.kaerebalink-link1 .shoplinkamazon a,
.booklink-link2 .shoplinkamazon a,
.booklink-link2 .shoplinkkindle a {
	border-bottom-color: #dd8500;
	background: #ff9900;
}

.kaerebalink-link1 .shoplinkrakuten a,
.booklink-link2 .shoplinkrakuten a {
	border-bottom-color: #9d0000;
	background: #bf0000;
}

.kaerebalink-link1 .shoplinkyahoo a,
.booklink-link2 .shoplinkyahoo a {
	border-bottom-color: #dd002c;
	background: #ff0033;
}

.kaerebalink-link1 .shoplinkseven a,
.booklink-link2 .shoplinkseven a {
	border-bottom-color: #008f34;
	background: #00b140;
}

.kaerebalink-link1 div a img {
	margin: 0;
}

.booklink-footer {
	clear: left;
}

/* もしもアフィリエイトの場合不要な画像を削除 */
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],
.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkbellemaison img,
.shoplinkcecile img,
.shoplinkkakakucom img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkbk1 img,
.shoplinkehon img,
.shoplinkkino img,
.shoplinktoshokan img {
	display: none;
}

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

/*----- カエレバ・ヨメレバ -----*/

.kaerebalink-box,

.booklink-box {

margin: 20px;

padding: 20px;

border: 1px solid #d0d0d0;

min-height: 160px;

-webkit-box-shadow: 0 0 25px #e9e9e9 inset;

box-shadow: 0 0 25px #e9e9e9 inset;

}

.kaerebalink-image,

.booklink-image {

text-align: center;

float: left;

width: 30%;

}

.kaerebalink-image a:hover,

.booklink-image a:hover {

border-bottom: none;

}

.kaerebalink-name a,

.booklink-name a {

font-size: 1.3em;

font-weight: bold;

line-height: 1.4;

}

.kaerebalink-name p,

.booklink-name p {

margin: 0;

}

.kaerebalink-powered-date,

.kaerebalink-detail,

.booklink-powered-date,

.booklink-detail {

font-size: 0.6em;

line-height: 0.2;

}

.kaerebalink-powered-date a,

.booklink-powered-date a {

font-size: 0.6em;

}

.kaerebalink-link1 div,

.booklink-link2 div {

font-size: 0.8em !important;

margin: 10px 0 !important;

display: inline-block !important;

}

.kaerebalink-link1 div a,

.booklink-link2 div a {

font-size: 1.2em;

color: #ffffff;

line-height: 1.8;

text-decoration: none;

text-align: center;

margin: 0 0.2em 0.7em 0;

padding: 0.2em 0.7em;

border-bottom: 5px solid #777777;

width: 11em;

display: block;

border-radius: 0.3em;

}

.kaerebalink-link1 div a:hover,

.booklink-link2 div a:hover {

color: #ffffff;

text-decoration: none;

border-bottom-width: 3px;

position: relative;

bottom: -2px;

filter: alpha(opacity=60);

opacity: 0.6;

}

.kaerebalink-link1 .shoplinkamazon a,

.booklink-link2 .shoplinkamazon a,

.booklink-link2 .shoplinkkindle a {

border-bottom-color: #dd8500;

background: #ff9900;

}

.kaerebalink-link1 .shoplinkrakuten a,

.booklink-link2 .shoplinkrakuten a {

border-bottom-color: #9d0000;

background: #bf0000;

}

.kaerebalink-link1 .shoplinkyahoo a,

.booklink-link2 .shoplinkyahoo a {

border-bottom-color: #dd002c;

background: #ff0033;

}

.kaerebalink-link1 .shoplinkseven a,

.booklink-link2 .shoplinkseven a {

border-bottom-color: #008f34;

background: #00b140;

}

.kaerebalink-link1 div a img {

margin: 0;

}

.booklink-footer {

clear: left;

}

/* もしもアフィリエイトの場合不要な画像を削除 */

.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],

.booklink-image img[src^="//i.moshimo.com/af/i/impression"],

.shoplinkamazon img,

.shoplinkrakuten img,

.shoplinkseven img,

.shoplinkyahoo img,

.shoplinkbellemaison img,

.shoplinkcecile img,

.shoplinkkakakucom img,

.shoplinkkindle img,

.shoplinkrakukobo img,

.shoplinkbk1 img,

.shoplinkehon img,

.shoplinkkino img,

.shoplinktoshokan img {

display: none;

}

参考にした（コードをいただいた）のは以下のサイトです。

CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]

コピペでOK！カエレバ／ヨメレバのデザインをCSSでカスタマイズしたよ！ | ダチョウのたまご。

また、カラーコードは以下を参考にしました。

主要SNS・WEBサービスのカラーコードまとめ

カラーマネージメントに役立つ！SNSやウェブサービスのカラーコード主要10選 – WEBデザインの勉強だニャー

これで以下のようにいい感じに表示されました。

Fitbit フィットビットスマートウォッチ iONIC 心拍睡眠パーソナルコーチ GPS搭載耐水性能 Charcoal/Smoke Gray チャコール/スモークグレー L/Sサイズ【日本正規品】 FB503GYBK-CJK

posted with カエレバ

Fitbit 2018-01-18

※H30.6.20追記
現在は上記のコードは使用していません。

Popular Posts

続いては、人気記事を取得できるプラグイン「WordPress Popular Posts」のカスタマイズです。

WordPress Popular Posts | WordPress.org

表示例

当ブログでの表示はこんな感じになりました。

プラグインの設定

当ブログではサイドバーに掲載していますので、ウィジェットの設定から行います。
細かいところは省略しますが、ポイントはカスタムHTMLを設定している点です。

定義リストを用いて表示するようにしました。
これで実際に出力されるコードは以下のようになります。

<dl class="wpp-list">
	<dt>
		<a href="https://ryskyshd.com/blogger-stationery-selection/" title="仕事のお供に欠かせない！キングジム ノートカバー マグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション" target="_self"><img src="https://ryskyshd.com/wp-content/uploads/wordpress-popular-posts/4595-featured-90x90.jpg" width="90" height="90" alt="仕事のお供に欠かせない！キングジム ノートカバー マグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a>
	</dt>
		<dd>
			<a href="https://ryskyshd.com/blogger-stationery-selection/" title="仕事のお供に欠かせない！キングジム ノートカバー マグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション" class="wpp-post-title" target="_self">仕事のお供に欠かせない！キングジム ノートカバー マグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション</a>
		</dd>
	
	<dt>
		<a href="https://ryskyshd.com/how-to-use-nouritsu-techo-gold-2016/" title="能率手帳ゴールドの使い方-2016年版-" target="_self"><img src="https://ryskyshd.com/wp-content/uploads/wordpress-popular-posts/5039-featured-90x90.jpg" width="90" height="90" alt="能率手帳ゴールドの使い方-2016年版-" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a>
	</dt>
		<dd>
			<a href="https://ryskyshd.com/how-to-use-nouritsu-techo-gold-2016/" title="能率手帳ゴールドの使い方-2016年版-" class="wpp-post-title" target="_self">能率手帳ゴールドの使い方-2016年版-</a>
		</dd>
	
	<dt>
		<a href="https://ryskyshd.com/i-went-to-sekaido-honten/" title="世界堂の新宿本店へ行ってきました！" target="_self"><img src="https://ryskyshd.com/wp-content/uploads/wordpress-popular-posts/4329-featured-90x90.jpg" width="90" height="90" alt="世界堂の新宿本店へ行ってきました！" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a>
	</dt>
		<dd>
			<a href="https://ryskyshd.com/i-went-to-sekaido-honten/" title="世界堂の新宿本店へ行ってきました！" class="wpp-post-title" target="_self">世界堂の新宿本店へ行ってきました！</a>
		</dd>
	
	<dt>
		<a href="https://ryskyshd.com/my-favorite-paper-notes/" title="私が今愛用中の文房具をご紹介します！－紙・ノート編－" target="_self"><img src="https://ryskyshd.com/wp-content/uploads/wordpress-popular-posts/2879-featured-90x90.jpg" width="90" height="90" alt="私が今愛用中の文房具をご紹介します！－紙・ノート編－" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a>
	</dt>
		<dd>
			<a href="https://ryskyshd.com/my-favorite-paper-notes/" title="私が今愛用中の文房具をご紹介します！－紙・ノート編－" class="wpp-post-title" target="_self">私が今愛用中の文房具をご紹介します！－紙・ノート編－</a>
		</dd>
	
	<dt>
		<a href="https://ryskyshd.com/fountain-pen-for-notebook/" title="手帳用の万年筆" target="_self"><img src="https://ryskyshd.com/wp-content/uploads/wordpress-popular-posts/4247-featured-90x90.jpg" width="90" height="90" alt="手帳用の万年筆" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a>
	</dt>
		<dd>
			<a href="https://ryskyshd.com/fountain-pen-for-notebook/" title="手帳用の万年筆" class="wpp-post-title" target="_self">手帳用の万年筆</a>
		</dd>
</dl>

<dt>

</dt>

<dd>

<a href="https://ryskyshd.com/blogger-stationery-selection/" title="仕事のお供に欠かせない！キングジムノートカバーマグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション" class="wpp-post-title" target="_self">仕事のお供に欠かせない！キングジムノートカバーマグネットタイプ【文具好きブロガー12人が選ぶ厳選！イチオシ文房具セレクション(2016春)】 #ブロガー文具セレクション</a>

</dd>

<dt>

</dt>

<dd>

<a href="https://ryskyshd.com/how-to-use-nouritsu-techo-gold-2016/" title="能率手帳ゴールドの使い方-2016年版-" class="wpp-post-title" target="_self">能率手帳ゴールドの使い方-2016年版-</a>

</dd>

<dt>

</dt>

<dd>

<a href="https://ryskyshd.com/i-went-to-sekaido-honten/" title="世界堂の新宿本店へ行ってきました！" class="wpp-post-title" target="_self">世界堂の新宿本店へ行ってきました！</a>

</dd>

<dt>

</dt>

<dd>

<a href="https://ryskyshd.com/my-favorite-paper-notes/" title="私が今愛用中の文房具をご紹介します！－紙・ノート編－" class="wpp-post-title" target="_self">私が今愛用中の文房具をご紹介します！－紙・ノート編－</a>

</dd>

<dt>

</dt>

<dd>

<a href="https://ryskyshd.com/fountain-pen-for-notebook/" title="手帳用の万年筆" class="wpp-post-title" target="_self">手帳用の万年筆</a>

</dd>

</dl>

少しでも分かりやすくなるようにインデントしてます。

CSS

一気にご紹介しますが、ポイントはアイキャッチ画像の左上にランキングの数字を掲載し、それぞれの背景色を変えてる点です。

dl.wpp-list dd:after {
	clear: both;
	display: block;
	content: "";
}

dl.wpp-list dt {
	margin-right: 5px;
	float: left;
}

dl.wpp-list dd {
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 20px;
}

.wpp-thumbnail {
	margin: 0;
	float: none;
}

dl.wpp-list {
	counter-reset: wpp-ranking;
}

dl.wpp-list dt {
	position: relative;
}

dl.wpp-list dt:before {
	font-size: 12px;
	color: #ffffff;
	line-height: 1;
	padding: 6px 10px;
	position: absolute;
	top: 0;
	left: 0;
	background: #999999;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
}

dl.wpp-list dt:nth-child(1):before {
	background: #e60033;
}

dl.wpp-list dt:nth-child(3):before {
	background: #0095d9;
}

dl.wpp-list dt:nth-child(5):before {
	background: #f08300;
}

dl.wpp-list dt:nth-child(7):before {
	background: #b8d200;
}

dl.wpp-list dt:nth-child(9):before {
	background: #b44c97;
}

dl.wpp-list dd:after {

clear: both;

display: block;

content: "";

}

dl.wpp-list dt {

margin-right: 5px;

float: left;

}

dl.wpp-list dd {

font-weight: bold;

line-height: 1.3;

margin-bottom: 20px;

}

.wpp-thumbnail {

margin: 0;

float: none;

}

dl.wpp-list {

counter-reset: wpp-ranking;

}

dl.wpp-list dt {

position: relative;

}

dl.wpp-list dt:before {

font-size: 12px;

color: #ffffff;

line-height: 1;

padding: 6px 10px;

position: absolute;

top: 0;

left: 0;

background: #999999;

content: counter(wpp-ranking, decimal);

counter-increment: wpp-ranking;

}

dl.wpp-list dt:nth-child(1):before {

background: #e60033;

}

dl.wpp-list dt:nth-child(3):before {

background: #0095d9;

}

dl.wpp-list dt:nth-child(5):before {

background: #f08300;

}

dl.wpp-list dt:nth-child(7):before {

background: #b8d200;

}

dl.wpp-list dt:nth-child(9):before {

background: #b44c97;

}

参考にしたのは以下の記事です。

CSSだけでランキングのカウントを表示する方法とそのデザイン実例 | delaymania

とても分かりやすくてほとんど迷わず設定できました。

カテゴリーリスト

最後はカテゴリーリストです。

【WordPress】カテゴリの投稿数をaタグの中に入れる方法！ | シャッフルブログ

全面的にこちらのブログを参考に弄ってみた結果、当ブログでは以下のようになりました。

CSS

.widget ul li.cat-item {
	padding: 0;
	border: none;
}

.widget ul li.cat-item:before {
	content: "";
}

li.cat-item a {
	padding: 12px 6px;
	border-bottom: 1px dotted #cccccc;
	float: left;
	width: 100%;
	display: block;
	overflow: hidden;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

li.cat-item a:hover {
	background: #fafafa;
}

li.cat-item span.count {
	color: #ffffff;
	background: #000000;
}

li.cat-item a span.count {
	color: #999999;
	padding: 0 5px;
	float: right;
	background: #ececec;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
	border-radius: 5px;
}

li.cat-item a:hover span.count {
	color: #ffffff;
	background: #333333;
}

.widget ul li.cat-item {

padding: 0;

border: none;

}

.widget ul li.cat-item:before {

content: "";

}

li.cat-item a {

padding: 12px 6px;

border-bottom: 1px dotted #cccccc;

float: left;

width: 100%;

display: block;

overflow: hidden;

-webkit-transition: background 0.3s ease;

transition: background 0.3s ease;

}

li.cat-item a:hover {

background: #fafafa;

}

li.cat-item span.count {

color: #ffffff;

background: #000000;

}

li.cat-item a span.count {

color: #999999;

padding: 0 5px;

float: right;

background: #ececec;

-webkit-transition: background 0.3s ease;

transition: background 0.3s ease;

border-radius: 5px;

}

li.cat-item a:hover span.count {

color: #ffffff;

background: #333333;

}

テーマ独自のCSSを打ち消しながらCSSの指定をする点が面倒でもあり面白くもありました。

最後に

いかがでしたでしょうか。
盛り沢山な内容になってしまいましたが、忘れないように記しておきます。
今後は過去記事の修正と、スマホ対応を細かくやってみたいなと思います。
あ、もちろん新規記事の投稿も（笑）

Sorairo