★ハングルマスター★

韓国語の勉強を1からスタートできるハングルブログ

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

皆さま、こんにちは。

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

 

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

 

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

f:id:yukik8er:20170827142335p:plain

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

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

「じょーじさん」のコードを拝借しました。
この方のPCサイドバーのプロフィールが、おしゃれ!
いいな~★

georges.hatenablog.jp

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

f:id:yukik8er:20170827145944p:plain

色も好きな色に変更!

saruwakakun.com

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

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

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

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

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

リンクをボタン風に変更!

f:id:yukik8er:20170827151102p:plain

これは、いい!!
こういうの探してたんですよ~。

www.colmin.xyz

もちろん色も好きな色へ変更できます。
スマホでも反映させるには、上に記載した<style>でCSSを挟んで挿入してください。

f:id:yukik8er:20170827151732p:plain

スマホ版。
PCと色を変えて、気分転換!!
私、この青みグレーが好きなんですよ~。
シックな出来上がりに満足。

スマホカスタマイズ!

f:id:yukik8er:20170827151940p:plain

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

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

hitsuzi.hatenablog.com

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

②複合メニューバー固定

www.yukihy.com

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

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

アイキャッチ画像も考えなきゃね

f:id:yukik8er:20170827152732p:plain

ハングルブログなので、韓国の国旗をどうしても使いたかった。
無料の国旗画像をDLし、スマホアプリでぼかしを入れ
記事の単語を挿入。

単語が見えづらいって?
そうしてるんですよ!おにいさん!!笑

このアイキャッチ画像は、単語の記事ですよ!
ということを表したいだけなので
文字がはっきり見えないことの方が重要。
記事を読んでほしいので(´・ω・`)

この加工については、友人にいいサイトを教えて貰いました。

Canva

www.canva.com

ただ、私には高度なサイトで
私は、文字入れのみしか使用していません。

こういうの、さくさく使える人間になりたいものです。

そして当サイトは、モバイル訪問が90%以上で
PCとタブレットは、合わせても10%満たないですw

PCに力を入れる意味は、きっとないと思われる。あはっ!

そして今は、250もの記事のURLを検索ページに張り付けるという作業が終了し、
やりきった感でいっぱいです。

今日は、今から韓国ドラマを観ます。
また、新しい記事は夜に書こう!そうしよう!!

 

ほな、また!!