スキップしてメイン コンテンツに移動
ラベル(ガジェット)が付いた投稿を表示しています すべて表示

Bloggerの管理画面のレイアウトのカスタマイズについて

イメージ

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout:管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout:管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー(▼)の「HTML編集」か「元に戻す」(テンプレートのXMLファイルのアップロード)で書き換えられる。 …

BloggerのContempoテーマで記事タイトルの右横の共有ボタンを消す

イメージ

Bloggerの Contempoテーマ の記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて 表示速度を下げてしまう恐れ も否定できないので、消すべきではないかと感じ始めた。 記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。 Flower latte art by Kevin Menajang [ CC0 ], via Pexels もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。 目次 記事タイトルの右横の共有ボタンを消す方法 Contempoの記事タイトルの右横の共有ボタンのソースコード 記事下の共有ボタンを単独で表示する方法 Co…

Bloggerのdefaultmarkupタグの最初は便利で最後は不要な使い方

イメージ

Contempoなどの2017年の公式テーマ からソースコードに追加されていたBloggerの独自タグの一つ、defaultmarkupとは何かを考える。 Contempoテーマ via Blogger head内に幾つも記載されていて中身はincludableタグばかりなんだ。翻ってbody内には同一のidと内容を持つincludableタグが記載されていて完全に重複している。ソースコードに二つのマークアップがまるでコピーされたように含まれているのはサイト作成で謎としかいいようがない。 概して一つしか要らないはずだし、body内のincludableタグでブログは成り立つと思う。defaultmarkupタグがなぜhead内に幾つも記載されているのか。Bloggerのテンプレートでの役目、そして使い方も分からない。 defaultmarkupタグはウィジェット毎の初期設定を示す 調べるとB…

Bloggerブログで注目の投稿ガジェットの次にアドセンスのサイト広告を表示する

イメージ

ブログのテンプレートを Contempoに変えたら トップページの先頭に注目の投稿ガジェットが付いていた。調べると公式テーマに同時に追加されたSohoとEmporioとNotableも同じなんだけれども注目の投稿ガジェットをトップページに使うとアドセンスのサイト広告の出方が変わってしまうんだ。 レイアウトのブログの投稿から記事下だけではなくトップページを含めてインデックスページの複数の記事の抜粋にどのくらい間隔を開けて表示するかを決められるのが一つずれる。 修正して注目の投稿ガジェットの次にアドセンスのサイト広告か出るようにした A woman thinking in grassland by cuncon [ CC0 ], via Pixabay テーマのHTML編集かバックアップ/復元からカスタマイズを行う。 Blogのtypeのwidget内のmainのidのincludable内にアドセ…

Bloggerブログでページリスト(先頭)と人気の投稿の見出しタグを変更する

イメージ

2017年の公式テーマ のContempoとSohoとEmporioとNotableのカスタマイズで、 記事/追加ページの固有タイトルの見出しタグをh3からh1に 、そして ブログ名の見出しタグをh1からh2に 変更した。何れも HTML構文 と SEO対策 のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト(先頭)と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。 ページリスト(先頭)はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。 人気の投稿は記事/追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更した…

Bloggerで取得できるアドセンスのホスト型と非ホスト型のライセンスについて

イメージ

サイト広告の アドセンスのライセンス にはホスト型と非ホストの二種類がある。 アドセンスのホスト型のライセンス 提供元の Google にホストされた一部のサイト:YouTubeやBloggerから取得して個々のサイトで設定して使用できる アドセンスの非ホスト型のライセンス Googleアドセンス のサイトから取得して所定の広告コードを掲載できるかぎりの全てのサイトで使用できる 追記:アドセンスの規約が更新されてライセンスがホスト型でも非ホスト型でもサイト広告を掲載するサイトには個別の審査が必要になった。 BloggerはYouTubeと共にアドセンスのホスト型のライセンスを取得して使用できる数少ないサイトの一つで、 一般サイトとしてはサブドメインのサイトアドレスでも申請できる のが例外的なんだ。 現状、非ホスト型で申請するには 独自ドメインのサイトアドレス でなくてはならないし――以前はサイトアドレスのタイプは…

Contempoのページリスト(先頭)ガジェットにスマホでもっと見る…を表示する条件

イメージ

些細な日常のページリスト(先頭)ガジェットはスマホでもっと見る…が表示されている。 Bloggerの 公式テーマのContempoを使って レイアウトでページリスト(先頭)ガジェットを設定して項目が多い場合にスマホで画面の横一列に入り切らず、省略してもっと見る…のボタンが表示されるようになっている。 ところがカスタマイズによってデザインが反映しなくなってしまうと分かった。 調べるとBloggerのバグなのか、テーマのカスタマイズの上級者向けの本文の文字サイズを15px以下に変えると上手く行かないようなんだ。 もう一つデザインで、ページリスト(先頭)ガジェットにホーム/トップページを設定した場合にContempoテーマの現行のVersion 1.3.0(HTML編集の冒頭の「templateVersion」で確認可能)では太めの下線が入るけれども消えてしまう。 どうすればスマホでもっと見る…やホームの下…

Bloggerブログでモバイルのガジェットの表示を切り替えるソースコード

イメージ

Bloggerはウェブの編集のレイアウトからブログに様々なコンテンツのガジェットを設定できる。 パソコン/タブレットのウェブバージョンとモバイルバージョンにデザインが分かれている場合、公式テーマのシンプル、動的ビュー、画像ウィンドウ、Awesomely Inc.、ウォーターマーク、エスィリアル、旅行など、テーマのHTML編集からガジェットの レイアウト用ページ要素タグ の <b:widget></b:widget> の開始タグに「mobile」属性を追加してモバイルバージョンのガジェットの表示を切り替えられる。 ガジェットのモバイルバージョンへの四つの指定 mobile=' yes ' モバイルでガジェットを表示する mobile=' no ' モバイルでガジェットを表示しない mobile=' only ' モバイルのみでガジェットを表示する mobi…

BloggerブログでGoogleアドセンスを使う際にくれぐれも気を付けておきたいこと

イメージ

Bloggerはウェブの編集の「収益」でスイッチを入れると Googleアドセンス のサイト広告が簡単に使えるようになっている。どちらもGoogleのサービスだから上手く連携されているせいだろう。 Googleアドセンスのライセンスを持っている かぎり、もはやBloggerは一般的に必要とされるHTML編集を行わなくても特定のガジェットの「Adsense」からサイト広告のソースコードをボタンだけで挿入できてしまう。 ブログを開設して間もないと 最初の設定の「収益」が機能しない けれども暫く待っていれば大丈夫なんだ。 しかし実際に使う際に気を付けておきたいことが出て来てとても大事だから明らかにしてしっかり覚えるべきだと考える。 HTML編集で記事以外に出すな BloggerではHTML編集も可能だけれどもGoogleアドセンスに厳しいのはサイト広告のソースコードを挿入するとエラーページにも表示される。 Goog…

Bloggerでブログを開設しても直ぐにはアドセンスのガジェットが使えるようにアカウントの関連付けはできない

イメージ

Bloggerはサーバーのサイト広告がないだけではなくてテンプレートのレイアウトのガジェットからアドセンスのサイト広告を貼り易くなっている。 提供元が両方ともGoogleだから速やかに最適化されているという感じがする。 しかしアドセンスのライセンスを持っていてもBloggerでブログを開設して直ぐにはウェブの編集で「収益」からのアカウトの関連付けができなかったんだ。 他にもBloggerでブログをやっていて予め分かってはいたもののどのくらい待たされるのかまでははっきり突き止めてなかった。 些細な日常はメインのブログだからアクセスを期待しながら収益化へ向けてアドセンスのサイト広告は是非とも貼らなくてはならないし、万一、無理だったらBloggerを止めるしかない感じになってしまうので、短期間でもアドセンスのガジェットが使えない状態は肝を冷やすほどの恐怖でしかないわけだった。 調べてみると人それぞれで違…