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

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

どうも和波です。

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

スポンサーリンク
レクタングル大

TablePressのデザイン修正

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

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

こんな感じ↓

構成銘柄上位比率(%)構成国比率(%)
Taiwan Semiconductor Manufacturing Co. Ltd.3.4中国29.6
Tencent Holdings Ltd.3.4台湾14.7
China Construction Bank Corp.2.0インド13.2
China Mobile Ltd.1.9南アフリカ8.1
Naspers Ltd.1.8ブラジル6.5
Industrial & Commercial Bank of China Ltd.1.4メキシコ5.4
Hon Hai Precision Industry Co. Ltd.1.1マレーシア4.3
Bank of China Ltd.1.1ロシア4.1
Infosys Ltd.1.0インドネシア2.6
Housing Development Finance Corp. Ltd.1.0タイ2.6

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

【VYM】【HDV】【VIG】比較 米国高配当株式系ETFの3つを比較してみる。
17/6/25:投資方針の訂正に伴い、コメントも書き直ししました。 こんにちは、和波です。 最近米国株の考察が滞っていたので、た...
【VTI】バンガード・トータル・ストック・マーケットETFは超おすすめの米国ETF!
私が買っているETFのひとつ、VTIについて考察します。 ※ETFの投資に対する考え方は以下をご参照ください。 また、私...

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

Table of Contents Plusのデザイン修正

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じに。

その他

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

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

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

スポンサーリンク
レクタングル大

▲TOP

▲TOP