【Blogger】でのブログ作成備忘録
ブログ更新を暫くしていないと、ちょっとした設定等を忘れてしまいます。WordPressからBloggerにブログを移したのですが、Bloggerはあまり設定等の記事がないので、自分の備忘録として適宜更新しています。
広告の貼り付け方法
自動で貼り付けるだけでなく、自分で貼り付ける方法。
ディスプレイ広告
インフィード広告
記事内広告
がある。ディスプレイ広告と記事内広告は「いかにも広告」って感じなので、インフィード広告がお勧めです。
<p>
<!-- ディスプレイ広告 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8286405049703719"
data-ad-slot="8383203500"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p>
<!-- インフィード広告 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86"
data-ad-client="ca-pub-8286405049703719"
data-ad-slot="1279573251"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p>
<!-- 記事内広告 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-8286405049703719"
data-ad-slot="5150535509"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p></p></p></p></p>
PV（PageView）の確認方法
PV（PageView)のことで、どれだけ閲覧されているかの指標。
Googleアナリティクス → 左メニュー → ユーザー → 概要 → ページビュー数 で確認できます。ページごとのPV数は → 左メニュー → 行動 → サイトコンテンツ → 全てのページ。
Twitterのウィジェットを埋め込む
<a class="twitter-timeline" data-width="300" data-height="500" data-chrome="noheader nofooter" href="https://twitter.com/hiroQGA?ref_src=twsrc%5Etfw">Tweets by hiroQGA</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
注目の投稿を置きたい場所に以下の「HTML/JavaScriptガジェット」入れる。
注目の投稿
<div class="pickup">
<h4><a href="記事リンク">記事タイトル</a></h4>
<a href="投稿リンク"><img src="投稿画像のURL"></a>
<p>
投稿の要約文
</p>
</div>
<style>
/* 記事タイトル */
.pickup h4 a {
display: block;
font-size: 15px;
text-align: center;
color: #333;
border-top: dashed 1px #333;
border-bottom: dashed 1px #333;
padding: 5px;
}
/* 記事サムネイル */
.pickup img {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
border: solid 1px #ddd;
object-fit: cover;
margin: 10px auto;
}
/* 記事の紹介文 */
.pickup p {
font-size: 13px;
}
</style>
<div style="border-radius: 10px; border: 2px solid rgb(169, 169, 169); display: inline-block; padding: 10px;"> 記事 </div>
※ display:inline-block; 枠が文字幅にフィットする
https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html
の記事を参考にさせていただいてます。
目次を表示したくない記事は、HTMLに以下のスタイルコードを追記
<style>.b-toc-container{display:none!important}</style>
</head>
<meta name='twitter:site' content='@hiroQGA'/>
<img src=”” border=”1″>
記事の途中に入れる <!--more-->
<h4><a href="記事リンク">記事タイトル</a></h4>
<a href="投稿リンク"><img src="投稿画像のURL"></a>
<p>
投稿の要約文
</p>
</div>
<style>
/* 記事タイトル */
.pickup h4 a {
display: block;
font-size: 15px;
text-align: center;
color: #333;
border-top: dashed 1px #333;
border-bottom: dashed 1px #333;
padding: 5px;
}
/* 記事サムネイル */
.pickup img {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
border: solid 1px #ddd;
object-fit: cover;
margin: 10px auto;
}
/* 記事の紹介文 */
.pickup p {
font-size: 13px;
}
</style>
あわせて読みたい
<span style="color: #0b5394;"><i class="fas fa-book"></i>あわせて読みたい</span>
囲み枠
<div style="border-radius: 10px; border: 2px solid rgb(169, 169, 169); display: inline-block; padding: 10px;"> 記事 </div>
※ display:inline-block; 枠が文字幅にフィットする
ブログカード
の記事を参考にさせていただいてます。
- ブックマークレットをブックマークにドラッグ＆ドロップ
- デフォルトCSSをコピー
- テーマ→カスタマイズ→詳細設定→CSSを追加にペースト
- カードにしたいWEBページを開きブックマークレットをクリック
- 作成されたHTMLをコピーして貼り付ける
- 不要な部分は削除してOK
- 中央に寄せたいので引用にする
- あわせて読みたいと冒頭に入れて太字にする
- FontAwsomeを入れる <i class="fas fa-book"></i>
目次の自動生成
の記事を参考にさせていただいてます。
目次を表示したくない記事は、HTMLに以下のスタイルコードを追記
<style>.b-toc-container{display:none!important}</style>
FontAwesomeの設定
かわいいアイコンですね。
- 自分が使用しているテーマだと、2954行目に</head>
- その前行に以下のFontAwesomeのKit'sCodeを貼り付ける
</head>
- テーマ→HTMLの編集→PageListの行に飛ぶ
- PageListのタグを見つける
- タグを貼り付ける
- 改行すると表示されないので注意
- HOMEは貼り付けても何故か追加されないので、レイアウト→ページで直接貼り付ける
<![CDATA[{'home': {'href': 'https://qgalog.blogspot.com/', 'title': '<i class="fas fa-home"></i> Home', 'position': 0}, '9093760327371919017': {'href': 'https://qgalog.blogspot.com/search/label/%E3%81%BB%E3%81%A3%E3%81%A8', 'title': '<i class="fas fa-coffee"></i> ほっと一息', 'position': 1}, '6612530450978273206': {'href': 'https://qgalog.blogspot.com/p/blog-page_27.html', 'title': '<i class="fas fa-address-book"></i> Profile', 'position': 2}, '4976900549636219700': {'href': 'https://qgalog.blogspot.com/p/privacy-policy.html', 'title': '<i class="fas fa-book"></i> Privacy Policy', 'position': 3}}]]>
ファビコンの設定
ブラウザのタブなどに表示されるアイコン。
- Faviconジェネレーターでicoファイルを作成
- 設定→ファビコンから変更する
Twitterカード
<meta name='twitter:card' content='summary'/><meta name='twitter:site' content='@hiroQGA'/>
ページリストのリンク先をタグに変更してHomeでカテゴリ風
- テーマ→ページでページを作り、スタイルでページを設定
- 設定したいタグのアドレスをブラウザでコピー
- テーマ→HTMLの編集→PageListの行に飛ぶ
- PageListのタグを見つける
- 該当するページ名（下線）のページアドレス（赤字）をタグのアドレスに変更
'home': {'href': 'https://qgalog.blogspot.com/', 'title': 'ページ名', 'position': 0}
BloggerのSEO対策
- メタタグの設定 設定→検索設定→メタタグ→編集 検索時に表示される説明文
- 検索向け説明 TwitterCard等の説明文にもなる。入力しないとメタタグが表示
- 見出しをつける
- カスタムパーマリンク 変更する前にカスタムリダイレクトしておく
- 画像にキーワードを入れる 代替テキスト
動画サイズ 16:9
- 横×0.5625＝縦
- 300×169（YouTube）
- 600×338
- 1,280×720
MACBOOK画面キャプチャ
shift + command + 5
YouTube動画の埋め込み画面のサイズ変更をする
HTMLタグの数値を手動で変更する
<iframe width="幅" height="高さ">
※スマホだとはみ出る
画像に枠線をつける
タイトル例
〇〇5選
おすすめの〇〇徹底解説！
〇〇初心者にも玄人にもオススメ！〇〇なら「〇〇」がアツい！
〇〇の定番「〇〇」を徹底解剖！
〇〇は「〇〇」で決まり！
おすすめの〇〇徹底解説！
〇〇初心者にも玄人にもオススメ！〇〇なら「〇〇」がアツい！
〇〇の定番「〇〇」を徹底解剖！
〇〇は「〇〇」で決まり！
Bloggerトップページに表示される記事件数が少なくなる解決方法
記事の途中に入れる <!--more-->
※<div>に挟まれていると無効
ページ内リンク
飛ばしたい文字列に、下記を書き加えます。
<a href id="○△□">この文字列をクリックすると飛ぶ</a>
<a href id="○△□">この文字列をクリックすると飛ぶ</a>
リンク先は
<a id="#◯△□">この文字列に飛んでくる</a>
表の作成
Table Tag Generator https://tabletag.net/ja/
EXCELL to HTML https://tech-unlimited.com/exceltable.html
セルを下に伸ばす場合 <td rowspan="つなげるセルの数">○○</td>
セルを横に伸ばす場合 <td colspan="つなげるセルの数">○○</td>
<style>
td {
border:solid 1px #ccc;/*グレーの枠線の指定*/
padding: 4px 10px; /* 上下 左右 の余白*/
text-align: center;/* 全テキストを中央寄せ */
}
th {
background: #eee;/*見出しの背景をグレーにする指定*/
border:solid 1px #ccc;/*グレーの枠線の指定*/
padding: 4px 10px; /* 上下 左右 の余白*/
text-align: center;/* 全テキストを中央寄せ */
}
table {
border-collapse: collapse; /* セルの線を重ねる */
width: 100%; /* 幅をブラウザの100％に指定 文字幅の場合はauto */
table-layout: fixed; /* セルの幅計算指定 */
}
</style>
<table><tbody>
</tbody><caption>人気の果物</caption>
<tbody><tr>
<th>サイズ</th>
<th>チェスト(cm）</th>
<th>ウエスト(cm）</th>
<th>身長(cm）</th>
</tr>
<tr>
<th>S</th>
<td>80～899999999999998</td> /* <th width="150px"> */
<td>68～76</td>
<td>155～165</td>
</tr>
<tr>
<th>M</th>
<td>88～96</td>
<td>76～84</td>
<td>165～175</td>
</tr>
<tr>
<th>L</th>
<td>96～104</td>
<td>84～94</td>
<td>175～185</td>
</tr>
</tbody></table>
| サイズ | チェスト(cm） | ウエスト(cm） | 身長(cm） |
|---|---|---|---|
| S | 80～899999999999998 | 68～76 | 155～165 |
| M | 88～96 | 76～84 | 165～175 |
| L | 96～104 | 84～94 | 175～185 |
コメント
0 件のコメント :
コメントを投稿