池澤あやかが教えるTumblr講座「画像を角丸にする」

2014年09月23日 17時30分更新

　女優の池澤あやかちゃんは、文句なしの美女でありながら、Ruby界でも女神と呼ばれるほどの「本物」っぷりを発揮しているガチでギークな女優。「ばりばりプログラムができる」特技を生かして活躍中です。

　そんな池澤あやかちゃんが、ウェブサービス「Tumblr」の使い方やカスタマイズ方法などについて解説する連載がスタートしました。「Tumblrって聞いたことはあるけど、どういうものかわからない」「一応、登録はしているけどいまは全然使ってない」という初心者に向けて、わかりやすく解説します。前々回から、CSSを実際に書き換えて、Tumblrブログをカスタマイズしていく方法を紹介していますが、今回は画像の四隅を角丸にしましょう。ちょっとオシャレなTumblrブログに生まれ変わります。

階層をたどって画像を指定する

　「前々回、前回と、Tumblrブログのタイトル部分を変更しましたが、今回は投稿されるコンテンツ自体をカスタマイズしていきます。画像（写真）が投稿されたら、その四隅を角丸にする方法を紹介しましょう。『要素の検証』で該当する場所を見つけたら、カスタマイズしてプレビューを確認し、それを元にTumblrブログのHTMLを書き換える──というやり方はこれまでと同様です」

　「長方形などの角が尖った画像の隅を、丸くするのが『角丸』です。画像自体を編集しなくても、CSSのプロパティを加えることで実行できるのです。角丸は、その丸のサイズによってオシャレな感じが決まってきます。大きすぎるとちょっとダサくなってしまうのですが、今回はわかりやすくやや大きめのサイズで角丸を作ります」

　「まずは『要素の検証』で角丸にする画像を指定します。Tumblrの画像には『リブログ』などのボタンを配置するレイヤーが重なっているため、元の画像は深い階層にあります。『▶』を開きながら、たどって見つけてください。見つけたら、右の『Styles』にある『article img』部分に『border-radius:10px』を追加すればOKです。これは『article』という要素の中にある画像すべてを対象に角丸にするということなのですが、Tumblrブログのテンプレートによってどの要素の画像になるのか異なっています。その要素を『要素の検証』によって見つけ出し、今回は『article』という要素が対象になったというわけです」



「要素の検証」を開いたら、虫眼鏡アイコンから画像コンテンツを選択して、その部分の階層をたどりながら元画像を見つけていきます



画像へのリンクが見つかると、画像がプレビューされます。その場所を選択し、右の「Styles」にある「article img」部分を変更していきましょう



「article img {」のあとに「border-radius:10px」と追加します。「10px」部分の数値を変更すれば、角丸のサイズが変わります

「HTMLを編集」で「article img」を検索

　「変更したいTumblrブログのカスタマイズ画面から『HTMLを編集』を開いて書き換えていきます。『article img』を検索して、『｛』のあとに『border-radius:10px；』を追加しましょう。あとは『プレビューの更新』を押して確認し、問題なく画像の四隅が角丸になっていれば、『保存』を押して確定します」

　「これでTumblrに投稿された画像の四隅は角丸になりますが、『フォト』と『フォトセット』で異なる指定をしている──など、画像によって異なるプロパティを割り当てているCSSの場合は、角丸にならない画像も出てきます」



Tumblrブログのカスタマイズページから、「HTMLを編集」を開きます。「article img」を検索しましょう



「article img{」のうしろに「border-radius:10px；」を加えます。「要素の検証」からコピー＆ペーストするのが確実です。その後、「プレビューの更新」を押して確認しましょう



きちんとカスタマイズが成功すれば、画像の四隅が角丸になります。画像自体を編集しなくても、ちょっとオシャレなブログに生まれ変わります