カテゴリ「コンテンツ」に属する投稿［13件］（2ページ目）

【展示】skin-tako-1

【概要】

展示のみ
シンプルタブ型スキン
確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる

【スキンについて】
クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合

「Media」タブで、このスキンがギャラリーモードに指定されている場合に表示される内容を設定しています。
┗ てがろぐ公式：複数のギャラリー用スキンを併用する方法（・本番使用中のスキンをそのままで、別のギャラリー用スキンを試す方法）

ヘッダー部分の画像は絶対/相対リンクで指定した画像をを表示します。（＝[[USERICON]]ではなく）

クイック投稿フォームをCSSで加工し、投稿ボタン以外のエリアを非表示にしています。

細かい設定が必要な投稿は新規投稿フォームで、きままな内容はクイック投稿フォームでつぶやくなどの使い分けができます。
Ver 4.0.1β以降、submitボタンの修正が加えられています。
.line-control .submitcover ~ * { display:none; }の記述を加えれば、添付画像のようなすっきりした投稿フォームになります。

以前は.line-control input ~ * { display:none; }という記述でした。
詳しくは▼編集画面カスタマイズのための参考情報（公式マニュアル）をご確認ください。

]

アイコンはFont Awesome を使用しています。

【参考にしたサイト】
簡単なタブ切り替え機能の実装

【配布】イラスト素材

【概要】
イラストを2点配布

【ライセンス】
CC BY-NC 4.0 で配布します。
権利表記として、画像の中の「Takotubo-Club」の文字列は削除しないでください。

【配布イラスト】

基本的に「フリー配布の画像です、自作発言不可・商用不可です！」ということです。
「スキンを作ってみたけど、デモに表示する鍵付き投稿を示す画像とか、NSFW投稿のワンクッション画像とか、需要がニッチでいい感じの画像がないよ～～！！」というときに使えます。

【配布】カレンダーパーツスキン

【概要】

てがろぐの独自タグ[[CALENDAR]]で出力されるHTMLを装飾するパーツCSS
土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はドットマークがつく
確認バージョン：てがろぐ4.0.3

【ライセンス】
CC0 で配布します。
これはこのパーツスキンについてのライセンスであり、てがろぐの使用条件はにししふぁくとりー様に従ってください。

【使用方法】
実際にCSSを適用したカレンダーは下の画像の通りです。

自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！

/*----------カレンダー要素全体----------*/
.calendar {
   box-sizing: border-box;
   width: 250px; /*横幅*/
   border-collapse: collapse;
   text-align: center;
   font-size: 12px;
   line-height: 2.5;
}

/*-----投稿のある日の設定-----*/
.calendar a {
   position: relative;
   display: inline-block;
   width: 100%;
   text-decoration: none; /*リンクの下線を消す*/
   font-weight: bold; /*太字にする*/
}

/*ドットマークを付ける*/
.calendar a::after {
   position: absolute;
   top: calc(50% + 0.5em);
   left: calc(50% - 0.2em);
   display: block;
   width: 0.4em;
   height: 0.4em;
   border-radius: 50%;
   background-color: hsl(300, 100%, 60%); /*ここで色を変更*/
   content: "";
}

/*-----●●年●月の部分-----*/
.calendar caption {
   text-align: center;
   letter-spacing: 2px;
   font-weight: bold;
   font-size: 1.4em;
}

/*-----曜日の見出し行-----*/
.calendar tr.daysofweek th {
   border-bottom: 2px solid; /*曜日名と日付セルの間の境界線*/
   text-align: center;
   font-size: 1.2em;
   line-height: 2.3;
}

/*-----カレンダー内の境界線-----*/
/*1週間ごとの行の境界線*/
.calendar tr {
   border-bottom: 1px solid;
}

/*最後の週は境界線を消す*/
.calendar tr:last-child {
   border-bottom: none;
}

/*-----日付セルごとの設定-----*/
.calendar td {
   vertical-align: middle;
}

/*-----土曜日の設定-----*/
/*曜日名の色*/
.calendar th:nth-child(7) {
   color: hsl(200, 70%, 40%);
}

/*日付の背景色*/
.calendar tr td.sat {
   background-color: hsl(200, 100%, 90%);
}

/*-----日曜日の設定-----*/
/*曜日名の色*/
.calendar th:nth-child(1) {
   color: hsl(0, 70%, 40%);
}

/*日付の背景色*/
.calendar tr td.sun {
   background-color: hsl(0, 100%, 90%);
}

/*-----今日の日付-----*/
/*日付の背景色*/
.calendar tr td.today {
   background-color: hsl(50, 100%, 90%);
}

/*-----空の日付に「-」を入れる-----*/
.calendar td.empty::after {
   content: "-";
}
畳む
コピー＆ペーストしてご利用ください。

色はすべてhslで指定しています。（カラーコードで書くとハッシュタグとして認識されるため、その回避です）
お好みでカラーコードなりRGBなどに変更してください。
テキストやリンクの色は、お使いのスキンの設定を継承したほうがいいかな？と思い、設定していません。
デザイン上見えづらい……など、必要があれば追加したほうがいいです。

【参考リンク】
てがろぐ公式 ▼カレンダー表示の装飾方法

たこつぼくらぶ

更新履歴