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

WordPress

どうも和波です。

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

スポンサーリンク
スポンサーリンク

TablePressのデザイン修正

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

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

こんな感じ↓

構成銘柄上位比率(%)
Taiwan Semiconductor Manufacturing Co. Ltd.6.2
Tencent Holdings Ltd.5.7
Alibaba Group Holding Ltd.4.9
Meituan1.7
Naspers Ltd.1.1
Reliance Industries Ltd.1.0
China Construction Bank Corp.0.8
Ping An Insurance Group Co. of China Ltd.0.8
JD.com Inc.0.8
Vale SA0.8

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

【VYM】【HDV】【VIG】比較 米国高配当株式系ETFの3つを比較してみる。
【VTI】バンガード・トータル・ストック・マーケットETFは超おすすめの米国ETF!

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

Table of Contents Plusのデザイン修正

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

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

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

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

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

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

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

Simplicity標準装備のブログカードをお洒落にカスタマイズ~デザイン6種【テンプレートー1】
Simplicity標準装備のはてブブログカードをお洒落にカスタマイズする方法~ スタイル6種コピペokのテンプレート1 Simplicityで搭載されている便利なブログカード機能。 表示されるブログカードを装飾して、オリジナル感を出してみましょう。CSSでスタイル出来るデザイン6種掲載しています。

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

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

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

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

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

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

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

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

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

こんな感じに。

その他

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

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

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

スポンサーリンク
スポンサーリンク
WordPress
フォローする

関連記事



このブログは和波の運営する雑記ブログです。
記事の質問やお仕事の相談など、お問い合わせフォームにてお気軽にご連絡ください。
和波の投資生活ブログ@米国株・ETF&テーマ株投資
タイトルとURLをコピーしました