プロの主婦になりたい

家計管理やポイ活などを学んで、主婦のエキスパードになりたい人のブログです。

ブログカスタマイズ①【お世話になったサイト様まとめ】

f:id:mtoki:20190331222208j:plain


こんにちは!トキです。


(※この記事は加筆修正しています)


ちょこちょことブログのカスタマイズをしています。
まだブログデザインは手を付けていませんが、記事のほうは頑張っています♪

そのせいで、ブログを書く時間がなくなるという本末転倒ぶりです。
レイアウトが崩れたり、反映されないこともあって時間がかかるので、
専業主婦でなければ、私にはブログ運営は無理だな・・・と思ってしまいました(;'∀')

自分の備忘録も兼ねて、お世話になったサイト様を紹介します。
すごく詳しく丁寧に載せてくださっているので、本当にありがたいですm(__)m


minimarismというテーマを使用しています

(※現在はHaruniというテーマを使用しています。)

見出しデザイン


まずは見出しがないと読みにくいし、メリハリがつかないので、
真っ先に挑戦したのが見出しです。
種類が豊富なので、どれにするかすごく悩みました。


(※現在はすべての見出しをHaruniのデフォルトデザイン使用しています。紹介しているサイト様へ飛んでも同じデザインはないかもしれません)

大見出し

大見出しのみ、下記サイト様。

www.notitle-weblog.com


中見出し

小見出し


中・小は何かとお世話になっている下記サイト様。

saruwakakun.com


カエレバ・ヨメレバカスタマイズ



今読書中の本を適当に貼ってみました。
私は色を強調しないデザインにしましたが、色を強調したデザインも作られていますよ。

rough-log.com


目次カスタマイズ

私は番号を振らずに使っています。
目次は上のほうにあるので、気になる方は見てみてください。

なぜか☑のアイコンが枠からはみ出すというレイアウト崩れが発生してしまったので、
修正して何とかきれいに表示されました。

.entry-content .table-of-contents::before {の欄
left: 10px;left: 30px;にする

(※現在使用しているHaruniでは修正せずに上手く表示されます)

blog.minimal-green.com


強調したい文章にマーカー風の下線を引く


実は一番苦戦したのがこれです。みんなマーカー引きたいですよね!w
ブログ機能で、太字にする「B」や下線の「U」を押すだけでマーカーが引けるようにしたかったのですが、
色んなサイト様を参考にさせて頂いても、どうしてもうまく表示されませんでした。
PCでは表示されても、スマホでは表示されない場合もありました。

結局はHTMLを使用して使っています。
始めてみると特に面倒ということもなく、無駄に時間を使ってしまった感があります。

太字にしたくないときもあるかな、と思ったので、太字のタグ(font-weight:bold;)は外して使用しています。
ただ、大体は太字にしたいのでその内太字のタグを戻そうかと思っています(^-^;

affiliate150.com


文章をボックスで囲む

シンプルなものを選択しました。

こちらも可愛いなと思って導入。

point

タブ風

POINT

文字を囲めるのも可愛い

saruwakakun.com


ブログ記事の文字サイズを変更する


minimarismは、文字サイズが小さめだなぁと思っていました。
その分スタイリッシュで、デザインには合っているのですが、
個人的にはもう少し大きめのほうが、読みやすいと思って変更しました。

コード自体は簡単なのですが、文字サイズに悩んだので検索してみると、
書いてくださっている方がいました(*´▽`*)


www.zakkiblog.net


.entry-content {
font-size:17px;
}

文字サイズ17pxに設定したところ、一発で理想の大きさに!



以上です!

今は会話形式のデザインを使うべく、探っているところであります(^▽^)/