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

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

Hatena Instagram Youtube


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

スポンサードリンク



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






スポンサードリンク



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

 

このブログのテーマはyumekawa

f:id:misumisu0722:20180501234509j:plain

Yumekawa - テーマ ストア

 

 

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

 

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

 

 

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

 

 

 

【目次】

 

 

 

 以前使用テーマについて

 

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

Brooklyn - テーマ ストア

 

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

www.notitle-weblog.com

 

Brooklyn使用時↓

f:id:misumisu0722:20180501235511j:plain

 

 

 

「可愛い」というより「かっこいい」感じではありますが、初心者の自分でも(なんとか)グローバルメニューやシェアボタンが設置できとても気に入って使っていました!

 

使いやすいテーマを作ってくださりありがとうございます。

名残惜しいですが可愛い系に路線変更するため変えさせて頂きました。

 

 

 

メインブログ(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

 

 

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

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版と同じです。

 

 

 

 

別館ブログ(PC・スマホ)のテーマ

 

 別館ブログ(このブログ)のテーマは「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に記述済みなのでグローバルメニューが簡単に設置できますよ。

こちらから↓

minimalgreen.hatenadiary.com

 

 

可愛いシェアボタン

 

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

f:id:misumisu0722:20180502185107j:plain

 

こちらから↓

minimalgreen.hatenadiary.com

 

 

その他

 

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

目次のカスタマイズ

SNSフォローボタン

FBページプラグイン

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

 

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

 

 

広告について

 

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

uxlayman.hatenablog.com

 

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

 

 

 

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

 

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

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

 

 

 

 

レターポットでお手紙頂けると嬉しいです!

letterpot.otogimachi.jp

楽天ROOMでお気に入り品をご紹介しています

room.rakuten.co.jp

 


スポンサードリンク


Hatena Instagram Youtube