2014年09月23日17時30分

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

  • このエントリーをはてなブックマークに追加
  • Pocket

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

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

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

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

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

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

20140923_arai_tumblr_0903
「要素の検証」を開いたら、虫眼鏡アイコンから画像コンテンツを選択して、その部分の階層をたどりながら元画像を見つけていきます
20140923_arai_tumblr_0903
画像へのリンクが見つかると、画像がプレビューされます。その場所を選択し、右の「Styles」にある「article img」部分を変更していきましょう
20140923_arai_tumblr_0903
「article img {」のあとに「border-radius:10px」と追加します。「10px」部分の数値を変更すれば、角丸のサイズが変わります

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

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

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

20140923_arai_tumblr_0903
Tumblrブログのカスタマイズページから、「HTMLを編集」を開きます。「article img」を検索しましょう
20140923_arai_tumblr_0903
「article img{」のうしろに「border-radius:10px;」を加えます。「要素の検証」からコピー&ペーストするのが確実です。その後、「プレビューの更新」を押して確認しましょう
20140923_arai_tumblr_0903
きちんとカスタマイズが成功すれば、画像の四隅が角丸になります。画像自体を編集しなくても、ちょっとオシャレなブログに生まれ変わります
20140923_arai_tumblr_0903 20140923_arai_tumblr_0903

■関連リンク
「池澤あやかのギーク道」公式Facebook
池澤あやかさん公式ブログ
池澤あやかさん公式Twitter

MacPeopleはNewsstandでも配信中
1ヵ月の定期購読なら最新号が600円!

Newsstand 電子雑誌をダウンロード

関連記事

あわせて読みたい

follow us in feedly

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking

BEST BUY

みんなが買っている最新アイテムはこれだ!