Bloggerでヘッダー画像の「テーマ画像の作成者」をブログのフッターに表示する

Bloggerはウェブのテーマのカスタマイズ/Bloggerテーマデザイナーの「背景」からヘッダー画像を設定できる。デフォルトで用意された中から画像を選んで取り付けるとブログの最下段のフッターには「テーマ画像の作成者」と本人の名前のオリジナル画像のページへのリンクも表示される。自分で写真や絵をアップロードしてヘッダー 画像を取り付けるとブログのフッターには何も出ない。


僕はブログのヘッダー画像に写真を使っているけれども自分で撮影するとか作成したわけではない。幸せの良さとして素晴らしく気に入ったクリスティン・フォークトの写真を使っている。ライセンスがパブリックドメインと変わらないクリエイティブコモンズのCC0だから出典を示さず、誰でも勝手に使って良いんだけれども気前良く提供してくれた本人への感謝を込めて少しでも紹介しておきたいと思う。


ソースコードで「テーマ画像の作成者」は表示できる


Bloggerブログ/些細な日常の「テーマ画像の作成者: Kristin Vogt」が表示されたフッター

Bloggerのカスタマイズでヘッダー画像を自分でアップロードするとブログのフッターの「テーマ画像の作成者」は出なくなるから無理かと思った。ところがソースコードを調べてみるとデフォルトで用意されたヘッダー画像を使った場合と同じように記述すればコンピューターに読み込まれてテンプレートに表示されると分かった。所定のメッセージと共に作者名とオリジナル画像のURLのリンクを設定できるからブログに新しく取り入れた。


Bloggerブログの「テーマ画像の作成者」のソースコード


テーマのhtml編集かバックアップ/復元のダウンロードからソースコードのVariable(変数)タグのBackground(背景画像)を編集する。


<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left"  value="$(color) url(https://example.jpg) no-repeat scroll top center /* Credit: 作者名 (オリジナル画像のページURL) */";/>

テンプレートのソースコードの前の方に置かれたの項目に含まれるVariableタグの中からBackgroundのdescription(説明)の部分を見付けてサンプルの帯文字の二ヵ所を追加する。


一つ目は最後の文字から半角スペースで区切ってcssのコメントアウト(/* コメント */)を使う。


コメントの内容は「Credit:」と「作者名」と半角括弧付きの「オリジナル画像のページURL」で、何れも半角スペースで区切って入力する。


最初の「Credit:」はソースコードへの「テーマ画像の作成者」の出力を行うためにそのままで記載して「作者名」と「オリジナル画像のページURL」は任意で構わない。


二つ目は半角セミコロン「;」をVariableタグの閉じタグの半角スラッシュ(/)の前に置いておく。たぶん必要ないかも知れないし、入力しなくてもブログに「テーマ画像の作成者」はちゃんと表示される。しかしデフォルトで用意されたヘッダー画像を使うと「テーマ画像の作成者」を表示するために必要なコメントアウトと共に当の半角セミコロンが付いているんだ。万一、ソースコードの他のところで差し障りがないともかぎらないから念のために入力するべきだと感じる。


ブログに自分以外の素晴らしく気に入ったヘッダー画像を使ってフッターに「テーマ画像の作成者」を表示しながら作者名とオリジナル画像のページをリンク付きで紹介できるのはとても嬉しい。


そして訪問者がヘッダー画像の作者を他人なのに自分と勘違いしてしまうのを防ぎ易くなるのも助かる。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策