おやこぶろ

子育て、ハワイ、キャンプ、投資、あれこれ気になることを試していく6才と4才と1才サラリーマン

【ブログ】スマホで超カンタン♪ おしゃれなスマホ向けブログタイトルの作り方





 f:id:oyaco_blog:20161008030347j:image

これ(スマホ向けデザインの変更が可能なの)は、はてなブログ様に上納金を納めている特権階級(はてなブログpro登録)だけに許されている機能だと聞いていたいたんですが、はてなブログの公式ページにはそのようなことは書いてない?

はてなブログPro - はてなブログ

どっかに書いてあるのかな?proじゃない人もやってみてください。できるかもしれないし、できないかもしれないけど。

 

スマホ向けブログタイトルを変えたい

常々思っていたんですが、なんせいつもスマホで記事を書いているので、パソコンでカスタマイズする機会がなかなかなかったんです(ズボラなだけ)

 このたび、スマホでブログタイトル画像をおしゃれな感じに自作できたので、うれしくて記事まで書いちゃいます。

 

注意★

誤解を招くタイトルですが、スマホで自作したのはブログタイトルの画像であって、ブログタイトルのデザイン変更はパソコンでやりました。そのやり方も一応最後に書いておきます、ややこしくてごめんなさい。デザイン変更までスマホでやろうと思えばできるかもしれませんが、やってません。

 

 

スマホでブログタイトル画像を自作する

僕のブログ記事には欠かせないアイキャッチ画像作りと同じ要領で作成しました。

アイキャッチ画像(ブログ記事に張り付く画像)の作り方はこちらをご覧ください↓

oyaco-blog.hatenablog.com

 

写真を選ぶ

ブログタイトル画像に適した条件

  • 自分のブログのイメージに合う写真
  • 横長にしていい感じに収まる画角の写真
  • 空や壁など単色の部分が多い写真(タイトル文字を書く場所になる)

こんな感じでしょうか。

この条件に従って写真を選びました。選んだ写真を表示してる状態でスマホのスクリーンショットをしてしまえばラクですよ。

f:id:oyaco_blog:20161008030443p:image

やっぱりハワイ画像から選びたかったし、息子2人の顔が見えすぎず、でも長男次男だってわかる感じ。

 

写真を横長に切り取る

細かいサイズは気にしなくても横いっぱいではめ込めるので大丈夫、ブログタイトルになった状態をイメージして、いい感じのサイズにしてみましょう。

f:id:oyaco_blog:20161008030713p:image 


phontoで編集

僕が愛用している写真加工アプリphontoで作ります。

 f:id:oyaco_blog:20161008030803j:image

簡単な画像の色調整(モノクロやセピアなど)なら、フィルター機能でそれらしくなります。今回はハワイ感を高めるために色味を強調するフィルターを選択しました。

 f:id:oyaco_blog:20161008030923p:image

画面をタップして文字を挿入します。他にもフォントを選択したり、文字色を変更したり、影をつけたり。このアプリの操作そのものは超カンタンです♪ 

あとはセンスですな!笑 お気に入りはぼかし縁取りです。

 f:id:oyaco_blog:20161008030933p:image

なんか英語を挿入するとおしゃれ感が高まりそうな気がしてアドレスを入れてみたりして笑 

 f:id:oyaco_blog:20161008031101j:image

完成!

 

スマホ向けデザインをパソコンで変更

ここからは人の力を借りるしかありません。下記ページを参考にさせていただきました、ありがとうございます!

今回僕がやったスマホ向けブログタイトルの変更は、コピペ記述文章の下書きができればだいたい2ステップで終わりますので簡単です。

www.ituore.com

 

参考にした部分

すべてをコピペしたワケじゃなくて、ブログタイトルの変更に必要な部分だけピックアップしてコピペさせていただきました。

ここ↓

#top-editarea .section {
width:100%;
}
#header .header-blog-icon {
display:none;
}
#header {
margin:0;
width:100%;
padding:15px 0px;
background:#1d3557;
}
#header #title a {
color:#fff;
}

 この部分コピペをする場合、自分でcssをくくる必要がありますので忘れないようにしましょう。僕はしばらくハマりました。

コピペの上下にこんなものを書く↓

<style type="text/css">

ここにコピペ

</style>

ここからここまでがcssですよ〜っていう意味だと思います。

おまじないだと思って書けばいいと思います。

パソコンのメモ帳機能かなんかに下書きしてからコピペするのがオススメです。

 

実際にやってみます

ステップ1:帯タイトルに変える

ブログ管理のダッシュボード画面を開いて、

→「デザイン」をクリック

→スマートフォンのマークをクリック

→「ヘッダ」をクリック

→記述欄をクリック

 

するとこんな画面になるので、先ほどのcss記述をコピペします。

f:id:oyaco_blog:20161008023953p:plain

すると、ブログタイトルが味気ないいつもの丸画像から帯タイトルに変わりました。

 

ステップ2:画像をはめ込む

帯タイトル部分にはめ込む画像を選択して、はめ込み方の選択をして終わりです。簡単でしょ?

なんだか急に自分のブログのおしゃれ度があがった気がしてめちゃめちゃテンションあがります!

f:id:oyaco_blog:20161008024402p:plain

 

みなさんもやってみてくださ〜い。

画像作りのリクエストとかあればお気軽にコメントなどでご相談ください!!