えんやこらブログ

☆目標【まずは月1万円】自分の理想のブログを作って生活できるようになるのだ☆

ブログのトップページを固定化しました

こんにちは。はぴです。

 

『ブログのトップページを固定化してサイトみたいな見栄えに近づけたいな。』

『メインのカテゴリーを大きくトップページに並べることって出来るかな。』

『なんか、こう、もうちょっとおしゃれな感じにしたいんだけど、、。』

 

って思っている方この指とまれ~

 

へい!私っす!ちょっと前の私ス!

 

今回は、おしゃれかどうかは置いといて、とりあえずトップページを好きなように固定化することが出来たのでお知らせいたします。

 

※固定化したのは、こちらのブログではなく、メインブログとしている「おっかしゃんのブログ」です。

 

 

完成図


完成したトップページがこちらです。

 

f:id:chiyohapi:20200926143241p:plain



ヘッダーのすぐ下、新着記事のすぐ上(オレンジ色で囲った部分)に、カテゴリーをリンク付きで貼り付けて固定化しました。

 

参考記事

参考にさせていただきました。ありがとうございます!

 

blog.minimal-green.com

 

www.slight-article.work

 

トップページを固定化する方法

①画像を用意する

写真や、画像など、トップページに貼り付けたいものを用意します。

 

私は普段から使用しているアイビスペイントで作成しました。

アイビスペイントX

アイビスペイントX

ibis inc.無料posted withアプリーチ

 

使いやすくておススメです。

②はてなブログ〔記事を書く〕に貼り付ける

はてなブログの記事作成画面〔編集みたまま〕を開き、画像を貼り付けていきます。

 

数枚の画像を横並びにしたい場合は、↓で示すように、①順番に画像を選び ②〔横並び〕を選び ③〔選択した写真を貼り付け〕をクリック。

 

画像を横並びにする

 

〔記事編集画面に貼り付ける〕をクリック

f:id:chiyohapi:20200922055333p:plain

 

横並びに貼り付けたのがこちら↓ 均等に並んでます。

画像横並び

 

※ちなみに画像を貼り付ける際に〔画像にalt属性を指定する〕にチェックをいれることが出来ます。画像に名前を付けるようなイメージのようです。

SEO対策によいという記事を読んで、私もいくつかの画像に付けていましたが、その後そんなことはないという記事も見たので、めんどくさかったら付けないでも良いかもです。

 

さて、ここまではきれいに出来て、自分でも「なかなかのもんじゃ」と満足していたのですが、そこからですよ。そのまま2枚横並びもやってしまおうと同じようしたらば、、

 

 バァ~~ン!!

f:id:chiyohapi:20200927062725p:plain

2枚だけ、でかぁ~~い。

(´・ω・`)

これはやばい。2つのカテゴリー合わせても10記事もないのに、めちゃくちゃ充実した記事数入ってそう。

 

で、なんやかんや、色んな方の色んな記事を参考にさせていただきながらどうにか画像の大きさをそろえて中央寄せにすることに成功。

次のようにやっていきます。

 

とりあえず3枚貼り付けたときと同じように2枚の画像を横並びで貼り付けた後、

HTML編集画面へ移り、下のようにオレンジ色と緑色で示したコードで挟みます。

 

f:id:chiyohapi:20200928052154p:plain

 

もう知ってるよって方は読み飛ばしてほしいのですが、私はここで数日足止め食らったので、一応説明しておきます。

 

<center> と </center> で挟むことでその間の部分が中央寄せに、


<div style="width: 66%;"> </div> で挟むことでその間の部分の横幅を元々の横幅の66%の大きさにしてくれます。

(「66%」ってとこは、100%以内で好きに変えられます。)

 

※「元々の横幅を100とする」というのは本来の解釈とは少し異なるようで、もしかすると、私と同じようにやっても上手くいかないことがあるかも知れません。すみません。

 

もし、私と同じように「ブログをやっているけれど、実はHTMLやcssの事がよくわかっていないんだ」という方がいましたら、サルカワさんという方の書かれている「Webデザイン入門」がおススメです。

基礎知識なしでブログの世界へ飛び込んできた私でも理解できました。

 

とりあえずStep3~Step5だけでも読んでおくと、だいぶ後が楽になると思います。

(*´ω`)サルカワさんありがとうございます!

saruwakakun.com

 

③それぞれの画像にリンクを貼り付ける

このままでは、ただの画像なので、画像にリンクを貼り付けます。

 

次の画像の、赤い矢印の部分(<img~ の直前)に、

<a href="リンク先のURL">

を入れていきます。

f:id:chiyohapi:20200923050539p:plain

私の場合、リンク先のURL にはそれぞれの画像が示すカテゴリー記事一覧ページのURLを入れていきました。

 

④文字を入れる

必要なければ飛ばしてOKです。

私の場合は、「カテゴリー」や「新着記事」などを入れました。

 

文字も画像も中央に寄せたかったので、HTML編集画面で、全てのコードを <center> と </center> で挟みます。

 

するとこんな感じに。

 

f:id:chiyohapi:20200928053254p:plain

 

⑤固定ページ化するためのコードを頂戴する

有難く下のコードをコピーします。

<!--toppage-add-->
<div class="toppage-add">
<!--ここにトップページ用のHTMLを書いてちょ-->
</div>
<!--jQueryを使用:既に読み込んでるときは不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function(){
    // URLがトップページのとき実行
    if(location.href=='http://example.com/'){
        $('#main-inner').before($('.toppage-add'));
    }
    // トップページ以外
    else{
	$('.toppage-add').remove();
    }
});
</script>

引用:はてなブログのトップページを固定ページ化する方法その2 - Minimal Green

 

上記のコードをメモか何かに貼り付けます。

(直接、ブログの管理画面に貼り付けての編集も可能ですが、ちょっと不安なので、、)

 

上から10段目のhttp://example.com/を自身のブログのURLに置き換えます。

 

トップページ用に作ったHTMLコードを全部コピーします。

引用させてもらったコードの、上から3段目、 <!--ここにトップページ用のHTMLを書いてちょ--> という部分を、今コピーしたトップページ用HTMLコードに置き換えます。

 

そうして出来たコードを、はてな管理画面の、デザイン→カスタマイズ→フッタに貼り付け、〔変更を保存する〕をクリックすればトップページが理想の形になっていることかと!多分!

 

おわりに

お疲れさまでした。

これが出来れば色んな応用に使えるような気もしますよね。

何だか得した気分!

(・∀・) 

同じことで悩んでいる方の参考になれば幸いです☆

 

(とかいってなんかミスってたらホ~ントごめんなさい。そんな時はコメントででもお知らせしてくれると嬉しいです。)

 

それではまた、お時間のあるときに! 

 

ーこんな記事も書いていますー
blog.chiyo.fun

 

blog.chiyo.fun