主婦、時々フリーランス

2児の子育て中のワーママが、育児、節約、仕事について記録。

ブログで使えるカスタマイズ小技集|画像の中央寄せなど

 

 HTMLやCSSの知識がなくてもできる、ブログで使えるカスタマイズを紹介します。

初心者向けです!

 

ブログカスタマイズで使えるテクニック

広告や画像などを画面の真ん中に配置したい

↑に表示させている画像にも使っています。

通常画像を挿入すると左端に設置されますが、画面中央に持ってくる方法です。

 

<div align="center"><img・・・></div>

でくくるだけです。

<div align="center"><p>・・・</p></div>

のように、特定の文章<p>~</p>などもOKです。

 

画像を文章の右・左に回り込ませたい

「回りこみ」というのは、以下の様なものです。

 

▼例)私の過去記事

======================

f:id:yumekuro789:20180208124127j:plain

ポイントは、やっぱり「空気を貯めこまないこと」です。

深く咥えさせることはもちろん、ゲップをこまめに出すことが一番の解決法だそうです。

左右それぞれ10分の授乳をしていたとしたら、左右5分ずつを×2回にし、毎回こまめにゲップを出させるのがいいみたいです。若干面倒だし「そんなにゲップでるかな?」と思っていましたが、その場で授乳指導してもらった時に試したら、出ました!!

おっぱいも、5分吸われ続けたら一旦量が収まってしまうそうです。なので、5分飲ませたら左右入れ替えて5分休ませるとまた分泌が盛んになります。赤ちゃんもこまめにゲップ出せておっぱいもまた貯まってきて、両方にとってメリットありますね。

========================

 

画像が右に回りこんでますね。

これは<img src=・・・・・ align="right">と、imgタグの中に「align="right"」を入れています。左の場合は「align="left"」です。

 

ただ、注意が必要なのは、画面の小さいスマホやモバイル端末で見た時ちょっと見にくい時もありますので、あまり大きい画像は向いていません。

全ての事に言えますが、必ずスマホで表示確認しましょう。

 

リンク先ページを別タブで開く

<a href="・・・  target="_blank">~</a>

のように、aタグの中に「target="_blank"」を追加するだけです。

 

以下の記事にも紹介していますが、別サイトのリンクを紹介する時は、この設定をしておかないと自分のサイトから離脱されますよね。

 


(私も急いでると設定し忘れる事多々あり・・)

 

このひと手間で他のサイトへ飛んでっちゃうか、自分のサイトにとどまって他の記事も読んでくれるか、の違いが出てきますね!

 

個性的なフォントを使ってアイキャッチ画像をつくる

こちらも以下の記事で、少しだけ触れたことがあります。


フリーのフォントをダウンロードして、ペイントなどの画像編集ソフトでそのフォントを使って文字入れする方法です。

 

例えばこれとか▼

f:id:yumekuro789:20180702092507j:plain

2人目、生後9ヶ月で夜間断乳決行|断乳方法や夜泣き、上の子の様子について。 - 主婦、時々フリーランス

「2人目」「レポ」「生後9ヶ月」の部分はちょっと夜っぽい雰囲気を出せるようなフォントを使いました。

 

あと私のお気に入りが「源柔ゴシック」というフォント▼

f:id:yumekuro789:20181017221201j:plain

保育園入園前に卒乳・断乳するか?しないか? - 主婦、時々フリーランス

微妙な違いではありますが、ちょっと柔らかい雰囲気があって好きなのでよく使ってます。

 

以下の様なサイトからダウンロードできます▼

フォントフリー - 無料の日本語フリーフォント投稿サイト

見ていて楽しいです♪

一度インストールしてしまえば、wordやexcelなど他のソフトでもそのフォントが使えるようになるので便利です。

 

以上でした!

また随時更新したいと思います^^