Tumblrの固定ページに写真をテープで貼るようなCSSを適用する!

知人が私の親の出身地に旅行に行くそうで、

「なんかいい穴場スポット知らない?」

と聞かれました。そこは大変人気の観光地であるため、穴場スポットといってもいろんな場所が思い浮かんでしまい、

「一旦リストアップしてみる」

と答えました。が、ただメールでズラズラと場所を羅列するのもつまらない…と思い、Tumblrに観光スポットやレストランのリンクを貼って、それを見てもらおうと考えました。

 

Tumbltトップ

Tumblrというのは、一種のブログサービスなのですが、ただ記事を書くだけでなく、「リブログ」という機能で他の人の記事を自分のページに集めることができます。

気に入った人をフォローすると、自分の「ダッシュボード」と呼ばれるページに、その人の投稿した記事がどんどん流れてきます。例えば、車の写真ばっかりを集めている人をフォローすれば、ダッシュボードが車の写真だらけになるわけです。Googleストリートビューで見つけたシュールな場面を集めまくっているサイトや、おもしろいGIF動画を集めているサイトもあって、はっきり言って時間泥棒です。危険です。

よって、自分では全く記事を書かずとも楽しめるサービスなのです。

Tumblrの魅力は、スタイリッシュなデザインのテーマがたくさん用意されている点にもあります。多くのテーマでは、色やナビゲーションバーの内容を簡単に変えることができますので、HTMLやCSSを全く知らなくても、自分の理想のスタイルを作ることができます。

また、登録がとても簡単で、メールアドレスとパスワードだけで面倒臭さがないので、ちょっとサイトを作ってみようかな…と思ったらすぐに始められます。

 

というわけで、さっそくTumblrに登録して、観光スポットのリンクを貼り出したのですが、途中で思い立って「about me」的な固定ページを作ることにしました。

そこに画像を貼ったのですが、なんとなくただ貼ってあるだけで、さみしい感じがしたので、影を付けたりしたくなりました。

さみしい画像

最近勉強した結果、影ぐらいならCSS3で簡単に付けられる、ということが分かっていたのですが、如何せん初心者ですから、何も参考にするものがないとどうにもうまくできません。

そこで、webデザイナーの方々の間では大変人気のあるらしい、web designer wallというサイトの「CSS3 Image Styles」を参考にさせていただくことにしました。CSS3だけで表現できるボックスシャドウなどの例がたくさん載っています。当初、単純に影を付けるだけ…と思っていましたが、テープで貼り付けたようなデザインが素敵だったので、これをやってみようと思いました。

 

Tumblrでは、HTMLが直接編集できますが、「詳細設定」のページに「カスタムCSSを追加」という場所がありますので、そこにweb designer wallからコピーしてきたCSSを貼り付けます。

カスタムCSSを追加

ここからが大変でした…。まだidとかclassといったタグの付け方がよく理解できていないので、とりあえずデモページを見て、そこでGoogle Chromeの「要素を検証」でHTMLを表示させて、コピーすることにしました。

<span class="image-wrap"…

と写真のurlを囲むのは見てすぐに分かりましたが、上の階層の<div>を見落としていたため、なかなかCSSが適用されない…としばらく悩んでしまいました。そのほかにも色々といじって、最終的にこうなりました。

いい加減なHTML

結果…

テープで貼られた

写真がテープで貼り付けられました!おもしろい!

実際にはまだまだ理解していないところもたくさんあって完璧ではないのですが、(::afterの使い方など。デモページの「要素の検証」で見たHTMLには書かれているけれども私のは無し)とりあえず形になったので今日のところはこれで一旦終了します…。

 

【その他の記事】

貧乏人がカードの入会ポイントでWEB制作の入門書を3冊も手に入れる。

パソコン初心者向け!プログラミングできるようになっちゃうサイト8選

まずは自尊心を破壊すべし!ブラック企業の作り方まとめ

税金について勉強した…ブラック企業の手口が見えてきた