仮想通貨とデザイン｜WordPressテーマJINのカスタマイズ

こんにちは、エンジェル投資家のびずぷら（＠bizpla11）です。

この記事は投資を少し離れてブログカスタマイズについて語っちゃいます！

びずぷらは投資家である前に、ブロガーでありプログラマーでありたいと本気で思ってます。今回は後者二つ「ブロガー x プログラマー」的な内容となります。

ブロガー以外には通じない用語が多いと思いますが、投資ブログの番外編、いちいち基本の解説はしません。

では、さっそく。

このブログはワードプレステーマのJINを使って作っています。非常に使いやすいテーマで、ほとんどカスタマイズは必要ありません。書くことに集中できます。

これからWordPressでブログを始めるという方にはJINはオススメです。

JINの公式ページ

非常に使いやすいテーマのJINですが、びずぷらのこだわりのため、いくつかカスタマイズをしています。

今回は、その中でも下記の2点を中心にご紹介します。

仮想通貨の価格を表示する
ワードプレステーマ JINのデザインを変更する

はなえる

仮想通貨は投資ブロガーびずぷらくんらしい内容だね

びずぷら

かなりマニアックな内容ですが、参考にして頂けたら幸いです！

WordPressに仮想通貨の価格表示
- JINのインフォバーに仮想通貨を表示
- ショートコードで仮想通貨を表示
WordPressテーマJINデザイン修正
まとめ

WordPressに仮想通貨の価格表示

そろそろ本格的に仮想通貨に参戦したいと思い、日々価格を見て相場観を身体に染み込ませています。

ここは投資家ブロガーの矜持として「ブログに仮想通貨の価格を表示する」にチャレンジしてきました。

ブログに表示させる場所は下記の２箇所。

JINのインフォバー（画面上部）に表示
ショートコードで記事内に表示 (JIN関係ないけど・・）

JINのインフォバーに仮想通貨を表示

JINのカスタマイズ画面で固定テキストをインフォバーに表示できるようになりました。ただし仮想通貨の現在価格をロードするたびに取得して表示したい、といった動的にテキストを変更するには、ひと手間加える必要があります。

解決法を簡単にいうと「cps_info_text」という変数に値をfunction.phpでセットすることで表示できます。

仮想通貨の値はzaifのapiで最新の価格を取得しています。下記のソースコードではBTCとETHの2つの通貨を取得して表示するものです。

function bizInfo() {
	$responce = file_get_contents('https://api.zaif.jp/api/1/last_price/btc_jpy');
   $array = json_decode($responce,true);
	$info_text = 'BTC: ' . number_format($array['last_price']) . '円';
	
	$responce = file_get_contents('https://api.zaif.jp/api/1/last_price/eth_jpy');
   $array = json_decode($responce,true);
	$info_text = $info_text . '　/　ETH: ' . number_format($array['last_price']) . '円　';
	
	return $info_text;
}

set_theme_mod('cps_info_text', bizInfo());

function bizInfo() {

$responce = file_get_contents('https://api.zaif.jp/api/1/last_price/btc_jpy');

$array = json_decode($responce,true);

$info_text = 'BTC: ' . number_format($array['last_price']) . '円';

$responce = file_get_contents('https://api.zaif.jp/api/1/last_price/eth_jpy');

$array = json_decode($responce,true);

$info_text = $info_text . '　/　ETH: ' . number_format($array['last_price']) . '円　';

return $info_text;

}

set_theme_mod('cps_info_text', bizInfo());

はなえる

このブログ「エンジェル投資入門」に表示されているものだね

ショートコードで仮想通貨を表示

WordPressであればテーマは関係ないですが、記事の中に仮想通貨を表示することも行なっています。下記の記事を参照ください。

今のモナコインの価格は134円です。

WordPressに仮想通貨の価格を表示してみよう！こんにちは、日曜プログラマーのびずぷらです。遅ればせながら仮想通貨に参戦しています。仮想通貨ブログをしている人もいると思いま...

WordPressテーマJINデザイン修正

JINのデザインはとてもよく出来ています。こだわりがなければ、そのまま使うことで全く問題はありません。

しかーし、びずぷらのこだわりとして「JIN丸すぎ問題」は放置できません！

以下の例をみて下さい。JINの標準です。

はなえる

丸すぎーーo(｀ω´ )o

この問題を認識するには、デザイン本としてかなり秀逸な「伝わるデザインの基本」に書かれている「角を丸めすぎない」を読んでもらうのが一番です。

伝わるデザインの基本増補改訂版よい資料を作るためのレイアウトのルール

posted with カエレバ

高橋佑磨,片山なつ技術評論社 2016-08-05

Amazon

楽天市場

びずぷら

プレゼン資料のデザインの勉強で参考にしている本です。オススメです

JIN丸すぎ問題への対応

デザインの設定によっては他にも修正が必要かもしれません。代表的なところとして、びずぷらのブログで使っているものを下記に示します。

カスタマイズから追加CSSに下記のコードをコピペすればできます。

/* カテゴリーの丸み設定 */
.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat {
	border-radius: 2px;
	top: 0px;
	left: 0px;
}

/*ベーシックスタイルの丸み */
.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat {
	border-radius: 2px;
	top: 0px;
	left: 0px;
}

/* 関連記事のカテゴリ丸み */
.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat {
	border-radius: 2px;
}

/* 記事トップのカテゴリの丸み */
.cps-post .cps-post-header .cps-post-cat a {
	border-radius: 2px;
}

/* サーチボックスの丸み */
.widget_search .search-box input[type="search"] {
	border-radius: 2px;
}

/* ヘッダの検索の丸み */
#headmenu .headsearch .search-text {
	border-radius: 2px;
}
@media (max-width: 767px) {
	.headsearch .search-text {
 border-radius: 2px;		
	}
}

/* カテゴリーの丸み設定 */

.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat {

border-radius: 2px;

top: 0px;

left: 0px;

}

/*ベーシックスタイルの丸み */

.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat {

border-radius: 2px;

top: 0px;

left: 0px;

}

/* 関連記事のカテゴリ丸み */

.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat {

border-radius: 2px;

}

/* 記事トップのカテゴリの丸み */

.cps-post .cps-post-header .cps-post-cat a {

border-radius: 2px;

}

/* サーチボックスの丸み */

.widget_search .search-box input[type="search"] {

border-radius: 2px;

}

/* ヘッダの検索の丸み */

#headmenu .headsearch .search-text {

border-radius: 2px;

}

@media (max-width: 767px) {

.headsearch .search-text {

border-radius: 2px;

}

このCSS設定をすると以下のようになります。

はなえる

次からは実用的なデザイン修正を2つ続けます

トップへ戻るボタンの色変更

JINは標準機能として、ボタンの色をかなり柔軟に変更することができます。ただし、トップへ戻るボタンの色は変更できません。

下記の画像を見ていただくとわかりますが、画面の一番下までスクロールすると、ボタンと背景色が同じためボタンを見失うことがあります（右下の上向矢印です）。ここは視認性をよくすることを優先して、色を変更しています。

JINフッター

/ トップへ戻る動くボタンの色変更 /
page-top a 
  background-color: #ff8a80; 
}

/ トップへ戻る動くボタンの色変更 /

page-top a

background-color: #ff8a80;

}

はなえる

試しに一番下までスクロールしてみてね。ぜんぶ記事を読むんだよー

標準フォントの変更

JINは非常に良いテーマなのですが、若干パフォーマンスに課題があります。

理由の一つはWEBフォントの利用です。ここでは見やすさよりパフォーマンスを優先して標準フォントを採用することにしました。

せめてフォントの種類を変えたい、という気持ちが高まり、以下の設定をしています。フォントの種類は、サルワカさんの「font-familyメーカー」のオススメを採用しています。

びずぷら

標準フォントを使うことはJINの機能でできますが、フォントの種類を変更することがカスタマイズです

body#nofont-style {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

body#nofont-style {

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳＰゴシック','MS PGothic',sans-serif;

}