photofy

写真のためのテーマ

photofyについて

写真を大きく見せるためのテーマ

写真を大きく見せたい! という私の願いからこのテーマを作成しました。1カラムのテーマなので、大きな写真と少しの文章で構成するタイプのブログに最適かと思います。

もちろん文章も見やすく表示されます。

大きな横幅

このテーマの横幅は1150pxです。一般的なテーマより大きい横幅をとったので、写真を掲載すると大きく表示されます。

f:id:flancoin:20191001223201j:plain

シンプルイズベスト

白背景を基調に、僅かな装飾を施しました。また、多めに余白をとってます。

レスポンシブ対応

スマートフォンタブレットから見たときは横幅いっぱいに写真が表示されます。

使用フォントは「Noto Sans JP(源ノ角ゴシック)」

文章を美しく見せるため、Googleフォントの「Noto Sans JP(源ノ角ゴシック)」を使用しています。

注意

Webフォントを使いたくない場合や別のWebフォントを使う場合を考え、「Noto San JP」の読み込みはヘッダーで行っています。

「Noto San JP」をこのテーマで使う場合ははてなブログダッシュボードから、「設定」→「詳細設定」→下の方にある「headに要素を追加」に以下の要素をコピーして貼り付けます。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">

テーマカラーの変更

使用しているカラー

このテーマで使用しているカラーは6色あり、デフォルトでは以下のように定義されています。

:root {
    --defaultblack: #10161a;
    --lightgray: #fcfcfd;
    --maincolor: #4e95c2;
    --darkcolor: #3b7294;
    --linkcolor: #529dcc;
    --hovercolor: #91ccf1;
}

それぞれ以下の項目で使用されています。

定義名 使用箇所
defaultblack 文字色
lightgray コメントボタンの反転色(あまり使ってない)
maincolor 見出しなどの装飾
darkcolor 目次やモジュールの破線
linkcolor リンク
hovercolor リンクホバー時

カラーを変更するときは、まず上記の:rootをコピーしてカラーコードをカスタマイズします。

その後、「デザイン」→「カスタマイズ」→「デザインCSS」に追加で貼り付ければ完了です。

テスト記事

  • 段落
  • 画像(はてなフォトライフ
  • 脚注
  • 続きを読む
  • 罫線
  • h1見出し
    • h2見出し
      • h3見出し
        • h4見出し
          • h5見出し
            • h6見出し
    • asin
    • 引用
    • リスト(ul,ol,dl)
    • テーブル
    • コードブロック

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

画像(はてなフォトライフ

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

脚注

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。*1

続きを読む

※トップページでのみ表示されます。記事ページでは表示されません。

*1:ここに脚注を書きます

続きを読む