O型のまこさん

O型のまこさん

趣味でいろいろ作った備忘録

7-XX.ヤフーブログからはてなブログに引っ越し

7-XX.ヤフーブログからはてなブログに引っ越し

  ■2019年7月

 ヤフーブログのサービス終了に伴い、はてなブログに引っ越しさせてもらいました。これまでヤフーブログさんには大変お世話になりました。ありがとうございます(^^)/。

 ヤフーブログのサービス終了の案内が来ていくつかのブログへの移行案内が来た。アメーバ、ライブドアSeesaaはてなである。当初はどこでもいいやと思い一番名前を知っていたアメーバを選択して移行した。しかし意外と不満が出てきた。掲載していた写真が縮小されて移動されるのだ。横幅で1/3くらいの画素数に縮小される。ヤフーブログでは記事内の写真は中くらいのサイズで掲載されており、写真右下の+記号をクリックすると原寸大で表示される。この機能は自分には必須だと理解した。

 次にライブドアに移行してみた。こちらは写真サイズはオリジナルのサイズで移行されたが表示が小さくなった。新規ページを作成して写真を掲載すると、記事中の表示は中くらいのサイズで、写真クリックで拡大される。まあいい感じ。でも別ウインドウで拡大されるので、記事に戻るのがなんかめんどくさい。

 Seesaaは名前の読み方もわからないのでパス(たぶんシーサー?)。

 はてなブログは移行ツールの提供が遅く、7月末になって提供された。気が付けばヤフーブログは新規ページ作成もできなくなっていた。はてなブログも写真のサイズはオリジナルのままだが表示は小さくなる。新しいページを作って写真を掲載すると、記事内では中くらいのサイズ、マウスクリックで写真拡大、もう一度クリックで記事に戻るという操作性。これが一番なじんだのではてなブログに決定!

 まあそれぞれのブログで色々カスタマイズとかできるのであろうが、シンプルに使えるのが一番ということが決定理由かな。はてなブログさん、これからよろしくお願いします。

 

 細かい話になるが、写真の表示方法のカスタマイズした手順を記す。ヤフーブログから移行ツールを使用して引っ越したブログは、掲載写真の画素数こそオリジナルのサイズを継承するが、画像をクリックしても拡大されない。何か簡単なカスタマイズ方法があるのかもしれないが、ごしょごしょしてとりあえずイメージ通りの動きをするようになったのでその方法でブログを変更していく(結構手間なのでお勧めはできない)。

ブログ編集でHTML編集にすると、掲載画像の記述は下記のようになっている。


<div class=" " style="text-align: center;"><img class="○○○" src="△△△"" alt="□□□" width="400" height="300" /></div>

 

○○○:ファイルの名前?、クラス名かな?

△△△:画像の格納場所

□□□:画像のコメント?

 この中で画像の格納場所(△△△)だけが必要のようである。

上記の掲載画像の記述を下記に置き換える。

 

<p><img class="hatena-fotolife" src="△△△" width="400" height="300"/></p>

 

記事中の写真の表示寸法を変えるには、widthとheightで指定する(めんどいね)。

 

なお写真を中央に表示したいので デザインCSSに下記記述を追記している。


/*写真を中央に表示:▼ここから*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
/*width: 400px;*/
/*height: 300px;*/
}
/*写真を中央に表示:▲ここまで*/

 

※デザインCSSの追記手順

設定の中の"デザイン"⇒スパナマーク(カスタマイズ)⇒デザインCSS

で表示され、そこに貼り付ければよい。掲載する写真のサイズが全て同じであれば、コメントアウトしているwidthとheightを生かせば良いが、写真は縦に掲載するのもあるし個別に設定している。

 

 

またまたはてなブログの愚痴。自分のブログへのリンクはヤフーブログに行く。それはそうかもしれないが、自身のブログへのリンク先は変更してほしかった・・・。

 

※8月1日に追加

 新しくブログページを作成したのだが、そのまま写真を掲載すると写真が大きくなる。HTML編集で写真のところを見ると、

<p><img class="hatena-fotolife" title="○○○" src="△△△" alt="□□□" /></p>

こんな風になっている。行の最後にwidth="???" height="???"  を追記すれば写真のサイズは調整できる。こんなふうに。

<p><img class="hatena-fotolife" title="○○○" src="△△△" alt="□□□" width="400" height="300" /></p>

でも写真掲載時にデフォルトでサイズを指定する方法があるはずだよねぇ。