何らかの配布場

スキン「hokan」配布



ダウンロード (24/07/14更新)

→デモサイト(詳しい使い方)

説明

• にししふぁくとりー様で配布されているマイクロブログツール「てがろぐ」用のスキンです(Ver 4.4.0で動作確認)
• 絵や小説のログ整理・保管に使用することを想定しています(ちょっとした個人サイトっぽくできます)
• てがろぐ公式の標準スキンを改造して作っています
• 配布はゆるゆる適当ですが一応利用規約的なものをさらっと読んでおいてください

使用フォント
アイコン：Remix Icon
タイトルなどのフォント：Google Fonts M PLUS 2

できることの一部

• cssファイルを少し編集するだけで全体の色カスタマイズができます
• 特定のファイル名画像をアップするだけでヘッダー画像の差し替えができます
• メタタグによる簡単な検索避け付
• 機能：カテゴリ、ハッシュタグ、フリースペース、鍵、NSFW画像ぼかし機能等

詳しくはデモサイトで解説しています

#スキンhokan
　
更新履歴
続きを読む
2024/07/14　色々整えた
2023/12/02

• 縦横サイズ取得できない画像が「thumb」で正方形にならない問題を修正
• 自由装飾「thumb」の挙動をちょっと変更
• 一覧デザイン3種の並び方の挙動をちょっと変更

2023/11/4　配布開始
畳む

自由装飾でかなりなんでもできることがわかってきたので楽しくなっちゃってる　マイ自由装飾を投稿できる掲示板とかあったら楽しそう…

つぶやきでコード書いたとき見やすくしたいなあ　なんか背景黒いやつ　確か標準スキンにコードの自由装飾があった気がする

＞10/29 19:07の方へ
続きを読む
動きましたか！よかった…！もしかしたら怪しい記述かもしれませんので、油断せずお使いください…　こちらこそありがとうございました！
畳む

返信不要の方も解決したようで何よりです！よかった！

hokanデモサイトの「使い方」にLightbox以外の画像ビューアを使用した場合について追記してきました　正式配布までもう少しどうにかできるかやってみます

＞10/29 12:47の方へ
続きを読む
嬉しいお言葉ありがとうございます…！楽しく使っていただけて何よりです！

「他の画像ビューアを使用したときの挙動」はまさに心配していたことだったので、事例のご報告をいただけてありがたいです。
恐らくGLightboxを読み込むスクリプトは「skin-cover.html」の</body>直前に書いていらっしゃると思います(違ったらすみません)、この付近に

<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>～</script>

という部分があります。このスクリプトで非表示にした画像を消す処理を行っているのですが、GLightboxが動くタイミングがそれより早いので起こる現象だと思われます。
<!-- ↓非表示にした画像をリンクごと消す処理 --><script>～</script>をGLightboxの読み込みスクリプトの前に移動し、
$(function() {
の部分を↓
document.addEventListener('DOMContentLoaded', function() {
に書き換えてみてください。恐らくこれで大丈夫じゃないかと思います。(私もJSは初心者なのでもしかして間違ったことを書いていたら申し訳ありません…)

うまく動かなかったとか、不具合が起こったなどありましたらまたお気軽にご連絡ください！
畳む

＞10/28 14:50の方へ
続きを読む
さっそくお試しいただいて、ご質問もありがとうございます！更新履歴(新着投稿リスト)の表記の変え方は「おすすめ設定」にあったのでわかりにくかったですね…すみません…
「設定」→「ページの表示」→【新着投稿リストの表示】→「▼それぞれに表示する内容」から表示する情報を変えられます　デモサイトの「基本の使い方」に説明を移動しておいたのでよろしければご確認ください！
畳む

#開発

(11/4)　>>配布しました！

新スキン「hokan」がほぼできたのでベータ版公開します！

β版ダウンロード

→デモサイト
(カテゴリ「使い方」に詳細説明)

一週間くらい最終チェックしてから正式配布しますので、ちょっと遊んでみてください　バグ報告とかご要望とか、メッセージフォーム (Googleフォーム)よりお気軽にお送りくださると嬉しいです(ほんとお気軽に…)(バグめっちゃありそうで怖い)

↓ベータ版から修正中の点
続きを読む
・やっぱ恥ずかしくなってきたのでskin by表記をソース内に移動
・文字のみ一覧デザイン細かく修正　抜粋文多めにしたりとか
・コンテンツ部分が画面いっぱいになるようにしてる
・Lightbox以外の画像拡大ビューアを確認中　>>確認記事(hokanデモサイト)
・自由装飾に大文字を追加中
・自由装飾に縦書きを追加中
・一覧：鍵投稿のデフォサムネ表示が弱かったのを強くしています　ついでにカテゴリごとにデフォサムネをカスタムできるような記述を追加
畳む

#カスタマイズ #自由装飾
(2024/05/26追記)
Ver 4.1.1以降、リンクにオプションで任意のクラス名を付与できる記法が実装されたので、配布記事のダウンロードリンクをボタン風に装飾してみました
これ→ボタン
リンクのときこう書く→　[ボタン:CL(lbtn)]任意のURL

/* ボタン(リンク記法) */
a.uc-lbtn {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 0.3rem;
margin: 0.2rem;
padding: 0.3rem 1rem;
background-color: 背景色;
color: 文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px rgb(0 0 0 / 0.2);
}
a.uc-lbtn:hover { background-color: ホバー時の背景色; box-shadow: 0 0;}

→公式ページ：任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML

以下は以前の記法(リンクを自由装飾で囲むやつ)
続きを読む
めっちゃ焦った　DLリンクをボタンにしようと思って自由装飾で適当にボタン作ったら表示崩れてびっくりした

リンクがボタンの装飾の外側にあると駄目なようです　まずテキストリンクを作ってからそれを丸ごとボタンの装飾で包み、deco-〇〇配下のaに対して装飾すればいいっぽい
という感じでスキンのDLリンクをボタンにしてみました　ちゃんとできてる？下にcss置いときます

自由装飾「button」
/* ボタン(リンクはボタンの中に貼る) */
.deco-button a {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 5px;
margin: 3px;
padding: 0.3rem 1rem;
background-color: 好きな背景色;
color: 好きな文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px 好きな影色;
}
.deco-button a:hover { background-color: 好きなホバー色; box-shadow: 0 0;}
畳む

トップページ整理しました　まだできてないスキンのバナー作るのは先走りすぎでは…とは思ったものの先走りました　3つってバランスいいから…
画像をリンクにする方法、単独投稿記事には繋げられないのか？ってやってたんだけど、投稿番号じゃなく任意URLなら普通に貼れたので、バナーからも配布記事に飛べるようにしてあります