別館ほっこりおうちごはん

糖質制限寄り食生活やレシピの開発をしてます。ゆる断糖生活の、のんびり外食日記や日々の事。

Hatena Instagram Youtube


☆★☆レターポットは【 こちら】お手紙頂けると嬉しいです★☆☆

スポンサードリンク



可愛いデザインではてなブログPC版・スマホ版カスタマイズ




スポンサードリンク



ブログを可愛らしくしたくてメインブログ、この別館ブログともにテーマを変更、カスタマイズをし直しました。

 

このブログのテーマはyumekawa

f:id:misumisu0722:20180501234509j:plain

Yumekawa - テーマ ストア

リライト2019-11-22

 

カスタマイズ初心者のわたしにとって、なんとかカスタマイズしたブログをまた変えるのはとにかく一苦労。

 

どこに何を入れててどうなってるのかを自分で把握していないのでかなり気合を入れてからでないとなかなか変える気も起こりません。

 

そんなわけで今日はまた次回自分が変える時のために覚書きとしてわかりやすく変更点をまとめます。

 

 

 

 

 

 

 以前使用テーマはBrooklyn

 

以前使わせて頂いていたテーマは(メインブログ、別館ブログともに)「Brooklyn」

Brooklyn - テーマ ストア

 

CSSに記述されているのでグローバルナビやシェアボタンなどが簡単に付けられます。

www.notitle-weblog.com

 

Brooklyn使用時↓

f:id:misumisu0722:20180501235511j:plain

 

 

 

「可愛い」というより「かっこいい」感じ。

初心者の自分でも(なんとか)グローバルメニューやシェアボタンが設置でき使いやすい人気のテーマです。

 

 

Brooklynカスタマイズ

 

 

追記2019-11-22

現在メインブログでBrooklynを着せ替えして使わせて頂いてます。

やっぱりこれが一番軽いテーマなのでは。。。と思い。

でも実際は色など変更してしまうとかなり重くなりました。

 

f:id:misumisu0722:20191122071609j:plain

 

Brooklynの色変更などカスタマイズはこちら

www.style-yry.com

 

上記記事のCSSを使わせて頂き

  • グローバルナビの色変更
  • タイトルの色変更
  • 本文とサイドバーの間のラインの色変更
  • 記事タイトルと本文の間のラインの色変更
  • サイドバータイトルの文字・囲い・背景の色変更
  • 投稿年月日の色変更
  • フッダーの色変更

を行なっています。

 

また、グローバルメニューにアイコンを表示するのはこちらのサイトから

www.google.co.jp

 

ハートや音符などマークをグローバルメニューに表示させています。

 

f:id:misumisu0722:20191122071611j:plain

 

表示速度はかなり遅くなりましたが可愛くなりました!

 

 

色見本について

 

可愛い色味はサルワカさんの色見本から

saruwakakun.com

 

この中の「可愛い系配色」

  • 8EDAE5(水色)
  • F99695(ピンク)

の2色を使っています。

 

目次のカスタマイズ

 

目次を見やすくオシャレに!

(どれだけいじっても「目次」の文字が1行落ちてるのですが)

 

f:id:misumisu0722:20191122073637p:plain

 

とっても見やすく目立つようになりました!

 

こちらを使わせて頂いてます

www.hs-note.com

 

SNSシェアボタンのカスタマイズ

 

ボックスタイプの見やすいシェアボタン

www.ituore.com

 

 

Stripe(ストライプ)のカスタマイズ

 

 

ここからはテーマ「stripe」のカスタマイズです。

記事執筆当時メインブログPC版ではストライプを使わせて頂いてました。

こちらもガーリーでめちゃくちゃ可愛くてお勧めです

 

こんな感じになりました↓

f:id:misumisu0722:20180502000750j:plain

 

 

使用テーマは一目惚れした「stripe」

stripe - テーマ ストア

 

 

デフォルトはブルー基調なので、こちらをピンクにカスタマイズしています。

ピンクバージョンはこちらから↓簡単に変更できます。

blog.minimal-green.com

 

 

ナビゲーションバーも簡単に設置でき

(こちら↓にコードが記載されています)

stripe - テーマ ストア

 

なによりところどころに散りばめられたストライプやリボン、水色やピンクの文字色がとにかく可愛らしくて。

 

求めていたのはこれだ!と思いました。

素敵なテーマをありがとうございます。

 

f:id:misumisu0722:20180502001355j:plain

 

 

シェアボタンをステッチに

 

ここからは変更点です。

まずはシェアボタン。

縫い付けたワッペンのような可愛いシェアボタンに変えました↓

f:id:misumisu0722:20180502001530j:plain

こちらから↓

blog.minimal-green.com

 レスポンシブで使用される場合スマホ版には数字や文字は入りません。

*メインブログだけ、このシェアボタンを使うと「サイドバーが下に落ちて」表示されました。

*このブログではサイドバーは落ちずに使えています。

 

 

SNSフォローボタンの設置

 

フォローボタンを思わず押したくなるような目立つものに。

以前も使わせて頂いてたフォローボタンはこちらから↓

 

*わたしは「Feedly」と「Google+」をなくして「FBページ」と「YouTube」を加えています。

www.ituore.com

 

 

目次のカスタマイズ

 

こちらから↓

www.yukihy.com

 

番号を付ける

背景色を付ける

段の横幅を調整

 

を入れています。

 

 

その他追加していること

 

関連記事を記事下より下に

記事下に表示される「関連記事」を更に下にするカスタマイズです。

すごく便利でとても気に入ってます!

おかげで広告やFBページのプラグインなどが上部に表示され見やすくなりました。

www.notitle-weblog.com

 

カエレバ・ヨメレバのカスタマイズ

 

カエレバ・ヨメレバが見やすく可愛らしく。

こんな感じになります↓

f:id:misumisu0722:20180502191139j:plain

 

こちらから↓

www.ituore.com

 

FBページのプラグイン

サイドバーと記事下に設置しています。

f:id:misumisu0722:20180502004255j:plain

こちらから↓

happylife-tsubuyaki.hatenablog.com

 

アイコンの設置

 

shirokai.hatenablog.com

 

メインブログ(スマホ版)

PC版で使用しているテーマ「stripe」はレスポンシブ対応なのでスマホでも使用可能。

ですが編集ボタンがなくなるのが手間なのでわたしはスマホは別でカスタマイズしています。

 

 

ピンクを基調に。

f:id:misumisu0722:20180502004811j:plain

f:id:misumisu0722:20180502004825j:plain

 

ほぼこちらから↓使わせて頂いてます。

簡単おしゃれカスタマイズが可能

www.ituore.com

 

 

上のリンク先から

デフォルトのヘッダーメニュー、フッターのリストとメニューを消す

ヘッダーの背景色や文字色の変更

一覧の記事タイトル上の日付色やカテゴリの色

フッターの見出し

などを変えています。

 

 

色はこちらから↓

www.colordic.org

 

 

 

カテゴリバーの設置

 

カテゴリのURLを入力しなくても自動作成できてしまう(すごい!!)

カテゴリーバー↓

f:id:misumisu0722:20180502010920j:plain

 

 

こちらから↓

www.ituore.com

 

 

見出しをガーリーに

 

大見出しh3をリボンに、中見出しh4をストライプに。

f:id:misumisu0722:20180502010913j:plain

 

小見出しh5をギザギザカットに変えています。

f:id:misumisu0722:20180502010917j:plain

 

全てこちらから↓

blog.minimal-green.com

 可愛いデザインをありがとうございます。

 

 

色の変更について

リボン風

background-color→リボンの色

box-shadow→ステッチの上下の色

border-right-color→リボンの折り返しの色

 

ストライプ

border-left→左の線の色

background→シマシマの2色

font-size→120に変更

 

ギザギザ

font-size→100に変更

あとはそのまま使用。

 

 

色変更はこちら↓

www.colordic.org

 

 

月別アーカイブの設置

 

PC版にはデフォルトで付いている月別アーカイブをスマホ版にも。

 

こちらから↓

www.shachikuman.com

 

月別アーカイブを結構自分でよく使用するので、なくてずっと不便に感じていました。

設置できたおかげで大変使いやすくなりました。

 

 

その他

 

SNSフォローボタン

目次のカスタマイズ

FBページプラグイン

関連記事を記事下より下に

カエレバヨメレバのカスタマイズ

 

などはPC版と同じです。

 

 

 

 

yumekawaのカスタマイズ

 

最後にこのブログの現在のカスタマイズです。

テーマは「yumekawa」

Yumekawa - テーマ ストア

 

その名の通り夢かわいいキュートなブログになりました。

 

f:id:misumisu0722:20180502183814j:plain

 

レスポンシブ対応。

PC版は記事一覧がタイルなところも可愛らしいです。

 

 

ヘッダー画像について

 

ブログヘッダー画像はCanvaで作成↓

Canva - 画像加工 & デザイン

Canva - 画像加工 & デザイン

  • Canva
  • 写真/ビデオ
  • 無料

 

素材はこちらから↓頂いています。

girlysozai.com

 

 

グローバルメニュー設置

 

PC版↓

f:id:misumisu0722:20180502184808j:plain

 

スマホ版ではグローバルメニューがこうなります↓

f:id:misumisu0722:20180502183835j:plain

 

CSSに記述済みなのでグローバルメニューが簡単に設置できますよ。

こちらから↓

blog-question.hateblo.jp

 

 

可愛いシェアボタン

 

メインブログと色違いのステッチが可愛いシェアボタン。

f:id:misumisu0722:20180502185107j:plain

 

こちらから↓

blog-question.hateblo.jp

 

 

その他

 

関連記事を記事下より下に

目次のカスタマイズ

SNSフォローボタン

FBページプラグイン

カエレバ・ヨメレバのカスタマイズ

 

はメインブログと同じです。

 

 

広告について

 

「文中にアドセンスを入れる」はこちらから↓

uxlayman.hatenablog.com

 

メインブログの「レシピブログランキングバナー」も上記コードを使用して入れています。

 

 

最後に

 

以上、両ブログのカスタマイズについてまとめました。

 

わたし自身はこういったコードが作成できないので作ってくださっている皆様には感謝のしようもありません。

使わせて頂きまして本当にありがとうございます!

 

 

f:id:misumisu0722:20180531134733j:plain


スポンサードリンク


Hatena Instagram Youtube