koblog

高校生のWEBデザインブログ

【はてなブロブ】トップページのみ1カラムにする方法

f:id:somethingreview:20190219175437p:plain

先日、このような記事を書きました。 

 

上の記事では、はてなブログを1カラムから2カラム、2カラムから1カラムにする方法を紹介しています。

しかしおしゃれなブログではブログ内で1カラム・2カラムを使い分けていることもあります。そういうブログを見ると、上のようなカスタマイズだけでは物足りなさを感じてしまいます。

 

そこで今回は、はてなブログ1カラム・2カラムを使い分ける方法を紹介します。

ちなみに今回の内容は「Google」「Yahoo」ともに見つからなかったので、かなりオリジナリティをだすことができるようになるかもしれません。

ぜひ実装してみてください。

 

*今回のカスタマイズのコードをブログなどで使う場合はご連絡ださい。(無断転載禁止)

 

 

トップページのみ1カラムとはどういうこと?

まずは今回実装するカスタマイズのイメージを持ってもらうべく、僕のブログを例に紹介します。

 

トップページ↓

f:id:somethingreview:20190219174428p:plain

 

記事ページ↓

f:id:somethingreview:20190219174415p:plain


上の2枚の画像から分かるように、記事ページでのみサイドバーを表示しています。

アーカイブページでも表示されます)

こうすることでトップページをカスタマイズしやすくなるので、かなりおしゃれにすることができます。今回はこれを実装していきます。

 

トップページのカスタマイズについてはこちらの記事で紹介しているので、よかったらどうぞ。

 

CSS

 

CSSの編集方法についてはこちらの記事をどうぞ。

 *今回のカスタマイズではレイアウトを大きく変えるので、必ずバックアップをしてください。

 

今回のカスタマイズは冒頭で紹介した記事の応用です。

まだ見てない方はぜひ目を通してみてください。

 

前置きが長くなりましたが、ここからカスタマイズの方法を紹介します。

自分のテーマの「#main」「#box2」のコードを下のコードに置き換えてください。

 

CSS 
.page-index #main{
	width:100%;
	float:none
}
.page-index #box2{
	display:none
}
#main{
	width:65%;
	float:left
}
#box2{
	width:30%;
	float:right
}

 

これでCSSの編集は完了です。

あまり説明することはありませんが、上のコードでは「記事ページでのみサイドバーを表示」するのではなく、「トップページでのみサイドバーを非表示」にしています。

 

カスタマイズ

次に細かいカスタマイズです。

まずトップページのコンテンツの幅ですが「.page-inde #main」を「width:100%」にしているので最大幅で設定されています。そのため、さらに幅を大きくしたい場合は「#container」の幅を調整、小さくしたい場合は「.page-index #main」の幅を調整してください。

f:id:somethingreview:20190219184030p:plain

 

次に記事ページのサイドバーの幅ですが「#box2」で調整できます。その場合は全体のレイアウトが崩れてしまう場合がありますが「#main」「#container」も調整すると直ります。基本的にはこのままで大丈夫ですが、値を変える場合は覚えておいてください。

f:id:somethingreview:20190219183915p:plain

 

その他不明な点はこの記事のコメント欄や、Twitter@Flower71418279)にてどうぞ。できる限り答えたいと思います。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる