週刊博士課程

平成31年4月からアカデミアを目指して博士課程に進学する筆者が、研究生活等について徒然なるままに書こうと考えています。

週刊博士課程

【はてなブログのタイトル画像】タイトル画像作成方法とタイトル画像(ヘッダー)をアップロードすると余白ができてしまう時の対処法

なんといつの間にか記事を20本書くことができました。

 

結構大変でした。(パチパチ)

 

せっせとブログに記事を挙げて、ブログをみてくれる人が増えると、やっぱり欲が出てくるんですよね。

 

「もっと多くの人に読んで欲しい。」

 

そうなると、読者さんのためにも、ブログをもっと見やすく・センセーショナルな感じにしたくなるものです。

 

そこで今回は、タイトル画像の作成とブログへの設置にチャレンジしました。

(累計3時間かかりました)

 

まずはじめに〜タイトル画像の用意〜

 言わずもがな、まずはじめに、タイトル画像を用意するしなければなりません。

 

タイトル画像を用意するには、2つの方法が存在します。

 

  • フリー素材を使う
  • 手持ちの画像を使う

 

今回、私は手持ちの画像を使用しました。

 

しかし、一応フリー素材も探してみました。

その時活用させていただいたのがこちらのブログです。ブログ自体も大変読みやすく参考になりました。

ameedom.com

 

 

さて、タイトル画像の作成方法ですが、私が使用したツールは

こちら!

 

「PIXLR EDITOR」

f:id:hdk46mer:20190312012801p:plain



 

PIXLR EDITORとは

ブラウザ上で画像編集ができる無料のソフトです。簡単に言うと、無料版のPhotoshopみたいなものです。

しかも!

  • 登録不要で、いきなり使える!
  • 初心者でも、まあまあ使いやすい!

 photoshopなどの画像編集ソフトは高額なため、このような無料のソフトは本当にありがたいです。

こちらにリンクを貼っておきます!

Online Photo Editor | Pixlr Editor

 

タイトル画像の作成方法

早速、私がタイトル画像を作成した方法を説明したいと思います。

Pixlr Editorには多種多様な機能が存在しますが、その中のごく一部のツールだけでタイトル画像は作成できました。

 

まず、Pixlr Editorのサイトに行くと

f:id:hdk46mer:20190312012019p:plain

 

 このような表示がでますが、赤枠で囲った方をクリックしてください。

上のTRY PIXLR Xは最新式の編集ソフトみたいでしたが、使い方に慣れるまで難しいです。

 

下の赤枠で囲った箇所をクリックすると

f:id:hdk46mer:20190312012842p:plain


こちらも赤枠で囲った箇所をクリックすると、

 

f:id:hdk46mer:20190312014121p:plain


画像の大きさを指定するWindowが現れます。

 

はてなブログのタイトル画像は横幅1000高さ200がちょうどいいサイズみたいです。

私も、1000×200で画像を作成したところちょうどよかったです。

 

そしてTransparent(透明)にもチェックを入れてください。

 

サイズを指定して「OKボタン」を押すと、

 

f:id:hdk46mer:20190312014213p:plain


レイヤーが出てきます。

 

ここからはEditから編集したい画像を開き編集していきますが、

私はこちらのブログを参考にさせていただきました。

 

www.imaichido.com

 

タイトル画像の横に余白ができてしまう

f:id:hdk46mer:20190213205417j:plain

 

画像編集が終わったら、

 

よし、こんな感じで画像を作成できたからブログにアップロードしよう

 

となりますよね。

 

実はここからが大変

 

アップロードは管理画面からアップロードできますが、

 

いざアップロードしてみると、

タイトル画像の横に余白ができてしまう。

そしてスマホでブログを見てみると、

タイトル画像が見切れてしまっている。

 

www.imuza.com

 

こちらのブログで丁寧にタイトル画像の位置調整について説明してくだっており、こちらのブログに記載されいるコードで問題点が直っている人もいましたが、

 

管理画面のデザインの項目にあるレスポンシブにチェックをしっかり入れているのに、私は何をしても直らない。

 

しかし、なんだかんだ試行錯誤しているうちに直すことができました。

 

では、どうやって直したのか

 

テーマを変えてみた

これまでは、はてなブログに初めからあるテーマをしようしていましたが、

ネット上にアップされている「Spirea」というテーマをインストールして使用してみました。

それがこちら

Spirea - テーマ ストア

 

すると、自然に直ったではありませんか。

 

このSpireaというテーマはカスタマイズ性が高いテーマであるみたいです。

 

 

私も未だに不慣れでよくわかりませんが、余白ができてしまう原因はわかっているみたいですが、それを解消するための方法は、いくつかあり、自分に適したものを発券しないといけないみたいです。

 

今後、どんどんブログをカスタマイズしていきたいので、やはり少しCSSの勉強をした方がいいのですかね。

 

このブログが同じ悩みに直面している方々の助けになれば幸いです。

 

では!

 

こちらの記事も御一読いただくと幸いです。

 

www.weekly-doctor-course.com

www.weekly-doctor-course.com

www.weekly-doctor-course.com

www.weekly-doctor-course.com

www.weekly-doctor-course.com