六甲1号のページ

鉄道趣味の個人資料館と、あちこち出掛た模様をお送りします (旧・出撃にっきを統合)

ブログのヘッダー背景を変えてみる

今回は連日の出撃模様の記事から🍵ちょっと一息ついて、ブログの設定関連の記事を書きます。

 はてなブログでは様々な設定が可能でして、公式が用意しているテーマの他に、ユーザーが作成したCSSスタイルも選べる他に、タイトルヘッダーに好きな画像も入れる事が出来ます。 
 今回はそのタイトルヘッダー画像を自作の物に入れ替える事にしました。

 

 画像作成ソフトを使う

 ヘッダー部のサイズが決まっているので、そのサイズで仕上げる事でなるべく両端に違和感がないように作ることができます。

 ヘッダーのサイズは、 
 ①PC・レスポンシブ用が 横1000pxX縦200px です。
 ②スマホ用のサイズは 横720pxX縦240px です。

 普通に撮った写真から1000x200の横長の写真を切り出すと、写真の一部分しか見えないので実用性がありません。そのため、横に何枚か繋げたマルチ画面を作って、それを縮小した物を貼り付ける事にします。

 写真をマルチに繋げるソフトとして無料で使えるのが、Photo Scape X というソフトがあり、マイクロソフト・アップル公認で配布されているので、安心して使えます。

 

 4連写真を作成

 ソフトを起動したら、写真を並べる作業をします。 
 

 ①まず上のメニューで「コラージュ」を選びます。 
 ②次に右側にコラージュ分割パターンを選ぶ項目があるので、ここでは4分割を選びます。 そうすると画面内に4枚写真を張り付けられるようになります。なお初期状態では写真の貼り付けエリアは縦長になります。作業しやすいように、画面サイズを4000x800にしておく事をオススメします。

 ①枠内に自分が撮影(デザインした)した画像を次々と入れていきます。著作権の問題もあるので、フリー素材でない限りは、どこかから勝手に拾った画像を入れるのは避けた方がよいでしょう。 
 ②枠内に写真を貼ったら、一旦名前を付けて保存するか、クリップボードに保存します。

 画像サイズをはてなブログのヘッダー推奨サイズに変更します。
 ①上のメニューから写真編集を選び、先ほど保存した画像を読み込むか、クリップボードから貼り付けます。 
 ②画像が貼られたら右側のメニューにある「サイズ変更」を選びます。

 

 サイズ変更を選んだら、横1000px 縦200px に指定して、(元の画像が5:1であれば、縦サイズは自動で200pxに設定されます。) 縮小した画像を保存します。 

 最後にはてなブログ側の設定を行います。

 

 はてなブログの管理画面を立ち上げたら「デザイン」を選択して 
 ①ヘッダをクリックします。 
 ②ファイルを選択を選んでアップロードします。 
 ③表示設定で、テキストを表示するか否かの選択をします。作例では予め画像に文字を合成しているので、画像のみ表示に設定しています。

 

 最後に「変更を保存する」で設定完了です。

 

 試しに4枚並べてヘッダー画像を作ってみましたが、適度に画像を入れ替えて、飽きが来ないように楽しみたいと思います。