Demo たこつぼくらぶ

NSFW画像 #サンプル #画像
（てがろぐ3.9.0以降に対応）

皆様、あけましておめでとうございます。今年もどうぞよろしくお願いいたします。


トップページのスキン配布サイト様のリンクを２件追加いたしました。
かわいい配色やタブレット向けのすっきりデザインのおしゃれなスキンですね。
皆様もどうぞ巡ってみてください。

てがろぐ公式様もどんどん（以前からすごかったですが・・・）機能追加されていて、ついにベータ版で画像にフラグが立てられるように…！
個人的に待望していた機能で非常にうれしいです。

ギャラリースキンや画像を中心にしたスキンのアイディアをどんどん増やして、おもしろいスキンが作れたらいいなあと思います。
改めて、本年も何卒たこつぼくらぶをよろしくお願いいたします。

てがろぐは新規投稿・編集画面もカスタマイズできるということで、やってみました。

（ツイート埋め込み処理中...）Twitterで見る

てがろぐ公式：新規投稿/編集画面に自由なCSSやJavaScriptを加える方法

通常リセットCSSを外部から読み込んでいるのであんまり意識したことがなかったのですが、
input（ボタン）とselect部分がsafariではブラウザの表示が適用されてしまうようで…。
解決しましたがこれからは少し意識して作成していきたいです。

＜参考リンク＞
【CSS】inputタグのスタイルがiPhoneのSafariで適用されない
【CSS】Safariでinput・select要素のスタイルをリセットする方法 | ユウマのブログ

#skin-tako-1 のアイコンをGoogleアイコンフォントからFont Awesomeに変更してます。

safariで管理画面・新規投稿のボタン（画面右下にあるボタン）が崩れるのですが原因がわからず
別サイトで持ってるてがろぐで同じスキンを使っても表示が崩れないのでサーバーによる…？そんなことある…？
safari全部で崩れるならわかるけど別サイトでうまくいってるのでますます理由がわからないです

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