WordPress「Simplicity」のデザインカスタマイズまとめ(プラグイン、カテゴリー)

いつもシェアありがとうございます。シェアボタンはこちらです。

どうも和波です。

またデザインのカスタマイズをしましたので、記録として残しておきます。今回も見栄えの修正メインです。

スポンサーリンク

TablePressのデザイン修正

デフォルトになかった縦の枠線と、見出しセルの色をつけました。TablePressのプラグインオプションでCSS追記するだけです。

こちらのサイト様の記事が私のイメージそのままだったので、丸々ソースコード頂いて色だけ変えました。

こんな感じ↓

構成銘柄上位比率(%)構成国比率(%)
Tencent Holdings Ltd.4.1中国29.0
Taiwan Semiconductor Manufacturing Co. Ltd.3.6台湾16.1
Naspers Ltd.1.8インド11.9
China Construction Bank Corp.1.5ブラジル7.6
Hon Hai Precision Industry Co. Ltd.1.2南アフリカ7.6
China Mobile Ltd.1.2メキシコ4.3
Industrial & Commercial Bank of China Ltd.1.2タイ3.8
Housing Development Finance Corp. Ltd.0.9ロシア3.6
Bank of China Ltd.0.8マレーシア3.5
Ping An Insurance Group Co. of China Ltd.0.8インドネシア2.7

合わせて、過去の海外ETF記事もTablePressで書き直ししました。これで見やすくなりましたね。

【VYM】【HDV】【VIG】比較 米国高配当株式系ETFの3つを比較してみる。
2017/10/5:最新情報を元にリライトしました。 今回取り上げるのはどれも超オススメのETF3つです。結論から言うと、HDVが個人...
【VTI】バンガード・トータル・ストック・マーケットETFは超おすすめの米国ETF!
私が買っているETFのひとつ、VTIについて考察します。17年10月、最新版に更新しています。 ※ETFの投資に対する考え方は以下をご...

WordPressのデフォルトの表は非常に使いにくいので、TablePressのプラグインを導入することをオススメします。表示も綺麗ですし、並べ替えも簡単、Excelなどからデータをインポートすることも可能です。

Table of Contents Plusのデザイン修正

Table of Contents Plusはhタグをリスト化して自動で目次を作ってくれる大変便利なプラグイン。

ただデフォルトのままだとちょっとデザインが合わなかったので、こちらのサイト様の記事を参考に作りました。この記事の一番上を見てみてください。

とっても見やすくなり、気に入っています。ちょっと縦長になりすぎたので、デフォルトでは非表示にして折りたたんでおくか検討中です(このブログはスマホから来るお客さんが多いみたいなので)。

ブログカードのデザイン修正

ブログカードのデザインもカスタマイズしました。

Simplicityでは、URLを挿入するだけで、はてブカードみたいなカード調の引用デザインにしてくれます。デフォルトのデザインもシンプルで綺麗なんですが、ブログカードを使う記事は大体自分の記事なので、もうちょっと目立たせてもいいかなと。

hタグに縦線がなかったこともあり、縦線のあるものを探して、以下のサイト様の記事から利用させていただきました。ちょっと表示してみましょう。

これは本当にすごい。付箋風のデザインに生まれ変わりました。

サイドバーに置くカテゴリーのデザイン修正

サイドバーにあるカテゴリーデザインもちょっといじりました(参考サイト様)。スタイリッシュで素敵な感じです。ただ、記事数を出したいので、ちょっと変更するかもしれません。

追記:こちらのサイト様を参考に、functions.phpを弄ったら成功しました!

あとちょっと気にしているのが、過去の記事が埋もれてしまうのをどうにか出来ないかなと。プラグインでランダム記事の自動生成をするか、自分でオススメ記事リストを作るか。

記事下にある定型文のデザイン修正

この記事の一番下にある赤枠で囲ったやつのことです。div styleで囲んだ中に文字を書けばOKでした→参考サイト様

はじめて知りましたが、今後記事を書いていく上でも便利かもしれませんね。

■注意!! この記事には~が含まれます!!

こんな感じに。

その他

白、黒、赤を抑え、全体の色合いを目に優しい和の色に揃えました。色の見本はこちらのサイト様ご参照

また、合わせてカード調にしていたトップページの記事表示を、デフォルトに近い点線表記に変えました(同じく目に優しい色合いにしたいため)。

この他、関連記事の間に点線入れたり、一部の文字サイズに微修正を施しました。なにか参考になれば幸いです。

▲TOP

▲TOP