ちょっと前ですが、公式サイトの小説掲載ページを改装しました。
一度投稿サイトの手軽さに慣れてしまうと、HTMLタグでルビふったり改行入れたり、というのが面倒に感じてしまっていた……ということで、ショートショートまとめに利用させていただいている「てがろぐ」を導入してみました。
その際にいじってみたところをメモ代わりにまとめてみました。
完成ページ
基本的に、BL小説ページや男女・その他小説ページから作品ページにアクセスするので、↑から行けるトップページはかなりシンプルにしています。
更新履歴は元々のテンプレにあったので、そのまま利用させていただきました。
フォントと文字の大きさは、なるべく改装前と揃えました。
やってみたこと
doさんのいいねボタンプログラムを導入して、試しに複数つけてみました。
↑の「作品ページ一例」から確認できますので、よろしければぜひ😊
ちなみにポップアップ表示される写真は、全部私が撮影したものです。
せっかく頑張って撮ってるので、勇気を出して使ってみることにしました 笑
今まで使っていた「選択式一言感想フォーム」のリンクも残しています。
本文前にある画像は、一応表紙のつもりです。シェアしたときのサムネ用です。
やりたかったこと
できればpixiv等みたいに、文字の大きさ・行間・フォントの種類を切り替えできればと思ったんですが、ちょっと手間がかかりそうなのでとりあえず後回し。
シリーズものの場合、改装前につけていた「←前の話へ」「次の話へ→」リンクをシステム側の機能を使ってうまいことつけたかったのですが、望んだ通りにいかなかったので諦めました。
てがろぐ開発者さんの「開発検討中の機能」ページに
同カテゴリに限定した隣接投稿への移動機能
お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 - にししふぁくとりー
とあったので、こちらの実装を待ちたいと思います。
あとはいわゆる「改ページ」ですね。 文字数がそこそこ多いページもあるので設定できればよかったのですが、そもそもシステムが対応していないので無理でした。
ちょっと不便になってしまってすみません。。
お借りしたテンプレや参考サイトなど
テンプレ
シンプルで小説の掲載にぴったりな、使いやすいテンプレです。
CSS側で、主に作品ページ（個別ページ）のユーティリティリンク（○○カテゴリーだけの投稿を見る等）やフリースペースが非表示になっていたので、CSSで解除しています。
.utilitylinks {
display: revert!important; /*ユーティリティリンク非表示を解除*/
text-align:center;
}
.uchead {display: none;} /*この投稿と同じカテゴリに属する投稿：は非表示*/
.utilitylinks ul {list-style: none;}
body.onelog :where(.freespacearea) { display: revert!important;} /*個別ページにフリースペース非表示を解除*/ページをシェアしたときに記事のタイトルを挿入する
ショートショートページでも気になっていたところだったのですが、ページをSNSでシェアしようと思っても、
記事番号（No. ○） - 主タイトル 副タイトル http://hogehoge.com
記事タイトルではなく、記事番号が挿入されてしまいます。
これはHTMLの＜title＞部分（記事番号〜副タイトルまで）がこのような表記だから仕方ないんですよね。
でも、こちらとしては記事番号→小説タイトルにしたい……。
解決策は本当にないのかと思っていたら、掲載してくれているページがありました！
本当ありがとうございます、という気持ちでいっぱいです。
私はシリーズタイトルも含めたかったので、以下のようなコードにしています。
<script>
if(location.href.match("postid")) {
var str = $('title').text();
var res = str.split('-');
var cat = $('p.ichicats').text();
if (cat) {
// カテゴリーがあったらカテゴリーをタイトルの後に入れる
$('title').text($('div.onelogtitle').html() + '『' + cat + '』' + ' -' + res[1] + '｜'+ res[2]);
} else {
$('title').text($('div.onelogtitle').html() + ' -' + res[1] + '｜'+ res[2]);
}
}
</script>
