エンジニアのチラシの裏: 見出しをカスタマイズして、Bloggerの見栄えを良くする！

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXpFed1myu1sdFM3s-_ZEpFBbqnYUbvZURyf50kJ-h3mpJ4MlM00WwZ_-pVpBSovxvTa_fDCA_C-GemS6DLZ9coGNaqiRHw5crsdSv24WKR12zO2SB8tyDqPxSfDvxTwEToaGLX0UIMY/s1600/256px-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXpFed1myu1sdFM3s-_ZEpFBbqnYUbvZURyf50kJ-h3mpJ4MlM00WwZ_-pVpBSovxvTa_fDCA_C-GemS6DLZ9coGNaqiRHw5crsdSv24WKR12zO2SB8tyDqPxSfDvxTwEToaGLX0UIMY/s640/256px-Blogger.png" width="640" /></a></div>
 
 
ユーザに読みやすい記事を提供するには、コンテンツ（内容）を充実させるのはもちろんですが、ブログ自体の見易さも欠かせません。 
個人的に手軽で効果的だと思っているのは見出しを見やすくして、文章の区切りを分かりやすくすることだと思います。 
 
では初めていきましょう。 
 
<div style="text-align: center;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-6222309276407323" data-ad-slot="4455118447" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
 
<h4>
まずは自分のブログを分析</h4>
テンプレートによって変わってきますが、まずは自分が書いている記事の見出しのタグが何になっているかを分析しましょう。 
まずは自分のブログ上で右クリックしてコンテキストメニューを開き、[ページのソースを表示]を選びます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMRpeBfkgVIXyU4jlDiEvlpWZo5hZHzschxyQBTPAYeCZZCRqk9acLKNYs0zKrzlspe4_b0O_DZ3Poo8DsxSMMuxbJAtq0j2pJemta5TEs1OK6EzklKEksjzJeXyT4olMuY2Jg0fTvIo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.29.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMRpeBfkgVIXyU4jlDiEvlpWZo5hZHzschxyQBTPAYeCZZCRqk9acLKNYs0zKrzlspe4_b0O_DZ3Poo8DsxSMMuxbJAtq0j2pJemta5TEs1OK6EzklKEksjzJeXyT4olMuY2Jg0fTvIo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.29.13.png" width="320" /></a></div>
 
すると、HTMLが表示されるとおもいますので、カスタマイズしたい見出しがどうなっているか確認します。 
当ブログの場合は、以下のようになってました。 
 
<blockquote class="tr_bq" style="background: #EFEFEF; padding: 5px;">
<table><tbody>
<tr></tr>
<tr><td class="line-content"><h1 class='title'> アプリ作りの現場から＠ときどきイラスト </h1> <h3 class='post-title entry-title' itemprop='name'></td></tr>
</tbody></table>
 投稿タイトル </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-6160233257508059390' itemprop='description articleBody'> <h2>見出し</h2> <h3>小見出し</h3> <h4>準見出し</h4> <div> 本文</div></blockquote>
 
以下のようになっていることが分かります。 
<blockquote class="tr_bq">
h1=ブログタイトル、h2=見出し、h3=小見出し、h4=準見出し</blockquote>
h1やh2はブログタイトルなどでも利用されているので、今回は準見出しh4をカスタマイズして見栄えをよくします。 
 
<h4>
CSSCSSの設定を開く</h4>
Bloggerではスタールシート（CSS）を利用してカスタマイズができるようになっていますので、調整していきます。 
Bloggerの管理画面から[テンプレート]-[カスタマイズ]とすすみ、[上級者向け]-[CSSの追加]とさらに進みます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzc2GCjVpE7Y5K8e1OcGOldjDk-3SN4ZjCVYeEqtobvb9Vhm6Gse22r6xN4-Wq53b1j7KTk_0EzOPtN6j2xzuvSP5aGSVO3KKtUz0zTlQWxxPJpJ-_5HsR0p2ohuBLj6az4DM1A-HudeE/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.46.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzc2GCjVpE7Y5K8e1OcGOldjDk-3SN4ZjCVYeEqtobvb9Vhm6Gse22r6xN4-Wq53b1j7KTk_0EzOPtN6j2xzuvSP5aGSVO3KKtUz0zTlQWxxPJpJ-_5HsR0p2ohuBLj6az4DM1A-HudeE/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.46.31.png" width="320" /></a></div>
 
 
するとCSSが追加できるようになりますので、以下のように入力して、ブログに適用ボタンを押します。 
<blockquote class="tr_bq" style="background: rgb(239, 239, 239); padding: 5px;">
h4{ 
border-left: 8px #777 solid; 
border-top: 1px #777 solid; 
border-bottom: 1px #777 solid; 
border-right: 1px #777 solid; 
font-size: 18px; 
font-weight: bold; 
margin: 5px 0; 
padding: 5px 0 5px 10px; 
 
}</blockquote>
まあ、はじめはおまじないだと思っておけば良いと思いますが、これで枠線(border)やフォント（font）、余白を変更しています。 
 
一つ一つの意味は、割愛しますが、詳しく知りたい方や、もっと自由にカスタマイズしたい方は、調べて利用してみることをお勧めします。 
ちなみに、私は良く下のサイトを利用させていただいてます。 
<a href="http://www.htmq.com/csskihon/301.shtml" target="_blank">HTMLクイックリファレンス - CSSの基本 - ボックス</a> 
 
上記を設定すると、このブログの見出しのようなボックスにして、見出しを見やすくし、区切りをはっきりとさせることができます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYu5AN45EiWKO3LrN7zpMVHAHJp_Q-CHn8t0t76lN6vEzYuyULWFQgg1cHAyXgFlR36HWKWEOPGY0F1qdJH9S-wukJNQ3Jmw7EKcVtuy1K9VXVzTynLiIdkdYtoa6Inh_-JrylPuOHIo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+11.01.43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYu5AN45EiWKO3LrN7zpMVHAHJp_Q-CHn8t0t76lN6vEzYuyULWFQgg1cHAyXgFlR36HWKWEOPGY0F1qdJH9S-wukJNQ3Jmw7EKcVtuy1K9VXVzTynLiIdkdYtoa6Inh_-JrylPuOHIo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+11.01.43.png" width="320" /></a></div>
 
 
実はクラスという技術を使えば、他にももっと自由なカスタマイズができるのですが、それはまた機会があれば書いていこうと思います。

エンジニアのチラシの裏

2015年7月21日火曜日

見出しをカスタマイズして、Bloggerの見栄えを良くする！

0 件のコメント:

コメントを投稿