skin-profile

このテンプレートは、にししふぁくとりー様にて配布されているマイクロブログCGI「てがろぐ」用のスキンです。「てがろぐ」以外のプログラムや、通常のHTMLベタ打ちサイト等には適用できませんので、ご注意ください。

「てがろぐ」を使って、ミニブログとイラストまとめ機能のついた簡単なプロフィールページ、もしくはミニサイトを作ることを想定した、機能的なスキンです。

スキンの最低限の編集（ヘッダー画像とプロフィール画像の設定）をしたら、あとはてがろぐの管理画面からプロフィール等を入力すれば、プロフィールページが完成します。

ミニブログに掲載した画像は、自動で画像一覧ページに表示されるため、イラストまとめとして活用できます。てがろぐ側で設定すれば、特定の画像をミニブログには掲載するけど、イラストまとめには掲載しない、といった細かな設定も可能です。（日記用の写真など）

設置方法

まずはこのページからスキンをダウンロードします。

ヘッダー画像とプロフィール画像の変更（スキンの編集）

skin-profileをダウンロードしたら、スキンを編集し、ヘッダー画像とプロフィール画像を変更します。

ヘッダー背景画像の推奨サイズは横1400px×縦500px前後、プロフィール画像の推奨サイズは一辺が200px以上の正方形（CSS側で丸くトリミングされます）です。画像を用意したらサーバーの適当な場所にアップロードします。よく分からない場合は、てがろぐの管理画面から画像をアップロードしてもかまいません。

次に、skin-profileスキン内のsettingフォルダを開き、「mainvisual.html」を編集します。以下のように記述されているはずです。

<div id="mv">

<!-- ヘッダー画像ここから -->
<div class="background">
<img src="skin-profile/img/sample.jpg" alt="[[FREE:TITLE:MAIN]]" class="">
</div>
<!-- ヘッダー画像ここまで -->

<!-- プロフィール画像ここから -->
<div id="profile">
<img src="skin-profile/img/prof.jpg" alt="[[FREE:TITLE:MAIN]]" class="">
</div>
<!-- プロフィール画像ここまで -->

</div>

ヘッダー画像の編集

5行目のimgタグ内のskin-profile/img/sample.jpgの部分を書き換えます。使用したい画像のパスを記述します。

相対パスで記述する場合は、skin-profileディレクトリが格納されている場所からの相対パスを記述します。絶対パスを記述してもOKです。

ヘッダー画像を使用しない場合は、の行からの行までを削除します。

プロフィール画像の編集

11行目のimgタグ内のskin-profile/img/prof.jpgの部分を書き換えます。使用したい画像のパスを記述します。

相対パスで記述する場合は、skin-profileディレクトリが格納されている場所からの相対パスを記述します。絶対パスを記述してもOKです。

プロフィール画像を使用しない場合は、の行からの行までを削除します。

ヘッダー画像、プロフィール画像のいずれも使わない場合

mainvisual.html内のすべての記述を削除し、以下の一行だけを記述します。

<div id="spacer"></div>

展示を画像一覧ではなくギャラリーモードで表示したい場合

デモサイトでは画像一覧表示機能を使用して展示物タブを表示していますが、ギャラリーモードを利用することもできます。ギャラリーモードの場合は、展示物タブに表示されたサムネイルをクリックをすると、画像が拡大されるのではなく、個別の投稿ページへジャンプします。作品ひとつひとつにキャプションを書いたりしたい場合に便利です。

ギャラリーモードの場合、てがろぐの仕様上、一覧外に設定した画像も展示物一覧に表示されるため、展示物以外の画像を一切てがろぐ上で扱わない場合のみご利用ください。

展示をギャラリーモードで表示したい場合は、skin-cover.html内のpictsの文字列をすべてgalleryに置換します。（11か所）テキストエディタの一括置換機能を使うと便利です。

スキンの適用

skin-profileの編集が終わったら、適切な場所（tegalog.cgiと同階層）にアップロードし、通常通りの操作で、てがろぐにskin-profileを適用します。

展示物一覧をデモサイト通りの画像一覧モードで表示したい場合は、てがろぐの管理画面から設定＞補助出力＞画像一覧モードの出力を開き、「画像一覧表示機能を使う」チェックマークを入れ、スキン格納ディレクトリ名に「skin-profile」と入力します。

展示物一覧をギャラリーモードで表示したい場合は、てがろぐの管理画面から設定＞補助出力＞ギャラリーモードの出力「ギャラリー表示機能を使う」チェックマークを入れ、スキン格納ディレクトリ名に「skin-profile」と入力します。

また、「１ページあたりに表示される投稿数」に任意の数字を入力します。ここに入力した数字は、画像一覧ページの１ページあたりの画像表示件数として反映されます。6の倍数だと収まりが良いです。

通常ならギャラリーモードや画像一覧モードには専用のスキンが必要ですが、skin-profileスキンはこれひとつで通常モード、ギャラリーモード、画像一覧モードに対応できます。

スキンが正常に適用できていたら、他の設定を行います。

必要なてがろぐの設定変更

てがろぐの管理画面から各種設定を行います。

ヘッダ用フリースペースの入力

設定＞フリースペース＞ヘッダ用フリースペースを開きます。

主タイトル：サイト名を入力します。プロフィール画像の直下に表示されます。
副タイトル：サイトのキャッチフレーズなどを入力します。サイトを開いたときのタブに表示されます。（下の画像を参照してください）
一行概要文：サイトの簡易な説明を入力します。

多目的フリースペースの入力

設定＞フリースペース＞多目的フリースペースを開きます。

多目的フリースペースに、トップページに表示する文章を入力します。

多目的フリースペースは、半角<>を入力することで分割が可能です。半角<>以降が２か所目のフリースペースとなり、skin-profileではトップページの新着画像一覧の直下に表示されます。詳しくはてがろぐのマニュアルをご覧ください。

２か所目のフリースペースを使わない場合は、半角<>を使った分割機能は使わなくても問題ありません。

てがろぐのその他の設定（任意）

以下はオススメの設定です。お好みに応じて適用してください。

ページネーションの設定

初期設定のままだと、投稿数が増えてページ数が多くなった場合に、ページ番号リンクが長くなりすぎてデザインがイマイチになってしまいます。

ページ数が増えたときのため、ページ番号リンクを省略してすっきりと見やすくする設定をします。

てがろぐの管理画面から、設定＞ページの表示＞ナビゲーションリンクの表示　を開きます。「ページ番号リンク」の中の「総ページ数が多ければ途中のページ番号リンクを省略する」にチェックマークを入れます。その他の関連設定はお好みで変更してください。

投稿画像の表示設定（NSFW画像、一覧リストに表示しない画像）

NSFW画像（センシティブな画像）にはサムネイルにボカシをかけることができます。ワンクッション置きたい場合に便利です。

また、ミニブログには掲載したいけど、画像一覧ページには表示したくない画像がある場合も、設定を行うことで画像一覧に反映しないようにできます。

設定する場合は、てがろぐの管理画面から、画像の管理ページを開きます。

NSFWフラグや一覧外フラグをつけることで、画像の扱いを変更することができます。アップロードした画像にフラグをつけるには、行の一番左の編集リンクをクリックします。

画像につけたいフラグにチェックマークを入れたら、「編集内容を保存する」をクリックすれば反映されます。

CSSの編集

CSSをカスタマイズしたい場合は、てがろぐの管理画面からCSSを上書きすることが可能です。てがろぐの管理画面で、設定＞フリースペース＞上書きスタイルシートを開きます。

ボックス下部のデフォルトスキンに強制出力し、その他のスキンでも外側スキンに [[FREE:EXTRACSS]] の記述があればそこに出力するにチェックマークを入れます。「強制的に追加するCSS」のテキストボックスにCSSを記述すれば、スキンに反映されます。

CSSをカスタマイズしたい場合は、スキンに同梱されたCSSファイルを直接編集しないでください。スキンのアップデート時にカスタマイズ内容が失われてしまう場合があります。

利用にあたってのご注意

動作確認は、てがろぐVer4.3.0にて行っています。
カスタマイズ、およびカスタマイズしたものの再配布は自由です。ただし、このスキンを編集するにはHTML、Javascript、てがろぐカスタマイズの知識がある程度必要です。
マニュアルにないカスタマイズを行った結果、思うように動作しなくなった場合はサポートしかねます。

更新履歴

2024.07.24

ギャラリーモード表示時、NSFW画像にぼかしが入らない問題を修正。

2024.05.31: 配布開始