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

秋の田のかりほの庵の苫を荒みわがころも手は露に濡れつつ

ダミー文章

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

ダミー終
#サンプル

Spotify埋め込みのサンプルです。


#サンプル