便利

【簡単】はてなブログ「UnderShirt」をCSSでカスタマイズしてみた😍😊😁 ※随時更新

Pocket

こんにちは😍雲上寺ジェシカです^^
このサイトにご訪問くださった皆様、ありがとうございます😊

ブログを初めて約半年――。
ありがたいことに、毎日150~250件ほどのアクセスがあります。
(まだまだ少ないと思われるかもしれませんが、みてくださる方に感謝感謝です!!)

ブログは超初心者な私ですが、
ブログデザインのお勉強がてら「CSSでカスタマイズ」してみました。

・・・CSSってなんだったっけ?

f:id:mottokoikoi:20190409165120p:plain

(画像引用元:ヤバイうさぎ100%

というレベルで無知だった馬鹿な私を
サポートしてくれる神様のようなサイトのおかげで、
無事新しいデザインにリニューアルし、好き勝手にカスタマイズしました。
(まだ途中ですのでこれからも勉強を続けます><)

というわけで、御礼の意味を込めまして、
参考にさせて頂いたサイトをご紹介させて頂きたいと思います。

【コピペOK】と書いて下さっている優しさよ・・・(涙)

です!!!!!!!!!!!
あなた方ははてな界の神です!!!!!!!

f:id:mottokoikoi:20190409160738p:plain
助けてやるぞよ

お一人ずつに頭を下げて直接お礼を言いたいくらい感謝しております。
タイトルに【簡単】と入れてますが、皆さんのおかげで【簡単】という意味です。

私一人ではカオス過ぎて何もできませんでした・・・(T_T)
本当にありがとうございました!!!!

初めに「UnderShirt」にテーマ変更

・レスポンシブ対応
・「一覧表示」で「記事が2列」になる(PCのみ)

という条件で新しいテーマを探していおり、「UnderShirt」に変更しました。

f:id:mottokoikoi:20190409155312p:plain

アクセス解析をみていると、スマホからみてくださっている方が多く、
スマホでみやすいレスポンシブなテーマにしようと思ったのです。
「UnderShirt」というテーマはスマホでのみえ方を重視したデザインなんだとか。

「最初から変えとけばいいじゃん」と思われる方もいらっしゃると思いますが
もともと無料ブログで初めた頃は「一覧表示」という機能がついておらず、
はてなブログproに移行してから「一覧表示」の存在を知ったわけです><

しかし、以前のテーマに合わせて書いていたので
修正しないといけない記事がいっぱいあって直すのが大変です・・・。

最初から決めたテーマでやり通した方が手間がないので、
最初のテーマ選びは慎重にやることをオススメします。

テーマ選びの参考にさせて頂いたサイトはこちらです。
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

diy-mp.com

www.useful-time.com

「UnderShirt」のアイキャッチ画像の大きさを調整

「UnderShirt」のテーマはそのままだとアイキャッチ画像がちゃんとみえません><

2列表示に変えたせいか、画像が途中で切れて表示されてしまうのです。
アイキャッチ画像をいい感じに調整するのに参考にさせて頂いたのがこちら。
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

www.imuza.com

元のアイキャッチ画像だとリラックマが切れていますが・・・

f:id:mottokoikoi:20190409201344p:plain
み、みえてないぞ!リラックマ!!

↓↓↓
アイキャッチ画像の大きさを調整すると・・・

f:id:mottokoikoi:20190409201432p:plain
ちゃんとみえたーー

このようにアイキャッチ画像がスッキリ!!!
アイキャッチ画像はブログの要だと思いますので、きっちりみせたいですね^^

グローバルナビゲーションをつける

グローバルナビゲーションは、サイトの案内リンクです。
私のブログで言うと、赤い矢印の部分ですね。

f:id:mottokoikoi:20190409160139p:plain

グローバルナビゲーションは、
ユーザーが欲しい目的の情報へ辿り着くのをサポートしてくれるものです。

グローバルナビゲーションがついていると、
「どんなサイトなのか?」「欲しい情報はどこをみればいいのか?」が
わかりやすくなるため、離脱を防ぐ効果があります。

せっかく記事を書いたら最後までみてもらえると嬉しいですよね^^
もともと水色で作っていたのですが、「UnderShirt」のテーマに合わせて黒に変更。
グローバルナビゲーションの参考にさせて頂いたサイトはこちらです。
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

www.yukihy.com

グローバルナビゲーションにアイコンをつける

さあ、楽しくなって参りました^^
せっかくなので設置したグローバルナビゲーションにアイコンをつけたいと思います。
写真の赤色で◯をした部分ですね。

f:id:mottokoikoi:20190409161016p:plain

別になくてもいいけど、あった方がオシャレ!!!!
はてなブログはこのようなアイコンが簡単に設置可能なのです。

f:id:mottokoikoi:20190409161145p:plain

この方のサイトを参考に設置させて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

shirokai.hatenablog.com

シェアボタンを可愛く♡

次にシェアボタンをオシャレにしました。
はてなブックマークやTwitterなどのリンクに飛べるボタンのことです。
この方のサイトを参考にさせて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

blog.kaerucloud.com

この方のシェアボタンは凄いです!!
なんとPC上ではあまり必要ないということで「LINE」ボタンは出ませんが・・・

<PC画面>

f:id:mottokoikoi:20190409161530p:plain

↓↓↓

<スマホ画面>

f:id:mottokoikoi:20190409162458p:plain

スマホだと「LINEボタン」が出てくるんです!!
画面幅が一定数を超えないと出てこない設定にして、
パソコンは出ない、スマホは出るという仕組みになっているのだとか(゜o゜;

私のような素人には理解不能ですが、とにかく凄過ぎます!!

記事タイトルをオシャレに♡

文中に赤色青色を使いがちなので
別の色で作れるオシャレな目次を探していました。

理想はオレンジ・・・と思って探していたところ、
こんな可愛い目次を発見。

f:id:mottokoikoi:20190411194211p:plain

女性らしい可愛いデザイン♪
この方のサイトを参考にさせて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

www.north-geek.com

目次をオシャレに♡

この方のサイトを参考にさせて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

pea-nut.hatenablog.com

www.parucock.com

囲み枠をオシャレに♡

目次をにしたので囲み枠はピンク・・・と思っていたら
こんなカワイイ囲み枠に出会いました♡
重要な点をまとめたり、ポイントを整理したりするのに使います。

f:id:mottokoikoi:20190411194517p:plain
お花のデザイン

この方のサイトを参考にさせて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

saruwakakun.com

0edition.net

見出しをオシャレに♡

この方のサイトを参考に設置させて頂きました♡
↓↓↓

<ありがとうございました>参考にさせて頂いたサイト

saruwakakun.com

参考にさせて頂いた皆様、ありがとうございました!!
今後も随時更新していきます♪

ABOUT ME
mottokoikoi
3児の母でアラサー専業主婦。
%d人のブロガーが「いいね」をつけました。