スキップしてメイン コンテンツに移動

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 definitions -->の項目に含まれるVariableタグの中からBackgroundのdescription(説明)の部分を見付けてサンプルの帯文字の部分を追加する。

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

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

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

完了すると「作者名」をリンク名/アンカーテキストとして「オリジナル画像のページURL」へのリンクが生成されるようになる。

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

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

コメント

些細な日常の人気の投稿

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

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

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ