サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、「関連記事」のカスタマイズについて説明していきます。
設定するHTMLとCSSのソースコードの検索方法
設定は、HTML・CSSのソースコードを変更することで行っていきます。
そのため、目的とするソースコードを検索して探す必要があります。
それぞれの設定で、ソースコードの検索画面の状態からの説明を行っています。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
不明な部分は下の記事をご参照ください。
見出しの文字サイズの大きさを変更する方法
BloggerのテンプレートにVaster2を設定したあとですが、「関連記事の見出し」が他の見出しよりも少し大きいのが確認できます。
気にならない方はそのままでもいいと思いますが、気になる方のために同じサイズに変更する方法を説明します。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-FRCG8X4I1co/XFk6gi-UBKI/AAAAAAAALn0/gx7BIp_fhK8p8PoXPLcFDpOoBuqdMPtzwCK4BGAYYCw/s640/1%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B1.jpg)
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-PcyysB9t_nQ/XFk6jQIlIBI/AAAAAAAALn8/50Grj8JTj2Qsa_6lJmD-ezNiNhUkyfwvgCK4BGAYYCw/s640/2%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B1.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②「#related-posts h2{」を検索
検索窓に「 #related-posts h2{ 」を入力して検索し、関連記事のソースコードの部分を表示します。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-7AHSIt1CbYw/XFk6yjc_EHI/AAAAAAAALoo/jdeZ0MWcXIszLorZP5PvwNp8SuLdVxRyQCK4BGAYYCw/s640/7%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
③ソースコードの変更と追加
ソースコードを変更します。
- 「margin-bottom:20px;」 ⇒ 「margin-bottom:18px;」に変更
- 「font-size:18px;」を追加
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-tIczGtYPGT0/XFk62UlBCUI/AAAAAAAALo0/apiBsEp_K8MeGUNJ8fG9EhBXrJgsGuNRwCK4BGAYYCw/s400/8%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-e3GFPlt-4aM/XFk65XP7NsI/AAAAAAAALo8/zlHubj5gcCM-6MeYEqK-357dqaJCQAztACK4BGAYYCw/s400/9%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
④「テーマを保存」をクリック
「テーマを保存」をクリックして変更したソースコードを保存する。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-N9gnbkBhsPc/XFk68Kyn0wI/AAAAAAAALpE/ZAIf5AiO3-A8XwasDtuCJ5wzUrrBTv2qwCK4BGAYYCw/s640/10%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
⑤ブログを表示して確認
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-W8WsCn-oOos/XFk7Bay8rsI/AAAAAAAALpQ/1xtuuMk-ohkQ_km-lXsUnPjMiMJDPnxkQCK4BGAYYCw/s640/2%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B1.jpg)
画像とタイトルの隙間の幅の変更方法
BloggerのテンプレートにVaster2を設定したあとですが、関連記事の画像とタイトルの隙間(下の画像:青枠の部分)が少し広すぎるような気がします。
気にならない方はそのままでもいいと思いますが、気になる方のために隙間のサイズの変更方法を説明します。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-hhCAqBMrikY/XFk7ugwfGWI/AAAAAAAALpo/k27GQTuTNH0M1II_KQp87g5EqEql929vgCK4BGAYYCw/s640/21%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-L27yFvZOY-0/XFk7xkJ2TMI/AAAAAAAALpw/Ra-g6P-x9wwNMCS2nMZsoi1T3_X2iss7wCK4BGAYYCw/s640/26%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②「#related-posts .related_img{」を検索する
検索窓に「 #related-posts .related_img{ 」を入力して検索すると、関連記事の表示しているソースコードが表示されます。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-NsuEEsKokBU/XFk8Gb3hpMI/AAAAAAAALqo/dfBgFbmjccAEbQ9jWoyrQgWDkS1TkdrfACK4BGAYYCw/s640/22%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
③ソースコードを追加する
ソースコードを追加します。
- 「 display: inline-block; 」を追加
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-IG6AoGVihso/XFk8MdSfLhI/AAAAAAAALq4/7RQUqGeA5Z4-TxGblg8DAPhQcONHPjifwCK4BGAYYCw/s400/23%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-1F9U_gv5X_k/XFk8QNG4C6I/AAAAAAAALrE/fSgyxhbWocAHq8Lf6BqgIIBbQNb7RFrlQCK4BGAYYCw/s400/24%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
④「テーマを保存」をクリック
「テーマを保存」をクリックして変更したソースコードを保存します。
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-QOwS3HhkP-k/XFk8ZlYFgCI/AAAAAAAALrQ/ljEEAYI-wFgOE0hDfbnjDI6oXGnfpRrtwCK4BGAYYCw/s640/25%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
⑤ブログを表示して確認
![Bloggerで始める無料ブログ:「関連記事」のカスタマイズ【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-I7nMMz4P6Uc/XFk8c7WQTeI/AAAAAAAALrY/zOWyuqF4HvMQJA18QwOL0CFg-WepUTOzgCK4BGAYYCw/s640/26%25E9%2596%25A2%25E9%2580%25A3%25E8%25A8%2598%25E4%25BA%258B.jpg)
まとめ:今回のおさらい
今回は、関連記事のカスタマイズとして、
- 見出しの文字サイズの大きさの変更
- 画像とタイトルの隙間の幅の変更
を説明しました。
関連記事を見やすくすることによって、他の記事を読んでもらえる割合も増えることになります。
閲覧者に見やすいサイト作りを目指しましょう(*^^*)