こんにちは、エンジェル投資家のびずぷら(@bizpla11)です。
この記事は投資を少し離れてブログカスタマイズについて語っちゃいます!
びずぷらは投資家である前に、ブロガーでありプログラマーでありたいと本気で思ってます。今回は後者二つ「ブロガー x プログラマー」的な内容となります。
ブロガー以外には通じない用語が多いと思いますが、投資ブログの番外編、いちいち基本の解説はしません。
では、さっそく。
このブログはワードプレステーマのJINを使って作っています。非常に使いやすいテーマで、ほとんどカスタマイズは必要ありません。書くことに集中できます。
これからWordPressでブログを始めるという方にはJINはオススメです。
非常に使いやすいテーマのJINですが、びずぷらのこだわりのため、いくつかカスタマイズをしています。
今回は、その中でも下記の2点を中心にご紹介します。
- 仮想通貨の価格を表示する
- ワードプレステーマ JINのデザインを変更する
目次
WordPressに仮想通貨の価格表示

そろそろ本格的に仮想通貨に参戦したいと思い、日々価格を見て相場観を身体に染み込ませています。
ここは投資家ブロガーの矜持として「ブログに仮想通貨の価格を表示する」にチャレンジしてきました。
ブログに表示させる場所は下記の2箇所。
- JINのインフォバー(画面上部)に表示
- ショートコードで記事内に表示 (JIN関係ないけど・・)
JINのインフォバーに仮想通貨を表示
JINのカスタマイズ画面で固定テキストをインフォバーに表示できるようになりました。ただし仮想通貨の現在価格をロードするたびに取得して表示したい、といった動的にテキストを変更するには、ひと手間加える必要があります。
解決法を簡単にいうと「cps_info_text」という変数に値をfunction.phpでセットすることで表示できます。
仮想通貨の値はzaifのapiで最新の価格を取得しています。下記のソースコードではBTCとETHの2つの通貨を取得して表示するものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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テーマJINデザイン修正

JINのデザインはとてもよく出来ています。こだわりがなければ、そのまま使うことで全く問題はありません。
しかーし、びずぷらのこだわりとして「JIN丸すぎ問題」は放置できません!
以下の例をみて下さい。JINの標準です。

この問題を認識するには、デザイン本としてかなり秀逸な「伝わるデザインの基本」に書かれている「角を丸めすぎない」を読んでもらうのが一番です。
JIN丸すぎ問題への対応
デザインの設定によっては他にも修正が必要かもしれません。代表的なところとして、びずぷらのブログで使っているものを下記に示します。
カスタマイズから追加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 | /* カテゴリーの丸み設定 */ .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は標準機能として、ボタンの色をかなり柔軟に変更することができます。ただし、トップへ戻るボタンの色は変更できません。
下記の画像を見ていただくとわかりますが、画面の一番下までスクロールすると、ボタンと背景色が同じためボタンを見失うことがあります(右下の上向矢印です)。ここは視認性をよくすることを優先して、色を変更しています。
1 2 3 4 | / トップへ戻る動くボタンの色変更 / page-top a background-color: #ff8a80; } |
標準フォントの変更
JINは非常に良いテーマなのですが、若干パフォーマンスに課題があります。
理由の一つはWEBフォントの利用です。ここでは見やすさよりパフォーマンスを優先して標準フォントを採用することにしました。
せめてフォントの種類を変えたい、という気持ちが高まり、以下の設定をしています。フォントの種類は、サルワカ さんの「font-familyメーカー」のオススメを採用しています。
1 2 3 | body#nofont-style { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic',sans-serif; } |

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

まとめ
今回はワードプレステーマJINのカスタマイズをご紹介しました。
- 仮想通貨の価格を表示する
- JINのデザインを変更する
実用性としては、トップへ戻るボタンの色変更・フォント変更あたりが使える内容だと思っています。もし良かったら参考にしてください!
それでは。
