鈴木です。別館

「アフィリエイト広告」等の広告が掲載してある場合があります

【ブログカスタマイズ】OGP用の画像設定はやっておこう!hタグのカスタマイズもしてみました。

はてなブログの「鈴木です。」は更新を(おそらく)停止しました。

ブログはWordPressにて継続しているので、よければ是非訪れてください。

>鈴木です。~鈴木利典 公式ブログ~

なお、ちょっと黒い鈴木はnoteをご覧ください。

>鈴木です。(note)

~ここから本文です~

10月4日にオフ会に行ってきたのですが、オフ会参加者のブログを紹介させて頂いた時点で約半数の方が、はてなブログのアイキャッチ画像の設定をされていない事に少し驚いた鈴木です。

f:id:suzukidesu23:20141005232834p:plain

上記の画像の下の段のものです。これは、そのままOGPの「og:image」というものに該当します。

是非とも、この設定は行っておいた方が良いと思います。

OGP用の画像登録

はてなブログの場合はアイキャッチ画像というものが登録出来ますが、これをするとどうなるかと言えば、はてなブログでは今、URLを貼り付けるとブログカードというものが自動で生成されて、選択によって自分のブログに貼り付ける事が出来ます。


上記の通り、アイキャッチ画像を登録しておくと、右側に登録した画像が入ります。基本的に正方形にはてなブログの場合は成形されますので、正方形の画像か中央に見せたいものが来る画像が良いようです。

でも、OGPって何ですか?と思う方も多いかと思いますが、やや語弊があるかもしれませんが、このブログはこんなブログです!と説明をするためのものです。

そのため、OGPには

ブログ名(サイト名)・ブログのURL(サイトURL)、ブログの説明文(description)、ブログのアイキャッチ画像等が必要となります。

はてなブログの場合でHTMLソースを見てみると

 <meta property="og:title" content="鈴木です。"/>
 <meta property="og:type" content="blog"/>
 <meta property="og:url" content="http://suzukidesu23.hateblo.jp/"/>
 <meta property="og:image" content="http://cdn.mogile.archive.st-hatena.com/v1/image/suzukidesu23/302454600934254277.jpg"/>
 <meta property="og:description" content="サイト名が「鈴木です。」です。書いている人も鈴木です。旅行・温泉、アクセス解析、書評、雑感いろいろ書いています" />
 <meta property="og:site_name" content="http://suzukidesu23.hateblo.jp/"/> 

こんな感じで登録されています。仮にアイキャッチ画像が入らないと

f:id:suzukidesu23:20141005234443p:plain

上記の画像が代替として入ります。

自分のブログがどこかで紹介されても良いようにアイキャチ画像を登録しておく事をおすすめします。

また、ブログカードには、ブログアイコンも入るのでこちらも合わせて登録されておいた方が良いと思います。

以上、余分なおせっかいでした(^_^;)

僕は以前は、

f:id:suzukidesu23:20141005234816p:plain

上記の画像でアイキャッチの画像登録をしておりましたが、今回コアラの写真に変更しました。

f:id:suzukidesu23:20141005234938j:plain

なお、descriptionと言われるブログの説明も登録しておいた方が良いですよ。

f:id:suzukidesu23:20141005235151p:plain

h2タグのカスタマイズをしてみました

h2タグと書きましたが、まずhタグというものについて知っておいた方が良いと思います。

見出しタグと呼ばれるものです。

これについては、下記のブログのエントリーの説明がわかりやすかったです。

ググったら、出てきて驚きました(^_^;)


で、今まで僕のブログでh2タグの装飾はデフォルトで使っていたのですが、今回、下記のブログのエントリーを参考にさせていただき、変更してみました。


こちらのエントリーを筆頭に2~3箇所のブログのエントリーを見て自分なりに少しだけカスタマイズして使ってみました。

自己満足で気にっています(笑)

 

さて、次はヘッダ直下にメニューを設定してみたいと考えています。

以上です。

ご静聴、ありがとうございました。

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

 
スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

 

© 2015 suzukidesu, ALL RIGHTS RESERVED.
文章並びに画像等、すべての著作物の盗用&不正利用・転載を禁止します。特にまとめサイト(NAVER・RETRIP等)での使用を固く禁止します。また、無断で使用した場合は使用料を請求いたします。詳しくはこちらのエントリーをお読み下さい。