以前のブログに纏めていたBLOGGERテーマの
カスタマイズ覚書～

このSNS社会でブログやるひといるのかなー
って思うんですけど
結構いると思うので
ニッチかもしれないけど
私が使っているbloggerテーマのカスタマイズ術


（１）Blogger関連記事表示のためのテーマカスタマイズ

記事下にラベルごとの関連記事あるとええよね。


ところがオシャレなテーマをDLしても
（無料テーマだったりすると）
実際のBLOGGERでは
関連記事が働かないってことが多いんだわ。
(;´･ω･)

DLしたテーマの関連記事が

表示されないよって方向けにも説明してます。

↓

参考URL（IB-Noteさん）

※神記事を書いてくださったブログさん
こちらからコードをコピペしてください。
↓

【Blogger】関連記事表示のお手軽プラグイン（改良版） - IB-Note (itblogger-note.blogspot.com)

HTML編集でのコード挿入箇所


★テーマはカスタマイズ前に必ずバックアップしてくださーい。

デフォルトテーマ（BLOGGER標準テーマ）の場合


Bloggerテーマ編集HTML
→BLOG1
F3で検索窓を開く


検索ワード

</article>

見つからない場合は
<div class='post-footer'>

を検索して、

検索したコードの直上に
参考サイトさんからコピペしたURLをペーストし、
保存する。

※　<div class='post-footer'>　の場合は、
２個目の同コードのすぐ上（直上）に追加。

</article>も２個目があれば同様の対応でOKだった気がします。

DLしたBLOGGERテーマの場合


※ほんと無料テーマだと
デモだと表示されてた関連記事が
表示されない事が多いのでｗ


Bloggerテーマ編集HTML→BLOG1
F3で検索窓を開き以下の項目を検索する。
（重要なので大文字）


relate
↓
＜div class="related post"＞

等、表記されている部分があり、その下に

例：（b:includable id='postRelated' var='post'）

等表記されている箇所があれば、

現在のブログで関連記事表示されていない項目に当たるため
古いコードを削除して上書きする部分になります。

コードを訂正する箇所


例：（b:includable id='postRelated' var='post'）以下～（/b:includable）内の
古いソースを削除し、

上記の紹介サイト様からコピペしておいた新しいコードを　

例：（b:includable id='postRelated' var='post'）以下～（/b:includable）の間に
ペーストして保存する。

これで反映されるはずです(*￣▽￣)



（２）BLOGGERのリンク（ガジェット）を

別窓にするカスタマイズ



テーマ→html編集→ウィジット

→レイアウトに表示されている順で見た
別窓リンクにしたい箇所の「LINK○○」を開く

※○○は数字。
リンクガジェットが複数ある場合は
レイアウト順に表記される。

F3キーで以下を検索

<a expr:href='data:link.target'>
　

以下のように書き換えて保存する。
↓

<a expr:href='data:link.target' target='_blank'>


追記 

自分でやってみたらリンクリストが
テーマに最初からたくさん設置されすぎていたので
html編集のガジェットクリックして、
別窓にしたいガジェットのタイトルで
検索すれば早いかなって思いました。


こういう感じで表記されているんで。




（３）BLOGGER以外でも使えるテーマカスタマイズメモ

１）YOUTUBE埋め込みのレスポンシブ化CSS

BLOGGERあるある！！

レスポンシブテーマを使っているのに
動画はページからはみ出す。
困っちゃいますよね、これ。

CSSに以下のコードを入れるとこのように記事から動画がはみだしません。



ブログ記事から動画がはみ出さない♪　小さくなりすぎない♪

以下をコピペ。html編集からCSSの箇所に追加保存する。

iframe {

  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

以上でーす！


２）画像のレスポンシブ化（縦横比が丁度いいCSSならコレ！）

※原寸横幅1200の画像

ベタすぎるやつだけど
これもCSSに入れとくと
記事から画像がはみ出さなくて
便利です

/* 画像レスポンシブ化-------------------------------------------------------------- */

img {
max-width: 100%;
  height: auto;
}