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

2016年4月14日木曜日

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

みなさん、こんにちは。


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

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

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


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


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

<h2>見出し</h2>
<h3>小見出し</h3>
<h4>準見出し</h4>

と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'>ゆっくり寝ていたいけど&#12289;仕事に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_18.html'>ゆっくり寝ていたいけど&#12289;釣りにでかける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_53.html'>ゆっくり寝ていたいけど&#12289;桜を見に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_10.html'>いきなりビリヤードのゲーム画面が表示される&#65281;&#65281;ウィルス&#65281;&#65311;</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'>日立の梅&#12288;あんず&#12288;桜&#12288;そして菜の花</a>
</h3>

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

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

<h1>--</h1>
<h2>---</h2>
<h3>---</h3>
<h3>---</h3>
<h2>---</h2>
<h3>---</h3>
<h4>---</h4>
<h4>---</h4>
<h3>---</h3>
<h2>---</h2>

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>&#12288;つれづれなるまゝに&#12289;<br>&#12288;日ぐらし硯に向かひて&#12289;<br>&#12288;心にうつりゆくよしなしごとをそこはかとなく書き付くれば&#12289;<br>&#12288;あやしうこそ物狂ほしけれ&#12290;</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タグで囲い、スタイルシートを適用します。


適用前イメージ



適用後イメージ



ターミナル画面風になって、log部分が見やすくなったと思います。

といいつつ「linuxでUSBメモリをマウントして使う」はまだ直してなかったりして・・・・


ではでは~☆ミ

2015年11月14日土曜日

YouTube動画の埋め込みコードをカスタマイズ

みなさん、こんにちは


BloggerにYouTube動画を埋め込む」で紹介した動画の埋め込みですが、自分のイメージ通りに動画が表示されていない方もいらっしゃるのではないでしょうか。


俺の場合
  1. サムネイル画像が大きい
  2. 再生後に関連動画が表示される
  3. タイトルを非表示にしたい
この3点が修正したい点です。

  • サムネイル画像のサイズを調整する

この動画のサイズを下記のサイズに変更します。


要はサムネイル画像の大きさを通常の画像の表示サイズと同じ大きさにしたいのです。

サイズの変更はコピーした埋め込みコードを修正して調整します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/gRt_U5LdzBQ" frameborder="0" allowfullscreen></iframe>

このコードの width="560" が幅、height="315" 高さになります。
この数値を width="320"、height="266"に変更します。

  • 再生後に関連動画を表示しない

関連動画はYoutube判断となってしまいますので、関連の薄い動画がリストアップされてしまう可能性もあります。
コンテンツ内容と関係のない動画が流れてしまうかもしれません。

そこで動画再生が終了したら最初の状態に戻るようにします。

src="https://www.youtube.com/embed/gRt_U5LdzBQ" の動画URLの最後にパラメータを「?」を使って付加します。

パラメータは「rel=0」です。

src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0"

となります。

  • タイトルを非表示にする



タイトルは実はファイル名です。
このファイル名の表示を消します。

パラメータは「showinfo=0」です。

パラメータを複数追加するには「&」を使ってつなげていきます。

src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0&showinfo=0"

となります。


最終的に埋め込みコードは以下のようになりました。

<iframe width="315" height="266" src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

表示は以下になります。


イメージ通りの表示となりました。


その他のパラメータは「YouTube 埋め込みプレーヤーとプレーヤーのパラメータ」を参照願います。


ではでは~☆ミ