この記事では、「フッターレイアウト」の変更についてまとめます。フッターは、おそらくブログの中で最も見られることの少ない部分でしょう。でも、だからこそ、フッターがきれいに整っていると「おっ」と思ってもらえます（たぶん）。とは言え、そこにあまり時間をかけるよりは記事を書いた方が良いのも事実…。ということで、今回は時間をかけずにフッターを整える案をご紹介します。HTMLを少し編集しますが、簡単です。
ビフォーアフター
おそらく多くのテーマで初期状態はこうなっていると思います（テスト用ブログなのでタイトルが"kamo lab"になってます）。
それをこうします。
デフォルトでは "Powered by Blogger" の主張が強いのでちょっと控えてもらって、コピーライトの下にQooQと並べました。あとリンク部分を太字に。
コピーライトもマークさえあれば分かるので前後の言葉は削除して著者名と発行年に（正直、発行年はこの記事を書き始めるまで忘れてましたが…）。そして当ブログのシンボルである魚にも入ってもらいました。
この辺の構成は好みなので、あくまで一例です。実は、コピーライト表記がなくても日本では著作権が保護される仕組みになっています（詳しくはこちら⇒ 【保存版】もう迷わない！フッターに表記するコピーライトの正しい書き方とタグ【HTML5・PHP・JavaScript】 | deco8 blog）。
ただ、わざわざコピーライト表記をしておくことで「著作権は放棄してませんよ」という意思表示にもなるし、「ちゃんとやってます」という感じも出せます（たぶん）。ということで、さっそく作業に入りましょう。
フッターのAttributionを消す
とりあえず、フッターに鎮座している "Powered by Blogger" を消します（後で下に出します）。QooQは「レイアウト」から簡単にできますが、Blogger公式テーマは「HTML編集」が必要になります。
QooQの場合
QooQの場合は、管理画面の「レイアウト」からフッターの "Attribution" ガジェットを削除すればOKです。
管理画面やレイアウトがよくわからない方は、まずこちらをご覧ください。HTML編集についても書いてあります。
itchingears-kamokamo.blogspot.comBlogger公式テーマの場合
個人的にはBlogger公式テーマの場合は消さない方が良いと思います。なぜなら、「レイアウト」から消せない仕様になっているということは、Bloggerとしては消してほしくないということなのかなと推察するからです。いじるとしても、サイズを小さくするとか、下に移動するとかにとどめて、完全に消してしまわず、残しておくことをおすすめします（Bloggerホームへのリンクになっているので、もしかしたらここからBloggerユーザーが増えるかもしれないし…）。ここではヒントのみ紹介します。
Google Chromeの検証ツール（Webデザインに役立つ便利ツールです。詳しくはこちら⇒ 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方 ）を使ってAttributionの要素を調べれば分かりますが、class名 ".Attribution .blogger" でその部分を特定できます。CSSでそれを "display:none;" として非表示にしてやれば、消えます。
コピーライト部分を編集・追加
次にコピーライトの部分を作ります。QooQの場合は上に載せた初期状態のようにコピーライトが最初から用意されているので、そのHTMLを編集します。Blogger公式テーマの場合は、「レイアウト」から追加することができます。ただし、デフォルトだと "Powered by Blogger" に対して文字が小さすぎると思うので、大きくする方法を紹介します。
QooQの場合
まず、CSSでデザインと前後の言葉を変更します。HTML編集画面で #copyright と検索してジャンプする箇所の周辺を、下記画像を参考に編集します。
1は文字色で、変数 $(font.light) の値を変えても良いし、固定値に置き換えてもOKです。
2と3はコピーライト前後の言葉で、個人的には不要だったのでコメントアウトしました。"\0a9"は©のことですが、HTMLでも書けるので後述します。
4はQooQの前の言葉で、これを消したのは "Powered by Blogger" をその前に入れるためです。CSSではなくHTMLで記述しています。
次に、HTMLのコピーライト記述部分を編集します。
<p id='copyright'> を検索し、ジャンプしたところに以下の2行が見つかります。
<p id='copyright'><data:blog.title/></p>
<p id='designed-by'><a href='http://qooq.dododori.com' target='_blank'>QooQ</a></p>
これを以下のように変更します。
<p id='copyright'>© 2020 <script>if(new Date().getFullYear() > '2020')document.write('-' + new Date().getFullYear());</script> 著者名</p>
<p id='designed-by'>Powered by <strong><a href='https://www.blogger.com/' target='_blank'>Blogger</a></strong> <i class='fab fa-blogger'/> | Designed by <strong><a href='http://qooq.dododori.com' target='_blank'>QooQ</a></strong></p> 以下、説明です。
・1行目について
"©" というのは "©" の意味です。
scriptタグは発行年から現在の年を例えば "2020-2021" という風に自動で表示させるための仕掛けです。'2020'の部分は発行年に応じて変えてください。当ブログは2020年に開始したのでまだ2020としか出てませんが、来年には自動で変わるはず。実はこの年表記は「発行年」さえあれば良いらしいので、scriptは無くてもかまいません。
「著者名」の部分はそれぞれペンネームでも本名でもご自由に。
・2行目について
BloggerとQooQのリンク付きAttributionを直接書いています。
BloggerアイコンはFontAwesome5を使っています。アイコンは無くても良いのですが、入れたい方はFontAwesome5を導入してください（導入方法は別記事で書く予定です）。
QooQの作業はこれで終わりです！
Blogger公式テーマの場合
「レイアウト」を見ると、初期状態でフッターに "Attribution" というガジェットがあると思うので、その編集ボタンを押すとコピーライトの文言を追加できます。無い場合は、フッターのガジェット追加で "Attribution" を入れます。"Powered by Blogger" を消しちゃった人は、ここに書いてコピーライトと横並びにするということもできます（リンクは貼れませんが）。
このようにコピーライト表記は簡単に入るのですが、どうも "Powered by Blogger" に対して文字が小さすぎるような…いや、 "Powered by Blogger" が大きすぎるのか？とりあえずどちらかを何とかします。
・コピーライトを大きくしたい場合
HTML編集画面で .Attribution .copyright と検索するとジャンプするCSSのfont-sizeを大きくすればOKです。たぶん初期値が .7em になっているので、これを 1em にすれば "Powered by Blogger" と同じ大きさになります。
・"Powered by Blogger" を小さくしたい場合
HTML編集画面で先ほどのジャンプ先の上あたりに以下のCSSを追加します。
.Attribution .blogger{
font-size:.7em;
}
これで文字は小さくなります。ただし、アイコンは小さくなりません…。バランスが悪いので、コピーライトを大きくした方が良いかもしれません（あくまで好みですが）。
以上でBlogger公式テーマの作業は終わりです！
おわりに
「フッターレイアウト」の変更についてまとめました。ニーズは少ないと思いますが、その分やり方を教えてくれる記事も見つからなかったので、ちょっと試行錯誤してました。お役に立てたら嬉しい限りです。
当ブログの改造リストはこちらです。どうぞご覧ください。
itchingears-kamokamo.blogspot.com
No comments:
Post a Comment