キンドル本をKindle Unlimited で読んでいただけます

Amazonで販売している電子書籍「三十一郎(みそいちろう)」を、KDPセレクトに登録しました。
Kindle Unlimited にて、無料でお読みいただけます!

商品ページはこちら

ヘッダーの写真はフリー素材のトリミング

前記事でスタイルシートカスタマイズの話をしたので、今回はヘッダーに使っている写真について。

スタイルシートのカスタマイズはずっとやりたかったのです。
あらかじめ用意されているデザインの何が気に入らなかったのかというと、自分の気持ちにピタッとこない(笑)。十人十色ですからそうぴったりくるはずないのですが、そういう利用者の気持ちをくんだ、ニュートラルで控えめな、どんな内容(心情)の記事を書いてもそれを邪魔しない、押さえたデザインが欲しかったんですよ。

それでも、ヘッダー部分が狭くて真っ白なのは寂しいし幅が定まらない感じもするので、カスタマイズの過程で「ヘッダーには写真を使う」と決めました。

スポンサーリンク

イラストではなく写真を使いたい私の理由

イラストではなく写真をの理由は、写真のほうがニュートラルであると思うから。
イラストは画家の世界観が前面に押し出されている主観的なものだから、それが自分の気持ちに合っていればいいけれど、たぶん合わないことのほうが多い。自分でイラストを描けるならそれを使うこともできるけど私には無理。
けれど写真は、それが「現実世界を撮影したもの」という意味で客観的であり、そこから何を感じるかという自由度は断然高い。現実の、生活の中の風景から何かを感じるということと、かなり近いと思います。

だから記事の邪魔をしないデザインの一部として使うのには、主張の強いイラストよりも懐の深い写真のほうが向いていると思うのです。

写真をトリミングすることで「自分の目線」がプラスされる

私はフォトライブラリーブログテンプレートサービスを利用しています。ここで写真を選んで、もとの画像のどこを切り取るかという選択(トリミング)をするわけなのですが、この「どこを切り取るか」で自分の目線がプラスされるのです。
例えば、同じ写真を三人で見ているとしても、写真のどこに注目するか、どこに心をひかれるかというのは三人それぞれで、たぶん三人とも違う箇所を切り取るはずだと思います。つまり「自分の目線がちょこっとプラスされたヘッダー画像」ができあがるというわけ。

もちろん、もとの写真にはそれを撮影したカメラマンの目線があるわけなので、トリミングはそれを無視(?)する作業かもしれないと感じます。
でもフォトライブラリーの利用規約を見てみると、個人ブログのテンプレートとして使うのは再配布にあたらないとなっており、切り抜き・縮小加工などの加工をしてください。との但し書きがあります。カメラマンさんたちは素材を提供する時点で加工されることを了承しているわけですね。ありがたいことです。大きな心に感謝。

フォトライブラリーには、無料なのに「無料でいいの?」と思うくらいいい写真がたくさんあります。一度のぞいてみてください。

フォトライブラリーでヘッダー画像を用意する手順

seesaaブログを利用している場合は「専用の画面から画像を選んでトリミングをし、諸々の設定をして出力されたスタイルシートのタグを使う」という流れです。トリミングされる画像の大きさは幅778px、高さ246pxです。

seesaaブログを利用していない場合でも、普通にフォトライブラリーのサイトから無料の画像をダウンロードして自分でトリミングすればOK(もちろんお金を払うつもりなら選択の幅はぐんと広がります)。seesaa利用者でも「違う幅で切り取りたい」「縮小率を自分で調整したい」場合はダウンロードすればOKですね。
専用画面の操作を追ってみます。

  1. 専用の画面から写真を選びます。(「seesaa管理画面>デザイン>PC>デザイン設定」にリンクバナーが表示されています。)

    カテゴリをクリックすると次の画面でサムネイルが表示されるので、選んでクリック。

  2. 次の画面で画像が大きく表示され、緑色の選択枠があらわれます。マウスで枠を動かして、切り取りたい位置を決めたらクリック。クリックすると選択枠が赤色に変わります。よければ「送信」をクリック。

  3. 次の画面では、サイドバーとタイトル文字の位置、タイトル文字とブログ説明文の文字色を選ぶことができます。下部のプレビューを見て、よければ「この内容で決定」をクリック。

  4. 次の画面で、スタイルシートタグが出力されます。(トリミングした画像はseesaaのサーバに保存されます)

「このタグをそのまんま使えばいいのね」と思ってしまいますが、これはやらないほうがいいと思います。じつはこの「出力されるタグ」はとても古いのです。seesaaブログに時々追加される新機能に対するタグ(ツイッター、同カテゴリの最新記事)が、このタグには含まれていません。

なので、このタグのもとになっていると思われる「light pole」(または#containerの幅が778pxのデザイン)をあらたにマイブログに追加し、そのスタイルシートを開いて、次の4項目

h1 {} /*タイトル文字*/
h1 a{} /*タイトル文字のリンクカラー*/
#banner{} /*ヘッダー部分*/
.description {} /*ブログ説明文(タイトル文字の下の部分)*/

を出力されたものと入れ替える・・というのが簡単だと思います。

このブログのヘッダー画像を週替わりにする!(もちろん手動)

じつは私、このトリミング作業がとても好きなのです。

今は「夕日の中を走る子猫」の画像をヘッダーに使っていますが、もっとたくさん使いたい写真があるんです。なので、ヘッダー画像をほぼ週替わりにします。そしてひと月かふた月ごとに、使った画像を紹介する記事を書こうと思います。

ということで、来週、画像替えますよー。(笑)

前記事で書いた「デフォルトを保存しておいた方が」の理由

前記事で「デフォルトは保存しておいた方が後々便利なので」と書いたので、その理由を。

seesaaブログに新機能が追加されると、それに対するタグがHTMLやスタイルシートに自動的に追加されます。ただし、HTMLやスタイルシートに少しでもカスタマイズをほどこしていると追加されません。その新機能をブログに適用したい場合は、カスタマイズしてあるHTMLやスタイルシートを、いったんデフォルトに戻して最新データに更新し、それに対して改めてカスタマイズをほどこしてゆくという作業が必要になります。

今回の機能追加に関しては、以下の点にご注意ください。
===== ご注意ください! =====
今回の追加された「記事ページのページング機能」については、以下の条件に該当するブログでは機能いたしません。
(1)マイ・ブログ>デザイン>HTMLにて、ブログのHTML編集を行っているブログ
(2)マイ・ブログ>デザイン>コンテンツにて、記事コンテンツのコンテンツHTML編集を行っているブログ
上記に該当するブログにつきましては、弊社にて該当HTMLを今回機能追加の対象としておりません。
今回追加された「記事ページのページング機能」をご利用いただくには、上記(1)、(2)のHTML編集をデフォルト設定に戻してから再度編集を行っていただく必要がございます。
デフォルト設定を行う際には、編集済みのHTMLの内容が消えないよう、ご利用者様自身にてバックアップを行ってください。
============================

記事のページング機能

なので、いったいどこが追加されたのかを見比べるとか、「どこをカスタマイズしたのかメモってないよ!」というときに元のタグとカスタマイズしたタグを見比べて探し出すとか、そのために保存しておけば安心かなと思います。

ただ、「カテゴリ最新記事タイトル表示」のときにはスタイルシートに追加するべきタグをお知らせしてくれたので、たんに追加すればOKだったみたいです。HTMLについては何も書いてないので、カスタマイズしていても大丈夫だったのかもしれません。

コメント

  1. 小松 より:

    あなたの記事に救われて問題が無事、解決しました♪
    有難うございました。
     何しろ、何十回チャレンジしても、ヘッダー画像をカスタマイズ
    出来ずに、文字化けの連続で途方に暮れておりました。
     CSS編集やHTMLなんかは、かなりマニアックな部類だと
    思っているので、難しいですね。
     これで、うまく行かなかったら、もう諦めようと
    思っていましたが、無事に成功しました♪
    感謝致しております。(^^♪

  2. 久子 より:

    小松さま、コメントどうもありがとうございました。
    画像のカスタマイズがうまくいったそうで、良かったです。
    この記事がお役に立ててうれしいです。