てがろぐスキン「beauter」

tech 1827字：読了まで約3分23秒

てがろぐbeauterスキン アイキャッチ画像

お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 - にししふぁくとりー ブログタイプのスキンを作ったので、自分でスキンを整えるのが怠い人のために配布することにしました。

特徴

重要なお知らせ

Beauter.css自体のメンテナンスが終了したため、 このスキンのサポートも終了いたします。 現在ご使用中の方は引き続きお使いいただけますが、 今後のアップデートはありません。2026-01-22T18:09:24+09:00

CSSフレームワークBeauter | A simple framework for beauiful sitesとSystem UIconsを利用したてがろぐスキンです。

ブログのような使用感を目指したシンプルデザインのスキンで、投稿画像に関してはできるだけそのままのサイズで閲覧できるようにしてあります。レスポンシブデザインです。

サンプルサイト

あおうまの日記です

ペチカのそばで ゲーム中心の毎日

あおうまの日記です

akikaze.net favicon image akikaze.net

スクリーンショット

てがろぐbeauterスキン テスト画像(1)

てがろぐbeauterスキン テスト画像(1) 通常の表示・上部にメニューバーがあります

てがろぐbeauterスキン テスト画像(2)

てがろぐbeauterスキン テスト画像(2) カテゴリ表示・サイドバーはタブ開閉式です

ファイル配布

download-16 skin-beauter.zip(Ver.1.0.3)

ESET Internet Security ver.19.0 14.0でスキャン済

つかいかた

  1. ダウンロードファイルを解凍すると、中にskin-beauterのスキン（フォルダ）が入っています。
  2. 標準のスキンをバックアップしてから、フォルダをtegalog.cgi と同じフォルダに置きます。
  3. CGI設定の「スキンの切り替え」から「簡易本番適応」を行います。本番適応したい場合は、skin-beauter内のファイルをtegalog.cgiのフォルダと同階層のファイルにすべて上書きします

以下のファイルリストのような配置になります。

C:\NEWSITE\TEGALOG
│  .htaccess
│  fumycts.pl
│  psif.cgi
│  README.TXT
│  skin-cover.html
│  skin-onelog.html
│  tegalog.cgi
│  tegalog.css
│  tegalog.ini
│  tegalog.xml
│
└──skin-beauter ※通常表示用スキン
        beauter.min.css
        beauter.min.js
        skin-cover.html
        skin-onelog.html
        tegalog.css

skin-beauter は Beauterの機能を利用しておりますので、beauter.min.cssとbeauter.min.jsがないと動きません。

また、新しい記事をリボンで表示したい場合は、CGIを次のように設定してください。

てがろぐbeauterスキン 設定：直近投稿

てがろぐbeauterスキン 直近投稿の設定

「サインの表記」に<span class="newest">New!</span>を入力してください。ディスプレイ幅が充分な場合、以下のような表示になります。

てがろぐbeauterスキン 設定：直近投稿の表示

てがろぐbeauterスキン 直近投稿の表示

ほか、オススメの設定です。

カスタマイズ方法

色指定

色指定はそれぞれのCSSファイル先頭に書いてあります。CSS変数の中身を書き換えるとすべて置き換わります。

.★色指定
※カスタマイズする場合、20行目からのカラーコードを変更してください。
basecolor1 - ブログ全体の背景色
basecolor2 - 補助の背景色
accentcolor1 - 決定ボタンなどの補助色
accentcolor2 - トップのメニューバーや日付バー等の補助色
accentcolor3 - リンクオーバーなどの補助色
wordcolor - 指定がない場合の文字色
------------------------------------------------------*/
:root {
--basecolor1 : #e8e6e2 ; /* ecru */
--basecolor2 : #e6dad9 ;/* soft pinkish gray */
--accentcolor1 : #ce6f66 ; /* ash pink */
--accentcolor2 : #72796c ; /* ash green */
--accentcolor3 : #98af97 ; /* grass green */
--wordcolor : #4d3634 ; }

ほか、「この機能いらない」等はskin-beauter/skin-cover.htmlのサイドバーにコメント表示をしておりますので、該当箇所を削除していただけるとありがたいです。

更新履歴

2026/01/23(Fri)
Ver.1.0.3 Twitter埋め込みがはみ出す、ページャーがはみ出す、カレンダー表示が崩れる問題を修正。
2024/02/01 (Thu)
Ver.1.0.2 サイドバー横幅を戻す・figcaptionの背景を黒色に変更などskin-beauterを調整
2023/12/23 (Sat)
Ver.1.0.1 サイドバー横幅ほかskin-beauterを微調整
2023/12/21 (Thu)
Ver.1.0.0 初公開

規約

禁止事項

  1. 著作権を偽る行為（自作発言）
  2. 売買（このスキンそのもの、または改造版を商材として売るなどの行為）
  3. 宗教系、政治活動系、実写アダルト系のサイトでの使用

以上です。スキンの制作者リンクは消してもOKです。 よろしくお願いいたします。

免責事項

このスキンを使用した上で被った損害については、作者は一切の責任を負うものではございませんので、あらかじめご了承ください。

関連記事