こんにちは。ゆうみ(＠yum1u3u)です。
今日は本ブログが使用中のWordPressテーマ「Diver」に追加しているCSSとプラグインを紹介します。
先日の記事ではDiverはデフォルトの時点で十分すぎるほどの機能が備わっていることを書かせて頂きましたが、カスタマイズしていくうちに標準機能だけではカバーできない箇所がいくつかありました。
Diverをこれから購入しようとしている人や、これからDiverのカスタマイズ作業を始めようとしている人の参考になれば嬉しいです。
- これからDiverの購入を検討している人
- Diverのデフォルト機能で出来ないことを知りたい人
- Diverでカスタマイズ作業を始めようとしている人
目次
CSS編
スマホで閲覧した時の左右余白
Diverは初期設定のままでは、全体的にギュッとしてるので少し隙間を開けました。
▼CSSはこちらの記事を参考にさせていただきました！
私はパソコンで閲覧したときの余白はそこまで気にならなかったので、スマホのみ余白の調節しました。
また「フォントサイズ」が少し小さいのと、「段落スペース」「行間」も初期設定のままだとギュッとしているのが気になったので調節しました。
この部分はCSSを書かなくても変更可能です。
WordPressダッシュボード【Diverオプション】→【投稿設定】から調節しました。
フォントサイズは
・PC：16px → 18px
・SP：14px → 16px
に変更しました。（※SP＝スマートフォン）
「段落スペース」「行間」はまだ悩んでいて、数値をちょっとずつ調節しながらしっくりくる間隔を見極め中です。
公式サイト投稿のコンテンツ設定
フォント
フォントは変更するだけでブログの雰囲気がガラッと変わって気分も上がるので楽しいです。
いまはやさしさゴシックを使っています。
非常に気に入ってはいるのですが、ちょっと可愛すぎるかもっていうのと他のも試してみたいな。。と悩んでます。それもまた楽しいです。笑
▼手順は以下の記事を参考にさせていただきました！ルカさんの記事はどの記事もとてもわかりやすくて大好きです！
プラグイン編
目次
目次は初期設定では備わっていないのでプラグインを使用してます。
プラグインは公式サイトで紹介されているTable of Contents Plusをつかいました。
見出し
公式サイト投稿内目次の表示方法
Instagramの埋め込みタイムライン
サイドバーなどに表示されるこういうやつです。
「instagram-feed」というプラグインを使用しています。
インスタの埋め込みタイムラインがあると一気にオシャレ度が増す気がしてモチベーションも上がります笑
その他：埋め込みHTMLとChromeのプラグイン
Twitterの埋め込みタイムライン
Twitterは埋め込みタグを生成するツールがあるのでこちらを使用してます。
ブログカード
ブログカードとは、↓こういうやつです。参考にさせていただいた記事へのリンクによく使います。
こちらはWordpressではなくGoogleChromeのプラグイン「Create Link」にフォーマットを追加し作成しています。
▼こちらの記事を参考にさせていただきました。
以上が私がDiverに追加しているCSSとプラグイン（+その他）です。
無料のテンプレートの場合、たくさんのCSSやプラグインを追加しなければいけないこととなり、CSSがぐちゃぐちゃになったりプラグインの機能が重複してしまうことがあるのですが（実際にやったことある汗）Diverのはもともとの機能が充実しているためダッシュボードをすっきりさせることができます。
この記事がこれからDiverの購入を検討している人やDiverでカスタマイズ作業を始めようとしている人のお役に立てたならうれしいです！
