★ハングルマスター★

YUKIKAWAハングル講座☆韓国語の勉強を一緒に始めよう!!

はてなブログカスタマイズ!PC・スマホ【おしゃれ版】初心者でも簡単!

皆さま、こんにちは。

先週から、いろいろとブログ改造計画を立てていたYUKIKAWAです。
そして、やっとまとまったので
今回、お世話になりました記事をご紹介します。

はてなブログ:初心者でも安心カスタマイズ!

PCグローバルメニューにおしゃれアイコン挿入

まず、以前設置していたグローバルメニューの
トグルをやめ、すべての項目が見れるように変更!

www.yukihy.com

いつもお世話になっている「ゆきひーさん」のメニューバーの
2階層を作らず、2列にしてみました。

①背景カラーを変更

www.colordic.org

カラーの変更は、上のコードから好きなカラーをコピペして
【#】の後ろを変更するだけです。

ゆきひーさんのコードは
どこを変更すればいいか分かりやすいので、初心者でも簡単です。

背景カラー以外にも、文字カラーも好きな色にできますよ。

②おしゃれアイコンを挿入

fontawesome.io

コード挿入方法

"URL挿入箇所">〇〇〇カテゴリ<

 カテゴリ名を入れる箇所に、好きなアイコンを入れる

"URL挿入箇所"><i class=例="true"></i>カテゴリ<

アイコンのURLをコピペするだけです。

シェアボタン可愛いのみつけた!

f:id:yukik8er:20170827144908p:plain

カーソル合わせると、シュパン!となるw
これ、見るだけじゃ分からない。

モバイルは変更方法分からず、以前のままですが
PCを訪れた人は、押さなくともシェアボタンにカーソル合わせてみてね。

webgaku.hateblo.jp

フォローボタンもおしゃれなの見つけた!

f:id:yukik8er:20170827145550p:plain

「じょーじさん」のコードを拝借しました。
このご夫婦、おしゃれ!!
私もおしゃれなサイト作りたいな~★

ohama-style.com

記事を目立たせる枠組み作り!

f:id:yukik8er:20170827145944p:plain

色も好きな色に変更!

saruwakakun.com

「サルワカさん」のブログは、とても目に良い色合い。
30種類の枠組みがあるので、いろいろ使えていいですよ。

スマホにも反映させる方法

CSSコードを「デザイン➔スマホ➔フッタ」に以下のコードを挟んで挿入

<style type="text/css">〇〇〇</style>

で、あとは記事のHTML編集で
目立たせたい文を【ここに文章】というところへ入力するだけ。

スマホカスタマイズ!

f:id:yukik8er:20170827151940p:plain

①タイトル下に、おススメ記事をスライドさせる。

スマホカスタマイズ、以前に引き続きお世話になったのは
「こどみすさん」のコードです。

hitsuzi.hatenablog.com

9月にいろいろと書きたい記事があるので
このスライドは、準備のために設置。

②複合メニューバー固定

www.yukihy.com

こちらは、またまた「ゆきひーさん」
私のブログは、主にモバイルからのご訪問なので
モバイルのカスタマイズはきちんと考えなければなりません。

この複合メニューは、ハングル単語を検索しやすいよう設置。
これで、使いやすくなってくれることを願います。

いろんなカスタマイズがありますが
皆さま、上記の方々のカスタマイズを見て自分の理想のブログづくりをしてみよう。
ではまたね。