なんといつの間にか記事を20本書くことができました。
結構大変でした。（パチパチ）
せっせとブログに記事を挙げて、ブログをみてくれる人が増えると、やっぱり欲が出てくるんですよね。
「もっと多くの人に読んで欲しい。」
そうなると、読者さんのためにも、ブログをもっと見やすく・センセーショナルな感じにしたくなるものです。
そこで今回は、タイトル画像の作成とブログへの設置にチャレンジしました。
（累計3時間かかりました）
まずはじめに〜タイトル画像の用意〜
言わずもがな、まずはじめに、タイトル画像を用意するしなければなりません。
タイトル画像を用意するには、2つの方法が存在します。
- フリー素材を使う
- 手持ちの画像を使う
今回、私は手持ちの画像を使用しました。
しかし、一応フリー素材も探してみました。
その時活用させていただいたのがこちらのブログです。ブログ自体も大変読みやすく参考になりました。
さて、タイトル画像の作成方法ですが、私が使用したツールは
こちら！
「PIXLR EDITOR」
PIXLR EDITORとは
ブラウザ上で画像編集ができる無料のソフトです。簡単に言うと、無料版のPhotoshopみたいなものです。
しかも！
- 登録不要で、いきなり使える！
- 初心者でも、まあまあ使いやすい！
photoshopなどの画像編集ソフトは高額なため、このような無料のソフトは本当にありがたいです。
こちらにリンクを貼っておきます！
Online Photo Editor | Pixlr Editor
タイトル画像の作成方法
早速、私がタイトル画像を作成した方法を説明したいと思います。
Pixlr Editorには多種多様な機能が存在しますが、その中のごく一部のツールだけでタイトル画像は作成できました。
まず、Pixlr Editorのサイトに行くと
このような表示がでますが、赤枠で囲った方をクリックしてください。
上のTRY PIXLR Xは最新式の編集ソフトみたいでしたが、使い方に慣れるまで難しいです。
下の赤枠で囲った箇所をクリックすると
こちらも赤枠で囲った箇所をクリックすると、
画像の大きさを指定するWindowが現れます。
はてなブログのタイトル画像は横幅1000高さ200がちょうどいいサイズみたいです。
私も、1000×200で画像を作成したところちょうどよかったです。
そしてTransparent（透明）にもチェックを入れてください。
サイズを指定して「OKボタン」を押すと、
レイヤーが出てきます。
ここからはEditから編集したい画像を開き編集していきますが、
私はこちらのブログを参考にさせていただきました。
タイトル画像の横に余白ができてしまう
画像編集が終わったら、
よし、こんな感じで画像を作成できたからブログにアップロードしよう
となりますよね。
実はここからが大変
アップロードは管理画面からアップロードできますが、
いざアップロードしてみると、
タイトル画像の横に余白ができてしまう。
そしてスマホでブログを見てみると、
タイトル画像が見切れてしまっている。
こちらのブログで丁寧にタイトル画像の位置調整について説明してくだっており、こちらのブログに記載されいるコードで問題点が直っている人もいましたが、
管理画面のデザインの項目にあるレスポンシブにチェックをしっかり入れているのに、私は何をしても直らない。
しかし、なんだかんだ試行錯誤しているうちに直すことができました。
では、どうやって直したのか
テーマを変えてみた
これまでは、はてなブログに初めからあるテーマをしようしていましたが、
ネット上にアップされている「Spirea」というテーマをインストールして使用してみました。
それがこちら
すると、自然に直ったではありませんか。
このSpireaというテーマはカスタマイズ性が高いテーマであるみたいです。
私も未だに不慣れでよくわかりませんが、余白ができてしまう原因はわかっているみたいですが、それを解消するための方法は、いくつかあり、自分に適したものを発券しないといけないみたいです。
今後、どんどんブログをカスタマイズしていきたいので、やはり少しCSSの勉強をした方がいいのですかね。
このブログが同じ悩みに直面している方々の助けになれば幸いです。
では！
こちらの記事も御一読いただくと幸いです。