herohoroブログ

簡単に見た目を改造できる場所【まとめ】



🔄   2023-03-14

ブログを改造してみて気づいたことがあります。

  • 「機能」を追加したり変更したりするのは難しい👉アルパカ先生頼み
  • すでに用意されているものに対して色を変えたり位置をずらしたりするのは簡単

簡単(*´∀`*)(*´∀`*)

そこで、「簡単」にできる改造スポットをピックアップしていきますΣ(゚∀゚ノ)ノキャー

簡単にできる理由

どの場所を変更すればいいのか・・・・

を簡単に確認できるアイテムとして【検証】画面の表示があります。

image block

参照:「read-moreの枠を丸くする

ここから場所を特定し、

好きな色のコードを検索したり、

好きなデザインのコードを探したり

しながら修正すればワクワクするブログデザインになる\(^o^)/

image block

好きな色の探し方

「カラーコード」の中の特に薄い色を探したい場合

image block

惹かれるサイトを選ぶ

image block

コードと色とが両方一覧になっているサイト発見\(^o^)/

image block

http://businesswebsite.web.fc2.com/

好きなデザインの探し方

見出しのデザインを探したい場合

image block

色の探し方と同様にして検索し、惹かれるサイトを選ぶ。

image block

https://saruwakakun.com/html-css/reference/h-design

選べる種類・コードが豊富なサイトがベスト\(^o^)/

image block

ちなみに私も二重線を「read more」の装飾に取り入れてます⭐

image block

😊
見出しのデザインはいろんな場所で使えるので便利

簡単に改造できたスポット

実際に改造してみて

「あ、これも検証画面から確認できさえすれば簡単に変更できるのね」って

気づいたスポットを紹介します(*´∀`*)

Read moreの枠
image block

記事リンク:https://herohoro.com/blog/pagelist-readmore-radius

挿入画像の枠取り
image block

記事リンク:https://herohoro.com/blog/page-img-bordercolar

見出し
image block

記事リンク:https://herohoro.com/blog/page-h1_h2-css

リンクのある文字
image block

githubスクショリンク

github差分コード

github差分コード

image block

github差分コード・スクショリンク

image block

github差分コード・スクショリンク

背景色
image block

github差分コード・スクショリンク


検証画面から改造できるスポットを発見次第

随時更新していきまーーーーーーす\(^o^)/\(^o^)/


他の改造で気になる方は「カテゴリー:ブログ改造日記」をご覧ください(*´ڡ`●)

image block

Xではたま〜にする更新のお知らせを行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/