<いろいろ>

Tumblrの無償テンプレート、”Minimalism”を上手に設定しよう。

 

今回は、Tumblrの無償テンプレートの1つ、”Minimalism(ミニマリズム)”の詳しい設定方法や、使い方についての記事です。

 

 

Tumblrは、本当にセンスがいいサービス。

先日の記事でも書きましたが、Tumblrを写真集という形で始めました。

 

Tumblrには様々なテンプレートが揃っていて、それぞれがスタイリッシュで、かっこいい。

こんなものを無償で提供してくださっている方々は本当に素晴らしいと思ってます。

 

自分が使っている”Minimalism”というテンプレートも無償のもの。

ポートフォリオの様なものを作るのにぴったり。格好いい。

 

https://minimalism-theme.tumblr.com/

 

さらにレスポンシブデザインとなっており、モバイル・PCどちらも今風でスタイリッシュ。

おまけに、写真間の余白の大きさやヘッダーの位置など、デザイン上の設定も十分に融通がきく。

画像をアップロードするだけでかっこいいサイトが作れるので、初心者にもオススメです。

 

ただ唯一の問題が、『国産ではないので、設定に若干手間取ってしまう』ことであった。

そこで、このテンプレート”Minimalism”について、チープな英語力とウェブの知識ではあるが、設定項目について可能な限りの解説をしていきたいと思う。

誰かの役に立ったら幸いです。

 

テーマの導入

導入は、Tumblrのアカウントを作成した状態でhttps://www.tumblr.com/theme/39633 このサイトにアクセスし、『設定する』をクリックするだけ。とっても簡単。

 

写真の投稿

ダッシュボード(管理画面)から『画像』をクリック

→『画像をアップロード』を選択

→載せたい写真を選ぶ。

 

たったのこれだけ。

 

写真は複数投稿せずに1枚で投稿するのがおすすめ。

それぞれの投稿には、キャプション(説明文)や、#から始まるタグをつけることもできる。もちろん無くても構わない。(自分はキャプションは書かず、2、3個のタグのみ書いています)

 

デザインの設定をして、もっと自分好みにしよう

写真をアップロードするだけでかっこいいサイトのできあがりなのですが、”Minimalism”の真骨頂はここからです。

余白の大きさやヘッダーの位置、フォント形式や文字の大きさなどを(ある程度)自由に設定できる。

 

この設定の自由度は、フォトサイトを作れる無償テンプレートの中ではかなりのもの。

スタイリッシュさも考慮すると、なかなかここまでのテンプレートはないと思ってます。

ただ一部の設定項目が英語となっており、同時に設定されるプレビュー画面も変更点がわかりにくい仕様になっているので、備忘録も兼ねてこのページで解説しようと思います。

 

”Minimalism”の細かい設定は、<外観の設定>→<テーマの設定>から行うことができます。

Logo
ロゴを表示するかを設定できる。
Tips:このロゴを設定しても置き換わるのはプロフィール画像で、タイトル名が置き換わるわけではないので注意。

Background
ヘッダーを除く、画面全体の背景画像を変更できる。

Search Background
検索ボタンの背景色を変更できる。

Search Text
検索ボタンにオンカーソル(ポインタを合わせる)した時に現れる、『Search』の文字色を変更できる。

Body Text
『Archive』『Random』などの文字色を変更できる。

Body Accent
写真にオンカーソルした時に現れる、説明文の文字色などを変更できる。

Body Box Background
写真にオンカーソルした時に現れる、説明文の背景色を変更できる。

Footer Text
フッターの文字色を変更できる。

Footer Accent
フッターのリンク色を変更できる。

Body
ページ全体のフォントを変更できる(大半のフォントは英数字にしか適用されないので注意)。

Page Font Size
ページ全体の文字大きさを変更できる。

Page Preloader
ページのローディング中に表示する形式を選べる。
表示しないか、barか、spinnerの三通り。

Page Width
ページ全体の横幅を選べる。
PCによって環境は異なるため、fullがおすすめ。

Background Size
背景画像を設定した際、それをどのように表示するかの設定。(背景画像を設定しない場合、この設定は不要)
Defaultは拡大縮小をしない。画面より小さい場合はリピートが起こるし、大きい場合は画面からはみ出る。
containは、縦横比は保持し、背景領域に収まる最大サイズになるように背景画像を拡大縮小する設定。
coverは、縦横比は保持し、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する設定。

Background Overlay
背景に、マスク(柄)を重ねることができる。(背景画像を設定していなくても設定可能)

Background Overlay Opacity
上のマスクの不透明度を設定できる。高いほど濃くなる。

Header Alignment
ヘッダーの文字(タイトルなど)の配置を左揃え、中央揃え、右揃えから選べる。

Header Position
ヘッダーそのものの表示位置を選べる。

Header Avatar Max Height
ヘッダーに画像を表示している場合(設定上部で設定可能)、その画像の最大サイズを設定できる。

Header Background Opacity
ヘッダーの背景の不透明度を変更できる。高いほど色が濃くなる。

Header Border Bottom Height
ヘッダーとボディ(メインコンテンツ)の間に横線を設置でき、その太さを設定する。
横線が不要な場合は0pxを選択すれば良い。
ちなみに、横線の色は『強調色』の設定に依存する。

Header Description Font Size
サイトの『説明』の文字サイズを変更できる。

Header Image Opacity
ヘッダーの背景画像の不透明度を設定できる。
下から背景画像・背景・コンテンツの順になるので、例えば背景の不透明度を100%に設定すると背景画像は見えなくなってしまう。

Navigation Font Size
ヘッダー内の文字の大きさを設定できる。

Search Position
検索ボタンを表示する位置を、LeftかRightで設定することができる。

Body Box Background Opacity
画像説明のボックス自体の、不透明度を変更できる。

Body Box Photo Meta Overlay Opacity
(効果不明)

Body Grid Columns
一列に表示する写真の数を設定できる。

Body Grid Spacing
写真と写真のグリッド(スペース)の幅を変更できる。

Header Description Uppercase
ヘッダーの文字を全て大文字にすることができる。(英字に限る)

Header Description Hide On Mobile
スマホ版で、ヘッダーの説明文を隠すことができる。(効果不明)

Header Full
ヒーローヘッダー(サイトのファーストビューに全画面の画像を使用)のようなヘッダーを設定できる。

Header Image In background
設定したヘッダー画像を、ヘッダー内のサイズに収めるかの設定(?)

Header Image Sliding
ヘッダー画像を固定表示させるカーテンをあげるようなスクロールエフェクトの設定ができる。https://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

Navigation sticky
ヘッダーを、スクロールしても表示するように設定できる。

Navigation Uppercase
ヘッダー内のナビゲーション(ランダム・アーカイブ)を大文字表記にできる。(英字に限る)

Body Full
写真を画面いっぱいに表示するか、Body Grid Spacingで設定した余白を空けるかを設定できる。

Body Full On Mobile
スマホ版で、写真を画面いっぱいに表示するか、Body Grid Spacingで設定した余白を空けるかを設定できる。

Body Box Gray Scale
一覧表示をグレースケール(白黒)に設定できる。

Body Box Meta Faded
画像の説明文や更新日の文字を色褪せさせる。

Body Body Box Photo HighRes
画像の説明文や更新日の文字をはっきりさせる。

Body Box Photo Meta Overlay
一覧の状態で、画像説明文のボックスを画像下に表示させることができる。
(Tip:オフにすると、オンカーソルした時に画像説明文が表示される。)

Body Box Photo Minimal
画像説明文のボックスを、ページに一切表示させない設定。
(Tip:この場合、オンカーソルしても説明文は表示されない。)

Body Box Photo Minimal on Mobile
スマホ版で、画像説明文のボックスを、ページに一切表示させない設定。

Body Box Photoset Contained
投稿に複数の画像が含まれている場合、画像サイズを調整する(?)

Body Box Photoset Native
投稿に複数の画像が含まれている場合、画像サイズを調整せず、原寸大で表示する(?)

Body Box Photoset Stacked
投稿に複数の画像が含まれている場合、オンカーソルすると表示が2枚目の画像に切り替わる。

Hide Origin
(効果不明)

Hide Tags
一覧で、その投稿のタグを表示しない設定。

Show Archive Link
ヘッダーに、投稿一覧を表示する『アーカイブ』のリンクを表示できる。

Show Random Link
ヘッダーに、投稿詳細画面をランダムで表示できる『ランダム』のリンクを表示できる。

Show Search
ヘッダーに、検索ボタンを表示できる。

Infinite Scrolling
無限スクロール(ページを分割せず、同じページをスクロールすればコンテンツが追加され続ける)を設定できる。
ちなみにページごとの投稿数は、詳細設定から変更可能。

Social Media Links Top
ソーシャルメディアや他のリンクを設定した、アイコンを設置することができる。
それ以下の項目で、URLを設定することができる。

 

修正・加筆などしていく予定です。

間違いや不明点がございましたら、コメントなどでご指摘いただけると大変助かります。

 

では、良き”Minimalism”ライフを。

関連記事

  1. <いろいろ>

    旅革命研修の30期に参加!どんな人に向いている?写真を交え、ご紹介。

    先日、株式会社ビラスタートの『旅革命研修』に参加しました。…

  2. <いろいろ>

    『傘のパクり合い』が、いちばん身近な『恩送り』の対義語なんじゃないか。

    自然は気まぐれだ。「出かけるときは、晴れていても夕方は雨が降る…

  3. <いろいろ>

    価値ある写真とはなんなのでしょう

    先日ぼくは、なけなしの貯金をはたいて、ソニーのα7…

  4. <いろいろ>

    「奥が深いね」って言葉は、浅い。

    「奥が深いね。」この言葉を一度は言ったこと、もしくは耳にしたことが…

  5. <いろいろ>

    大館 All Actors Projectが終わりました。

    前の記事でも書いた通り、1週間ほど秋田県の大館市に滞在してい…

  6. <いろいろ>

    秋田県大館市に来ています。

    タイトルの通り、1週間弱、秋田県の大館市というところに滞在し…

人気の投稿とページ

最近の記事

  1. <いろいろ>

    他人のimageで学んでほしい
  2. <いろいろ>

    パソコンやケータイのあるあるネタって、本当に面白い。
  3. <時事ネタ>

    本当に、『一般職』でいいのだろうか。
  4. <時事ネタ>

    星野仙一さんが逝って思うこと。
  5. <TED Talks>

    【TEDトーク】イーロン・マスク:我々が築き、掘っている未来
PAGE TOP