こんにちは。はぴです。
『ブログのトップページを固定化してサイトみたいな見栄えに近づけたいな。』
『メインのカテゴリーを大きくトップページに並べることって出来るかな。』
『なんか、こう、もうちょっとおしゃれな感じにしたいんだけど、、。』
って思っている方この指とまれ～
へい！私っす！ちょっと前の私ス！
今回は、おしゃれかどうかは置いといて、とりあえずトップページを好きなように固定化することが出来たのでお知らせいたします。
※固定化したのは、こちらのブログではなく、メインブログとしている「おっかしゃんのブログ」です。
完成図
完成したトップページがこちらです。
ヘッダーのすぐ下、新着記事のすぐ上（オレンジ色で囲った部分）に、カテゴリーをリンク付きで貼り付けて固定化しました。
参考記事
参考にさせていただきました。ありがとうございます！
トップページを固定化する方法
①画像を用意する
写真や、画像など、トップページに貼り付けたいものを用意します。
私は普段から使用しているアイビスペイントで作成しました。
使いやすくておススメです。
②はてなブログ〔記事を書く〕に貼り付ける
はてなブログの記事作成画面〔編集みたまま〕を開き、画像を貼り付けていきます。
数枚の画像を横並びにしたい場合は、↓で示すように、①順番に画像を選び ②〔横並び〕を選び ③〔選択した写真を貼り付け〕をクリック。
〔記事編集画面に貼り付ける〕をクリック
横並びに貼り付けたのがこちら↓ 均等に並んでます。
※ちなみに画像を貼り付ける際に〔画像にalt属性を指定する〕にチェックをいれることが出来ます。画像に名前を付けるようなイメージのようです。
SEO対策によいという記事を読んで、私もいくつかの画像に付けていましたが、その後そんなことはないという記事も見たので、めんどくさかったら付けないでも良いかもです。
さて、ここまではきれいに出来て、自分でも「なかなかのもんじゃ」と満足していたのですが、そこからですよ。そのまま２枚横並びもやってしまおうと同じようしたらば、、
バァ～～ン！！
２枚だけ、でかぁ～～い。
(´・ω・｀)
これはやばい。２つのカテゴリー合わせても１０記事もないのに、めちゃくちゃ充実した記事数入ってそう。
で、なんやかんや、色んな方の色んな記事を参考にさせていただきながらどうにか画像の大きさをそろえて中央寄せにすることに成功。
次のようにやっていきます。
とりあえず３枚貼り付けたときと同じように２枚の画像を横並びで貼り付けた後、
HTML編集画面へ移り、下のようにオレンジ色と緑色で示したコードで挟みます。
もう知ってるよって方は読み飛ばしてほしいのですが、私はここで数日足止め食らったので、一応説明しておきます。
<center> と </center> で挟むことでその間の部分が中央寄せに、
<div style="width: 66%;"> と </div> で挟むことでその間の部分の横幅を元々の横幅の66％の大きさにしてくれます。
（「66％」ってとこは、100％以内で好きに変えられます。）
※「元々の横幅を100とする」というのは本来の解釈とは少し異なるようで、もしかすると、私と同じようにやっても上手くいかないことがあるかも知れません。すみません。
もし、私と同じように「ブログをやっているけれど、実はHTMLやcssの事がよくわかっていないんだ」という方がいましたら、サルカワさんという方の書かれている「Webデザイン入門」がおススメです。
基礎知識なしでブログの世界へ飛び込んできた私でも理解できました。
とりあえずStep３~Step５だけでも読んでおくと、だいぶ後が楽になると思います。
(*´ω｀)サルカワさんありがとうございます！
③それぞれの画像にリンクを貼り付ける
このままでは、ただの画像なので、画像にリンクを貼り付けます。
次の画像の、赤い矢印の部分（<img～ の直前）に、
<a href="リンク先のURL">
を入れていきます。
私の場合、リンク先のURL にはそれぞれの画像が示すカテゴリー記事一覧ページのURLを入れていきました。
④文字を入れる
必要なければ飛ばしてOKです。
私の場合は、「カテゴリー」や「新着記事」などを入れました。
文字も画像も中央に寄せたかったので、HTML編集画面で、全てのコードを <center> と </center> で挟みます。
するとこんな感じに。
⑤固定ページ化するためのコードを頂戴する
有難く下のコードをコピーします。
<!--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>
上記のコードをメモか何かに貼り付けます。
（直接、ブログの管理画面に貼り付けての編集も可能ですが、ちょっと不安なので、、）
上から10段目のhttp://example.com/を自身のブログのURLに置き換えます。
トップページ用に作ったHTMLコードを全部コピーします。
引用させてもらったコードの、上から3段目、 <!--ここにトップページ用のHTMLを書いてちょ--> という部分を、今コピーしたトップページ用HTMLコードに置き換えます。
そうして出来たコードを、はてな管理画面の、デザイン→カスタマイズ→フッタに貼り付け、〔変更を保存する〕をクリックすればトップページが理想の形になっていることかと！多分！
おわりに
お疲れさまでした。
これが出来れば色んな応用に使えるような気もしますよね。
何だか得した気分！
(・∀・)
同じことで悩んでいる方の参考になれば幸いです☆
（とかいってなんかミスってたらホ～ントごめんなさい。そんな時はコメントででもお知らせしてくれると嬉しいです。）
それではまた、お時間のあるときに！
ーこんな記事も書いていますー
blog.chiyo.fun