かつおログ

低収入のサラリーマンが楽しく生きるための方法を考案するブログ

【初心者向け】はてなブログでヨメレバを使う手順を画像付きで解説します

Hatena Feedly

f:id:Katsuox:20170222224840j:plain

先日、初めてヨメレバを使ってみました。

かん吉さんが開発された書籍紹介ツールですね。こういった先人たちの知恵の恩恵を享受できるのは本当にありがたい。

書籍紹介ブログパーツ ヨメレバ

 

で、ヨメレバ側でのコード生成は詳しい手順があるのですぐ分かるのですが、

それをはてなブログにどうやって適用すればいいかを調べようと思って「はてなブログ ヨメレバ」で検索してみても、デザインのカスタマイズに関する記事しか出てこない!

 

使い方が簡単すぎて、需要がないんですかね。

僕は結構悩んだんですが。

 

なので、備忘録も兼ねてはてなブログでヨメレバを使う方法についてまとめます。

 

ヨメレバの使い方

ちなみに、件のヨメレバを初めて使って書いた記事がこちら

バトルロワイヤル好きな人におすすめ!サバイバル漫画7選(グロ度評価あり) - かつおログ


 

デザインのカスタマイズも行いましたし、綺麗に表示されていると思います。

 

さて、ではこの記事を投稿した最初の段階の図をご覧ください。

 

f:id:Katsuox:20170223211348p:plain

 

 

バカなの?

 

いや、ほんとこれ。

HTMLで書かれてるんだから、いつもの感覚で編集(見たまま)に貼り付けても駄目なんですよね。

 

上の画像にもありますが、ちゃんと「HTML編集」のメニューに切り替えてから貼り付けないといけません。

 

f:id:Katsuox:20170223211422j:plain

はい、HTML編集から貼り付けることで無事に表示させることができました!

第二の関門-表示が崩れる-

問題はこの後です。

「よし、ヨメレバも綺麗に表示されたことだし、記事の本文を更新しよう!」と思ってもう一度「編集(見たまま)」に切り替えて本文を打ち込んでいきました。

 

HTML編集のままだとヘッダ部分にリンクとか見出しの機能がないので使いづらいんですよね。

 

引用も使いたいので、こんな風に編集していくわけです。

f:id:Katsuox:20170223211525j:plain

 

すると・・・

 

f:id:Katsuox:20170223211445j:plain

 

 

どういうことだってばよ・・・

 

レイアウトが滅茶苦茶になりました。

どうもヨメレバの設定後に編集(見たまま)で文章を打ち込むと、divの内部に文章を書き込んでしまうようで、こういったレイアウト崩れを起こしてしまいます。

 

対策

対策としては、本文を全て打ち込んでからヨメレバを設定していくことでレイアウト崩れを防ぐことができました。

 

つまり

・編集(見たまま)で本文を打ち込む

・本文の入力が終わったら、HTML編集に切り替える

・ヨメレバで生成したコードを、入れたい位置にはめ込んでいく

 

という順番で作業することで綺麗にヨメレバを使うことが可能です。

 

いやー、こんな低レベルなことで迷ってる人って僕だけですか?

色んなレベルの人に合わせた解説が必要だということを示す好例ですね。

 

同じ悩みを抱えている方のお役に立てれば幸いです。