Demo たこつぼくらぶ

skin-tako-3
縦書き / 作品展示向け #skin-tako-3

試しに見てみる
一覧表示
記事（長文） サンプル画像
ＰＣ表示

モバイル表示



記事（短文） サンプル画像
ＰＣ表示

モバイル表示




＜スキンについて＞
●日記・ブログ向きではなく、小説作品展示向きスキンです。
　フォントはGoogleFontsから「ひな明朝」を使用しています。
　テーマは「投稿ページをスクショに撮ってTwitterに投稿できる」ということで、1画面で完結する構成にしています。
　文章作品のスクリーンショットをサンプルとして、続きの文章を自サイトにリンクする、という使い方ができるかと思います。
　私は短歌を詠みたくて作成しました。
　カテゴリやタグのリストを表示させてても面白いと思います。
ヘッダーのURLはてがろぐホームのURLタグを使っていますが、直打ちで自サイトのURLを入れるのもいいかなと思います。

●全体表示と投稿単独ページのCSS切り替えについて
　記事一覧だとシンプルなリスト表示ですが、投稿単独ページでは縦書きで表示されます。
　短文の場合は画面の中心あたりに内容が表示されます。
　長文の場合は横にスクロールできます。
　┗てがろぐ公式：▼一覧表示時と単独表示時とで適用デザインを分ける方法
　上記の説明通りに、Ⓐ「記事一覧」とⒷ「記事単独」でHTMLとCSSを作っています。

●縦書き表示
　縦書きに表示する用のボックスを作り、writing-mode: vertical-rl;で縦書きにしています。
　┗参考リンク：MDN：writing-mode
　このボックスの縦横のサイズを決めて見た目を調整します。overflow-y: hidden;で縦（ｙ軸方向）のスクロールバーが非表示になります。
　横（ｘ軸方向）のスクロールバーは長文（枠からはみ出る）とき表示、短文（はみ出ないとき）は非表示です。
　overflow-xはoverflow-yがhiddenの場合初期値がautoになるので指定してないです。これでうまくいってると思うのでこのままですが、正しくはどうすればいいのかわかりません。。。
　鍵付きの投稿は入力欄と送信ボタンが横書きに固定みたいなので、説明欄も.passkeyguide{writing-mode: horizontal-tb;}で適当に縦書きを解除しています。
鍵付きの投稿


●スキン独自の装飾について
　３点実装しています。おおよその機能についてはこちらを確認してください。
　┗てがろぐ公式：▼class名を自由に指定できる装飾記法

　①dai　文字を大きく・太くします。また、行間の幅を広げて題名っぽい感じにできます。
　　　　.deco-dai{font-size: 3em; font-weight: bold; line-height: 5em;}
　②yoko　縦中横の設定です。半角文字（!?とか123）を縦向きにする装飾です。スキン３での表示でしか適用されません。
　　　　.deco-yoko{text-combine-upright: all;}
　　半角文字も含めて縦書きにするならあんまり使わないかもしれませんが個人的に「通常、半角の文は横向き」「特定の文字だけ縦に並べる（縦中横にする）」という使い方が好きなのでこのようになりました。
　　┗参考：日本らしさを表現！CSSで文字の縦書きに挑戦！
　③owari　指定した文字列の前に適当に空白を入れます。空白と言いつつ、白背景に白文字を入力して見えなくしているだけなのでもっといい方法があるのかもしれないけどわかりません。
　　　　.deco-owari:before{content: "ここに適当に文字を入れる"; color: white;}

＜使用フォント＞
GoogleFonts - Hina Mincho