てがろぐスキン「X_modoki」 up!

にしし ふぁくとりーさんで配布されているCGIてがろぐ用のスキンです。このスキンの使い方などに関するご意見やご質問はこのページ下にあるコメント欄からお願いします。

概要

てがろぐをTwitter(現𝕏)っぽく表示するスキンを目指しています。

動作条件・確認環境

  • てがろぐ Ver. 4.1.0以降
  • Javascript・CSSともに有効
  • 当スキンを本番適用(簡易もOK)している状態

の状態で想定通りに動作・表示ができます。動作・表示確認は以下でしています。

  • Windows10 - Firefox・Edge・Vivaldi
  • Android - Firefox・Google Chrome

その他の環境で表示したときの情報を求めています。

特徴

以下のような特徴があります。

  • Noto Sans JP(ウェブフォント)・Line Awsome(アイコンフォント)の導入
  • ヘッダー部分にユーザアイコン・ユーザ名・ユーザIDを自動表示
  • 日付境界バー内リンクのロボット避け
  • 記事内
    • 投稿時間がページを開いた時間から48時間以内であれば相対時間を表示
    • 外部リンク(href属性値がhttpで始まるもの)は別窓で開く
    • mp3・mp4の埋め込み表示(管理画面でアップロード許可が必要)
  • 記事単体の表示
    • 本文1行目を記事タイトルとして
      • title要素
      • 前後記事移動リンク
      に表示
  • 記事No.リンククリックでリンク先をポップアップまたは本文内に引用
  • クリックで記事No.リンクをクイックポストフォームに自動記入するボタン
  • いいねボタン改用記述
  • クイックポストフォームをモーダル表示
    • 画像一覧・カスタム絵文字一覧をモーダルで開くボタン追加

サンプル・デモ

画像サンプルはこのページ上部に表示されているものをクリック・タップで見られます。実働例はCMSkin for てがろぐに当スキンを一時適用したものをどうぞ。一時適用のため一部リンクなどがおかしくなっていますが本番適用すれば解消されるはずです。

使い方

  1. ダウンロードしたzipを解凍し、skin-X_modokiフォルダをtegalog.cgiを置いているフォルダ内にアップロードします
  2. 管理画面の「スキンの切り替え」ページで「skin-X_modoki」欄右の「本番適用(簡易)」ボタンを押します

推奨設定

【追記】申し訳ありません、Waveboxのリンクに当サイトあてのものをそのまま記述しておりました。「skin-onelog.html」27行目付近の<a href="https://wavebox.me/wave/est33ota44w1cmry/" target="_blank">Wavebox 👋</a>のURLをご自分のものに書き換えるか、Waveboxを利用していない場合はliタグごと削除するかでご対応お願いいたします。配布物としては次回更新時に差し替えます。

管理画面での設定について、以下のように設定するとよりいい感じかなと思います。

  1. 「自分のIDを設定」でアイコンのURLを設定
  2. 「設定」→ページの表示→【ページの表示/全体】→日付境界バーの挿入位置
    • 「原則の挿入位置」で「挿入」を選んでいる場合は「この範囲をファイルに出力するリンク(エクスポート機能)」のチェックを外す
  3. 「設定」→ページの表示→【ページの表示/投稿単独】→「本文の下に、ユーティリティリンク枠を表示する」のチェックを外す
  4. 「設定」→投稿欄の表示→【QUICKPOSTの表示】→「ログインしている際にのみ表示する」を選択
    • 非ログイン時にクイックポストフォームを開くボタン・いいねボタン改が押された回数・記事ごとの編集・削除リンクなどが非表示になります
  5. 「設定」→フリースペース→【フッタ用フリースペース】
    • ここの「リンクラベル」及び「リンク先URL」が当スキンヘッダー部分に表示されます

20231126.jpg 20231126_1.jpg 20231126_2.jpg

カスタマイズ

  • ヘッダー画像はtegalog.cgi設置ディレクトリ内「images」フォルダに「X-header.jpg」という名前でアップロードしてください
  • いいねボタン・改を導入する際は
  • 配色の変更は「Xmodoki.css」最初のほうのCSS変数部分で行えます

ダウンロード

ご利用前に「利用規約」の確認をお願いします。

X_modoki.zip

更新履歴

  • 2023/11/26 配布開始
最上部へ 最下部へ