梅雨時にブログデザインを変更している昇運さん（@Get_RisingLuck）です。
前回の記事を参考にしながら、ブログのデザインを変更してみました。
デザインテンプレート候補は2種類。
現時点では『Imaginary theme』（リンク展開します）を使用しています。
|
| 見た目も大切です |
無料公開中のデザインテンプレート『Imaginary theme』を導入しました
今回のデザイン更新は、blogger公式提供の【Essential】と無料公開中の『Imaginary
theme』が候補になっていました。
何度か切り替えてみたのですが、すでに機能が洗練されている『Imaginary
theme』で決定しました。
『Imaginary theme』について
公式サンプルブログはこちら『Imaginary theme』（リンク展開します）
個人で無料公開されているbloggerデザインテンプレートは少ない。
2020年3月公開なので、期待の新作デザインです。
制作者の解説はこちら
Imaginary｜Bloggerのテンプレートの提供（リンク展開）
変更するメリットは?
シンプルな構成で、表示が速い。
ブログパーツ配置も容易です。
Bloggerでブログを開設して、GoogleAdSense承認まで到達した方に適合します。
標準で自動広告が作動する仕様となっています。
現時点で困った事
見出しの装飾をうまく指定できません。
記事内に限定して適用したいのですが、ブログ全体に影響する方式しか知らなかったので...
テーマ編集画面のHTMLで「h2」を検索してみたところ、該当しそうな項目を発見。
3種類の項目を、各見出しごとに装飾コード編集する必要がありそうです。
- /* 記事の本文 */
- /* タブレット中心 */
/* 文字サイズと行間 */ - /* スマホ中心 */
/* 文字サイズと行間 */
基本的な【見出し】の今後
当ブログではh2,h3,h4を「大,中,小」見出しとしています。
現時点では、ブログ記事内にh1を使う予定はありません。
ただし、デザインテンプレートの構成で指定されている場合は自動的に適用されるでしょう。
画像表示の縦横比が維持できない（要更新）
スマートフォン・タブレット端末などで横長画像を表示した場合、端末画面幅に合わせて縦横比が圧縮されていました。
Twitterで問い合わせたところ、修正コードが公開されました。
更新後は想定通りの画像表示となっております。
@nagahitoyuki 原因が判明しました。
画像添付時に『元のサイズ』以外を指定すると、横長画像の縦横比が崩れます。
当面の対策は、
『画像の編集』でサイズ「元のサイズ」を指定する事です。 pic.twitter.com/zV1Gs0uKIq
— 昇運さん@オオサンショウウオ【超特大】(@Get_RisingLuck)Sun Jul 12 14:33:41 +0000 2020@Get_RisingLuck 調べたらBloggerの通常の画像投稿で「説明を追加」を使ったときに画像の縦横比が崩れる場合がありました。
body.item-view .post-body a:not([imageanchor="1"]) img {height:inherit}
HTML編集でCSSの「横向きタブレット以下」の「投稿画像」のところに上記のソースコードを追加すると大丈夫です。
— 結城永人(@nagahitoyuki)Sun Jul 12 21:35:54 +0000 2020謎の『自動広告』表示タイミング
実はGoogleAdSenseの自動広告に期待しています。
デザインテンプレート変更によって、記事内にも適時表示されるかと期待していたのですが...
現時点では効果ありません。
可能ならば、ひたすら記事を編集して適材適所の広告配置をしてほしいのですが、なかなか想定通りにはいきません。
【見出し】配置に連動した配置スクリプト
数時間観察しましたが、どうやら記事内への自動広告配置は期待できません。
これを解決するため、以前検索でみつけた機能を追加しました。
コードの内容を確認したところ、当ブログで多用しているh3見出しに連動させる必要があります。
配置タイミングも見出し1回目、4回目にしてみました。
これで記事内にアドセンス広告が配置されます。
やっと以前のような機能が取り戻せました。
『カエレバ』装飾も導入できました
今回から、物販アフィリエイトサイトの登録に合わせて『カエレバ』を装飾表示できるようにしました。
装飾デザインはNomad Code（リンク展開）から使わせていただきました。
なぜか「ヨメレバ」には適用されない模様。
シンプルですが、単純な文字列と比べれば視覚効果は劇的に向上します。
別のカエレバ登録サイトと混合しないようサイト名の切り替えを忘れずに!!
コメント