うんよう女子

年収360万円からの資産運用あれこれ

コピペで出来る!はてなブログのおすすめカスタマイズリンク集 

ポプテピピック ヘルシェイク矢野の事考えてる Tシャツ ホワイト XLサイズ

おはようございます、熊猫です。

ゴールデンウィークの時間を持て余しているのでブログをカスタマイズしてみました

(´・ω・`)

 

 

ブログのデザインはとっても大事 

ブログのデザインを少し変えるだけで、記事の信用度、閲覧数はずっと上がります。

視覚的な効果は絶大です。

ちょっと面倒ですが、CSSの設定を変えるだけでその後に各記事は自動で体裁が整います。

毎日記事をコツコツ書くならデザインの見直しもしてみる価値あり、です。

 

デザインを変更する前に

バックアップは必ず取っておきましょう!

テキストファイルにコピっておくだけでOKです。

うっかり必要な記述を消してしまうと、おかしなデザインになってしまって1からやり直し・・・という悲しいことになります。

後から見てもどの記述か分かるようにしよう

CSSを記述するときにそのままコピペするとあとで編集するときに

「これって何の設定の記述だっけ?」となるときがあります。

よくわからないまま記述を増やしてもわかるようにメモを入れておきましょう。

「」のようにhtmlを記述するときはメモを/* メモ*/のように囲めば日本語をメモできます。

さらに/* ------メモ------*/のように強調してからCSSを記述すればより見やすくなるのでできるだけメモして更新していきましょう。

 

少し面倒ですがこれをしておくと後から「このデザイン変えたいな〜」と思ったときにどの記述を削除すればいいのかもすぐわかります。

知っておくと便利な基礎知識

WEBデザインをコピペしてデザインを変えていくのが一番簡単です。

素敵なデザインをそのままコピペするものいいですが、「ちょっと色を変えたい」というときは、カラーコード表をみるとわかりやすいです。

私は下記の色見本が見やすかったのでコピペして活用しました。

WEB色見本 原色大辞典 - HTMLカラーコード

 

参考にしたサイト

オシャレな見出しの変更

saruwakakun.com

 シェアボタンの設置

グレーの落ち着いたデザインがとても好きです。

まるコピしました。

 

hitsuzi.hatenablog.com

 

グローバルナビゲーションの設置

Minimalismをはてなブログのデザインにして、グローバルナビゲーションを設置しました。とても見やすい!

hitsuzi.hatenablog.com

CSSコードで蛍光ペン風に太文字を変更

maroharu16.hatenablog.com

 記事のタイトルは手書き風枠線に

このブログのデザイン、とってもオシャレでです!

シンプルなデザインってやはり美しいですね。

www.north-geek.com

 

ブログタイトルもかわいくしました

ブログのタイトルフォントはこちらを参考にしました。

www.a-s-blog.com

説明文も変更したかったので、下記のリンクも参考にしてCSSを編集しました。

ブログの記事自体も面白いのでフォント可愛くしたい人もそうでない方も必見です。

gattolibero.hatenablog.com

 

関連記事です:

www.kumaneko.xyz