徒然草: HTML

ラベル HTML の投稿を表示しています。すべての投稿を表示

2016年4月14日木曜日

ブログ記事に見出しをつける

みなさん、こんにちは。

当ブログではいままで記事を書くにあたって記事内に見出しを特につけたりすることはありませんでした。
いろいろなブログの書き方的なページを見てみるとSEO的にどうなのかは微妙な所ですが、やはり見出しは付けたほうが良いようです。

見出しをつけた方が読者は読みやすいからです。

見出しをつけると記事の構成がまとめやすいので書きやすくなるとの話もあります。
タイプしながら内容考えているような自分には、見出しを考えて記事の構成を考える習慣が必要なのかもしれません。

さて、Bloggerで見出しをつける場合は下の画像のように入力画面で見出し内容を選択できます。

これをHTML入力画面で確認すると

とh2タグからh4タグまでが見出しとして使用されているのがわかります。

一方、当ブログ内で現在どのように見出しタグが使用されているかソース表示をして調べてみました。

<h2 class='date-header'><span>2016年4月13日水曜日</span></h2>
<h2 class='title'>徒然草検索</h2>
<h2 class='title'>言語設定</h2>
<h2 class='title'>徒然草のフィードを購読する</h2>
<h2>自己紹介</h2>
<h2>ブログアーカイブ</h2>
<h2>ラベル</h2>
<h2 class='title'>スポンサードリンク</h2>
<h2 class='title'>Amazon 売行きBEST3</h2>
<h2 class='title'>楽天グループお勧め商品</h2>
<h2>徒然草お勧め記事 BEST5</h2>

<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_13.html'>ゆっくり寝ていたいけど、仕事に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_18.html'>ゆっくり寝ていたいけど、釣りにでかける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_53.html'>ゆっくり寝ていたいけど、桜を見に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_10.html'>いきなりビリヤードのゲーム画面が表示される！！ウィルス！？</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/postfix.html'>postfixで送信メールを転送する</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post.html'>本当のやさしさとは</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/03/blog-post_27.html'>日立の梅　あんず　桜　そして菜の花</a>
</h3>

h2タグは投稿記事の日付やガジェットのタイトルに使用されています。
h3タグは投稿記事のタイトルに使用されています。

記事内で使用する見出しタグは階層から考えていくとh4タグを使用することになります。
見出しタグの階層とは下記のように

h1の次に来るのはh2、h2の後に来るのはh3というように順番を守らなければいけません。

h1がブログタイトル「徒然草」、h2が記事投稿日、h3が投稿記事タイトルとなっていますので記事内の見出しはh4の準見出しを使用するのが順当です。

Bloggerの入力画面ではh2から記事内に設定できますが、h2とh3は使用を控えたほうが良いようです。（SEO的には・・・・）

作成画面で自動で作られる準見出しは、デザイン的に見た目があまり芳しくありません。
CSSを使用してカスタマイズしたいと思います。

h4タグ自体はBloggerの投稿記事内のコメントの部分にも使用されているので、h4タグ自体は変更せずにCSSを設定してh4タグにclassとして適用していきます。

テンプレート→カスタマイズと進み

上級者向け→CSSを追加　と進みます。

以下を、カスタム CSS 追加の欄に加て、ブログに適用をクリックします。

.h4style{

font-size: 18px;

font-weight: normal;

margin: 5px 0;

padding: 5px 0 5px 10px;

background: #eee;

border-top: 1px #777 solid;

border-bottom: 1px #777 solid;

border-left: 8px #777 solid;

border-right: 1px #777 solid;

}

HTML入力画面で

<h4 class='h4style'>見出しデザインを変更する</h4>

と入力します。

以下が入力例です。

見出しデザインを変更する

見栄え良く表示されているでしょうか。

次回からはキチンと見出しを作成して記事を書きたいと思います。

ではでは～☆ミ

2016年3月6日日曜日

BloggerのCSSをスマホにも適用させる

みなさん、こんにちは。

「BloggerのテンプレートをCSSでカスタマイズする」でブログの表示をカスタマイズしましたが、スマホで表示してみたら変更できていませんでした。

調べてみるとモバイル用のCSSを作成しなければならないようですが、ダッシュボードのテンプレートからもモバイル用の設定が簡単にできるようです。

作業開始前にいろいろ変更することになりそうなので、おかしくなった時にすぐに直せるように、まずは現行のバックアップを作成しておきます。

画面右上の「バックアップ/復元」をクリックします。

「テンプレートをすべてダウンロード」をクリックします。

復元するときは今回ダウンロードしたファイルを「ファイルを選択」より選択して復元します。

では早速作業を開始します。

歯車の設定アイコンをクリックします。

「はい。携帯端末でモバイルテンプレートを表示する」が選択されていますので、「モバイルテンプレートを選択」でカスタムを選択します。

カスタマイズ済のPC表示用の設定に近いモバイル用の設定に自動で設定されます。

プレビューを表示して、どう表示されるか確認します。

カスタマイズしたCSSは反映しましたが、ブログの説明文が表示されていません。

正確にはブログの説明文の文字色を白に設定しているため、背景色の白と同化してしまい見えなくなっています。

これはモバイル専用のCSSを設定してブログの説明分の文字色を変更して対応することにしました。

結局CSSを書かないといけないのは残念 orz

手順は「BloggerのテンプレートをCSSでカスタマイズする」で説明した通りですが、まずはHTMLをじっくりみてブログの説明文の部分を探します。

<div class='descriptionwrapper'>
<p class='description'>
<span>　つれづれなるまゝに、<br>　日ぐらし硯に向かひて、<br>　心にうつりゆくよしなしごとをそこはかとなく書き付くれば、<br>　あやしうこそ物狂ほしけれ。</span></p>
</div>

上記が該当箇所でした。
<span>タグに文字色を設定するCSSを追加します。
頭に、.moble を加えるとモバイル表示の時のみ適用されるようになります。

/* moble */
.mobile .description span{
color:orange
}

これでスマホでも説明文が読めるようになりました。

ではでは～☆ミ

2016年2月28日日曜日

BloggerのテンプレートをCSSでカスタマイズする

みなさん、こんにちは。

本ブログはGoogleのBloggerを利用しています。
インターフェイスが分かりやすいし、何より無料で利用できるからです。

テンプレートも数少ないながらシンプルなデザインはいい感じだと思います。
と、いっても手のこんだことするのが面倒なので、基本的にはデフォルト設定のまま使用しています。

先日の「linuxでUSBメモリをマウントして使う」の投稿もlogはそのまま貼り付けしていますが、やはりちょっと読みずらいようです。

そこで、BloggerのテンプレートをCSSを使ってカスタマイズすることにしました。

Bloggerのダッシュボードにログインして

「テンプレート」→「カスタマイズ」と進みます。

「上級者向け」→「CSSを追加」と進みます。

表示された「カスタムCSSを追加」欄にCSSを記述していきます。

今回は

/* class=unixcmd */
.unixcmd {
color: white;
background-color: #444444;
border: 1px solid black;
margin: 3px;
margin-left: 3px;
padding: 3px;
font-family: monospace;
overflow: auto;
width: 100%;
}

と記入してみました。

前述の「linuxでUSBメモリをマウントして使う」のlogの部分をHTML入力画面で、

<div class='unixcmd'>
root@dns:/# dmesg<br/>
[ 0.000000] Initializing cgroup subsys cpuset<br/>
[ 0.000000] Initializing cgroup subsys cpu<br/>
・・・・・・省略・・・・・・
[337722.690036] sd 2:0:0:0: [sdb] Assuming drive cache: write through<br/>
[337722.690070] sd 2:0:0:0: [sdb] Attached SCSI removable disk<br/>
</div>

とdivタグで囲い、スタイルシートを適用します。

適用前イメージ