ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログのテーマストアからブログのテーマを【 Haruni 】にオシャレに変更。


スポンサーリンク

こんにちは、ハウリンです。

先日、サイトのテーマ変更をしようかと思い、テーマストアはイマイチだなーなどとほざいてたんですが、今回速攻テーマストアのテーマに変更しました。(^_^;)

f:id:twistinhaurin:20200531165840p:plain

 

 

 

  

テーマストアからインストールする 

 テーマストアの Haruni さんのテーマをインストールする。

 

テーマストアで探す

はてなブログの「デザイン」「テーマパレット」の一番下までスクロールして「テーマストアでテーマを探す」クリック

f:id:twistinhaurin:20200801154312p:plain

 

 

そうすると、スタッフセレクションピックアップ人気のテーマ新着テーマなどいろいろ出てきます。

MinimalismBrooklyn はシンプルでいつも人気です。

今回は「Haruni」を選択。

f:id:twistinhaurin:20200801154754p:plain

 

 

「Haruni」クリックすると

テーマの説明など出てくるので、納得したら「プレビューしてインストール」クリック➡適用するブログを選択と出るので選んでクリック

f:id:twistinhaurin:20200801160553p:plain
利用中のブログを開けば、このテーマを最近インストールしたブログがダダーっと出てきます。

ヘッダーの背景は、グラデーションや画像設定も出来ます(^O^)/

 

 

 

プレビューを確認しインストールする 

プレビューを確認して良ければ「このテーマをインストール」クリック

f:id:twistinhaurin:20200801161632p:plain

 

緊張しながら (;'∀') 自分のブログを見ると・・・

変更されてる!!キタ━(゚∀゚)━!

色を変えてみようと思います。

 

色を変更する

「デザイン」「カスタマイズ(スパナマーク)」「背景色」から

とりあえず色を変えてみようとシアン系の色にしたらシンプルに。

f:id:twistinhaurin:20200728201127p:plain

 

では、思い切ってピンク系にしてみたら

明るい雰囲気になりました(^O^)/

f:id:twistinhaurin:20200728203338p:plain

 

よく見てみると、見出しの色が変わってる!!

CSSを見たら今まで貼ったコードが見事に消えてる!

オーマーガー(久々出ました)

今まで苦労して貼ったコードが・・・

 

吹き出しも見事に消えてる・・・

でも、前より見やすくなってる?

 

ということで、画像ではすでにグローバルメニュー表示させてしまってますが、インストールした時点では表示されてません(^_^;)

早速グローバルメニューを作りたいと思います。

 

 

 

グローバルメニューを作成する 

先ほどのプレビューしてインストールする前の Haruni の画面をスクロールして下の方を見るとグローバルメニューの設置方法を載せてくれているので、「グローバルメニューの設置方法 訂正あり - Haruni」クリック

f:id:twistinhaurin:20200801164508p:plain

 

オリジナルシェアボタンの設置方法やお問い合わせ、他のテーマも載っています。

 

 

「デザイン」「カスタマイズ(スパナマーク)」「ヘッダ」「タイトル下」にコードを貼らせてもらいます。 

<style>
/* ヘッダーの余白調整 */
#blog-title {
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0 1.5rem;
}
@media (max-width: 767px) {
#blog-title {
    padding: 1rem 0;
}
}
</style>
<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="URLを入力">Top</a></li>
		<li><a href="URLを入力">About</a></li>
		<li><a href="URLを入力">Profile</a></li>
		<li><a href="URLを入力">Category</a></li>
		<li><a href="URLを入力">Link</a></li>
		<li><div class="menu-close"><i class="fa fa-window-close fa-fw" aria-hidden="true"></i>閉じる</div></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_close = $body.getElementsByClassName('menu-close')[0];

	if ( typeof $menu_trigger !== 'undefined' ) {
		$menu_trigger.addEventListener('click', function() {
			$body.classList.toggle('menu-active');
		});
	}

  if ( typeof $menu_close !== 'undefined' ) {
		$menu_close.addEventListener('click', function() {
			$body.classList.remove('menu-active');
		});
	}
})();
</script>

「URLを入力」に、自分のカテゴリのURLを入れます。

カテゴリ名も変更します。

 

 

アイコンを表示させる 

次に、アイコンが表示される様にしたいので

「詳細設定」「headに要素を追加に」に貼り付ける。

 

 しろかいさんがアイコンを詳しく載せてくれていますm(__)m

shirokai.hatenablog.com

アイコン選んで

<i class="(使用したいアイコンのクラス名)"></i>

 

<i class="blogicon-twitter"></i> Twitter

となるから

 

コードの中に入れ込むと

<li><a href="https://www.haurin-zatunenlife.com/archive/category/%E6%97%85%E8%A1%8C"><i class="blogicon-public"></i> 旅行</a></li>

 

”旅行”の前にアイコンが表示されるれます。

f:id:twistinhaurin:20200801170249p:plain

 

 

 

カテゴリーを断層化させる場合 

続いて、カテゴリーを断層化させるには

タイトル下に貼ったコードを消して、新たに張り替える作業が必要になります。

CSSにも貼り付けます。

⇩下のコードを貼らせてもらいました。

blog.minimal-green.com

 

緑系の色と、ピンク系の色のコードを載せてくれています。

自分のと色が違うのは後で訂正するとして、、、

 

このコードのままだとカテゴリが左に寄ってしまうので

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: 16.6%;/* 100÷6=16.6% *

⇧上のコードを 

 

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: ◯◯%;

⇧ユキヒーさんのコードに変更

カテゴリが均等になった。(^O^)/

www.yukihy.com

 

グローバルメニューの色が微妙に違うのが気になるので

CSSの上の方のコードにヘッダーの色コードが載ってるので変更。

「背景色」➡右クリック➡「検証」でも色が分かります。

 

こちらに⇩カラーコード載ってます。

www.netyasun.com

 

 

ちゃんと色が揃ったので、グローバルメニューの色を少し違う色に。 

f:id:twistinhaurin:20200728203338p:plain

一通りこれで変更終了です。

画像の色からまた少し変えて落ち着きました(;^ω^)

 

今回は、Haruni のやり方なので、他のテーマではコードが合わなかったりするかもしれません。

私はカラフルなのが好きなので、今回このテーマにさせて頂きました。

背景色などは毎回迷います💦

本当に選びたい色に未だに出会えてなく、色彩迷子状態です。。。

それと、もう少し大人になったら(十分大人すぎてますが・・・)、シンプルなテーマにまた変更するかもしれないです(^_^;)

後は、CSSに貼った消えてしまったコードを復活させたいと思います✊

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。