はてなブログに移行しました
はてなダイアリーが2019年春に終了するということなので、これまではてなダイアリーに書いていた内容をはてなブログに移しました。
移行は文字を移すだけならば自動でできるのですが、レイアウトがすっかり崩れてしまってました。書影が大き過ぎるし、サイズもバラバラで、読む気になれません。せっかく書影の右に書籍概要がくるようにしていたのに、それも壊れていました。かといって、私の知識ではCSSの追加で簡単に直せるものでもありませんでした。テーマも違ってるし、CSSやHTMLの基礎知識がないので、「こんなレイアウトにしたい」というイメージはあっても、なかなか思うようにいきません。
やりたかったこと
使用テーマ
テーマは KOALAを使わせていただきました。
- レスポンシブデザイン
- 一つひとつの記事が独立している
- カスタマイズの解説があり、なんとかいじれそう
- 何よりデザインがきれい
最初は、シンプルできれいで、記事がつながっていないデザインのものを探していました。多くのテーマは記事と記事の間が線で区切られているだけで、ダラダラつながっています。こちらのテーマは記事と記事の間に背景色が入るため、記事ごとに独立したデザインとなっていてわかりやすいところがよくできてました。まずはこれがテーマ選択の上で重要なポイントでした。
途中他のテーマに変えてみたりもしたのですが、KOALAのデザインのきれいさに、他のテーマでは考えられなくなってしまいました。
ただ、KOALAで気になったのが文字の小ささ。文字が小さい方がレイアウトではきれいに見えるというのはわかるのですが、記事の読みやすさを考えると文字は大きい方がいいですよね。特にスマホ画面では小さすぎます。最終的には全体の文字をひとまわり拡大しました。本当は行間ももう少し広げたかったのですが、そこは目をつむりました。
アフィリエイト枠
アフィリエイト枠でなくても、左に適当な大きさのイメージ、右に概要、下に説明文というボックスデザインのものがあればそれで良かったのですが、コピペでできるカスタマイズ用CSSとして紹介されているものに、思うようなものが見つけられませんでした。
それに近いものは、やはりアフィリエイト枠。「カエレバ」や「ヨメレバ」など、簡単にアフィリエイト枠が作成できる便利なサイトもあり、さらにそれをカスタマイズするCSSなども多くの方々によって公開されているようです。これでなんとかできないかと検討しましたが、デフォルトとなっているAmazonのサイトの見た目が好きではないし、購入先を増やしたいわけでもない。だいたい、私の書いたレヴューはすでに絶版となっているものも多いのです。「カエレバ」「ヨメレバ」は画像が表示されないこともよくあるというコメントも見かけたため、これはやめました。
もう少し自由度が高いものはないかと探して、見つけたのがこちらの「カッテネ」。
→カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ
画像に影も付いていていい感じです。しばらくこちらで作業していました。
カスタマイズのボックスデザインを色々と見ていると、あらすじ用の引用枠をタイトル付きのケイ囲みにしたくなりました。
「カッテネ」にあらすじ用の枠を追加しようといろいろ試しましたが、購入ボタン部分のコードが長く私には複雑すぎて、枠が思うように作れませんでした。仕方なくこれも断念。
もっと簡単なものがないか探して、次にトライしたのはこちらのコピペでできるテンプレート。
→収益増加！カエレバより綺麗なアフィリエイトリンクをコピペで設定 | iscle [イズクル]
シンプルだったので、なんとかレイアウトできそうでした。
「カッテネ」を真似て書影に影をつけ、書籍概要のリストはマークを非表示に、あらすじ部分の引用枠は、サルワカさんのボックスデザイン「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」のアレンジで、囲みケイが一部切れてそこにタイトルが入ったボックスを作ることができました。
また、せっかくのレスポンシブデザインなので、画面が狭い場合には、書影が書籍概要の上に来るようにしてみました。これで、スマホを縦にした時と横にした時で表示が切り替わるように！ わーい♪
こうして、書籍部分の枠はこんな感じにできあがりました。購入ボタンはCSSには残していますが、表示しないようにしています。書籍見本として入れているのは、少し前に読んで面白かった1冊です。落合氏、すごい方です。
- 著者：落合陽一
- 出版：幻冬舎
- ISBN:9784344032170
リンク貼り直し
CSSの目処がついたので、書影やタイトル部分のリンクを貼り直す作業に入りました。リンク先は主に本の通販サイト「honto」です。前身の「bk1」は、本の通販の先駆けでした。なので古い本でも書影が数多く登録されています。HTMLのベースを作り、ひたすらコピペです。
他にも、はてなダイアリーのID記法で貼っていたリンクが全て機能しなくなっていたので、貼り替えました。せめて自分の過去記事へのリンクぐらいは、移行の際に自動で変更されるようにしてもらいたかったです。また、他のはてなユーザーさんの記事へのリンクも切れてしまっています。はてなダイアリーの終了とともになくなってしまうダイアリーもあるでしょうから、こちらは放置です。
また、面倒だったのがキーワードリンク。いちいち文中にHTMLが差し挟まれています。うざったいので見つけては削除。もっとも、こちらはリンクされない形でインポートすることもできたようです。もう気合いで削除しました。
見出しなど
見出しなどもあらすじのボックス同様、サルワカさんの「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」を参考にアレンジして、上のh4の見出しや蛍光ペン風アンダーラインなどを取り入れてみました。
FontAwesom
h5の小見出しはこんな感じに。見出しには、WEBで使えるアイコンのFontAwesomを使ってみました。本と栞のアイコンだそうです。本はわかりますが、栞はわかりづらいですね。
いろいろ整理
カテゴリーを整理しなおしました。レヴューについては、アイテム、ジャンル、作者で分類。また、今更な記事でコメントもないものは削除しました。個人的に思い出深いものは残してあります。
今後について
読書量が減ってるのが問題ですが、がんばって移行したので、少し書こうとは思っています。現在は『レッド・マーズ』の三部作を読書中。新しく出た『ブルー・マーズ』だけでは、人物関係がどうなっていたのか思い出せなかったため、結局前作4冊分を読み直しています。
