パソコン生活同好会へようこそ

パソコン生活同好会!

パソコン好きの僕が、ネット上の情報やパソコンライフを気ままに紹介していこうかなって思っています。パソコンひとつでリッチな生活を目指しているので、成功したらノウハウも紹介してみたいです。

初心者の僕にもできた!はてなブログで画像の位置を変更する方法!

f:id:goburin_desu:20190704162808j:plain

どうも、はてなブログを使いこなすのにまだまだ苦戦しているブログ主ゴブリンです。

まだ、はてなブログは始めたばかりなので画像に時間を割くよりも記事を書けよって突っ込まれそうです(誰から?( ̄▽ ̄;)?)

画像の位置を中央に変更したい!

f:id:goburin_desu:20190704172017j:plain
真ん中

僕は、この方法を使っていないのですが、投稿した画像を全部中央揃えにしたい人に最適な方法です。

f:id:goburin_desu:20190704173031j:plain

まずは、デザインを選択します。

f:id:goburin_desu:20190704173511j:plain

管理画面のスパナのアイコンのカスタマイズをクリックします。

f:id:goburin_desu:20190704173754j:plain

 デザインCSSをクリックします。

f:id:goburin_desu:20190704173946j:plain

 以下の文を上記の画像のように記述(コピペ)してください

.hatena-fotolife, .http-image {
display: block;
margin: 0 auto;
}

 最後に変更を保存をクリックすると画像が中央揃えになります。

全ての記事の画像が中央揃えになるので注意してください。

HTML編集から直接CSSを記述する!

f:id:goburin_desu:20190704172017j:plain

f:id:goburin_desu:20190704172017j:plain

f:id:goburin_desu:20190704172017j:plain



HTML?CSS? 少し難しく感じるかもしれないけど、この方法を覚えると投稿した写真を右寄せ、左寄せ、中央と自在に位置を変更できるようになります。

f:id:goburin_desu:20190704181830j:plain

 まずは何か写真を投稿して、HTML編集をクリックします。

 

f:id:goburin_desu:20190704181950j:plain

 

f:id:goburin_desu:20190704183058j:plain

Pタグで囲まれた青枠の部分が、金の招き猫のHTML文になります。

画像はimgから始まると覚えておくと探しやすいです。

f:id:goburin_desu:20190704190115j:plain

imgを囲んでいるPタグにクラス(class)をつけてあげます。(画像参照)

<p class="cat"> " "の中は、半角英数字ならnekoでもなんでもOK!

スタイルタグ(<style>)の部分がCSSの部分になります。

<style>

.cat {

text-align:center;

        }

</style>

 

f:id:goburin_desu:20190704181950j:plain

 

f:id:goburin_desu:20190704181950j:plain

f:id:goburin_desu:20190704193631j:plain

 右に寄せたいときは、text-align:right;にしてあげればいいのですが、画像の位置を別々にしたいときは、classの名前を変えて、CSSの部分(緑色)のところを変更してください。

まとめ

cssは覚えるとデザイン見栄えが全然違ってきます。

デザインに夢中になって、記事に時間が無くなったなんてことにならないようにしてくださいね(;'∀')