投資家スタイル

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

JIN丸すぎ問題対応

こんにちは、エンジェル投資家のびずぷら(@bizpla11)です。

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

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

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

では、さっそく。

 

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

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

JINの公式ページ

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

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

  • 仮想通貨の価格を表示する
  • ワードプレステーマ JINのデザインを変更する
はなえる
はなえる
仮想通貨は投資ブロガーびずぷらくんらしい内容だね
びずぷら
びずぷら
かなりマニアックな内容ですが、参考にして頂けたら幸いです!

WordPressに仮想通貨の価格表示

投資革命

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

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

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

  • 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());

 

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

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

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

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

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

WordPressテーマJINデザイン修正

JIN丸すぎ問題対応

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

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

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

JIN丸すぎる
はなえる
はなえる
丸すぎーーo(`ω´ )o

 

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

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

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;		
	}
}

 

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

JIN丸すぎ対応済
はなえる
はなえる
次からは実用的なデザイン修正を2つ続けます

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

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

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

JINフッター
/ トップへ戻る動くボタンの色変更 /
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 Pゴシック','MS PGothic',sans-serif;
}

 

JINフォント設定

上記のカスタマイズは、JINのフォント設定を「デフォルト」にしておく必要があります。(カスタマイズ > サイト基本設定 > フォント設定)

CodeCamp

まとめ

今回はワードプレステーマJINのカスタマイズをご紹介しました。

  • 仮想通貨の価格を表示する
  • JINのデザインを変更する

実用性としては、トップへ戻るボタンの色変更・フォント変更あたりが使える内容だと思っています。もし良かったら参考にしてください!

それでは。

Prophetで日経平均予測
AIで日経平均を予言!?2018年末に26,000円(Prophetで楽々予測)こんにちは、週末プログラマーのびずぷらです。 QuantXでシステムトレードを勉強してましたが、AIを本気でやるにはMacでのPy...
ABOUT ME
びずぷら
エメラダでエンジェル投資をはじめました。まだまだマイナーな投資方法ですが、ニッポンのために盛り上げていきたいと思います! 本家のサイトでは思考力・行動力・マネジメントについて本気で書いています。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です