CMSkin for てがろぐ

ogp.png

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

概要

てがろぐをCMSっぽく使うためのスキンを目指しています。スキン導入後に少し設定を頑張れば、その後は本文投稿の際に区分(カテゴリ)を選ぶことによって

  • サイトインフォメーション
  • 小説・エッセイ等の長文
  • イラストギャラリー
  • 日記・雑記・つぶやきなど

をそれぞれ用のデザインで表示でき(るといいなぁと思ってい)ます。

動作条件・確認環境

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

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

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

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

特徴

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

  • なるべく簡単に表示非表示を取捨選択できるようになっています(を目指し中)
  • てがろぐの機能(ほぼ)全部盛り

独自表示・機能

実働例はCMSkin for てがろぐで見れます。パスワードなしでログインできるゲストアカウントで使いごこちを一部お試しできます。テスト投稿どうぞ!

  • 検索ロボット避けメタタグ
  • 入口認証モーダル
  • Javascript・CSS無効の環境向けのメッセージ
  • Twemoji・Line Awsome(アイコンフォント)の導入
  • カテゴリ(2階層まで)をナビメニューとして表示
    • 「RSSを出力する」設定にしているときのみRSSリンクを表示
  • パンくずリスト
  • 日付境界バー内リンクのロボット避け
  • カテゴリごとに表示モード・記事表示デザイン切り替え
  • トップページのみの表示
    • 新着画像スライダー
    • 更新履歴カテゴリの新着一覧表示
    • 先頭固定記事のみ表示
  • 記事単体の表示投稿
    • 本文1行目を記事タイトルとして
      • title要素
      • situation行(パンくずリスト内)
      • 前後記事移動リンク
      に表示
    • ページ移動リンクに『記事が属しているカテゴリの投稿だけを見る』リンクを追加
    • 小説カテゴリに投稿した本文内で区切り文字を自由装飾「hr」で囲んだ時にページ内リンクを生成
  • mp3・mp4の埋め込み表示
  •  ギャラリーモード表示用スキン2種
    • 1枚目のみ表示するスキンは画像クリックで記事単体表示ページへ
    • 記事に含まれる画像すべてを表示するスキンはLightboxの画像送りを記事ごとにグループ化
  • 記事No.リンククリックでリンク先をポップアップまたは本文内に引用
  • クリックで記事No.リンクをクイックポストフォームに自動記入するボタン
  • いいねボタン改、シェアリンク用スキン
  • クイックポストフォームをモーダル表示
    • 画像一覧をモーダルで開くボタン追加

ダウンロード・使い方


New or Up …最近更新されたページです。

てがろぐ
てがろぐスキン

コメント[コメントする]

権限がありません

このコメントは管理者のみに公開されています。

このコメントを閲覧する権限がありません。

moka(えむおか)

りつか さま
こんばんは、当スキンのご利用とコメントありがとうございます!
いろいろな機能をできるだけ盛り盛りにしてみましたがこれは自分だけが楽しいのでは…?と思っていたのでそう言っていただけて嬉しいです🙏

また、ご質問の件ですが当方Apple系の環境がないためご報告助かります!デモのほうの画像も拝見しました、確かに少しガビってますね。
こちらで確認できないため憶測でしかないのですがskin-cms.cssの89行目付近にある「-webkit-text-stroke-width:.14px !important;」を削除してみてください。こちらはWindowsのフォント表示があまりきれいじゃないことへの対応だったのですが、webフォントを利用しているので逆効果だったかもしれません…?そのほかだと78行目「text-rendering:optimizeLegibility;」がフォントへ影響がある部分かなぁと思います。
よろしければこの辺を削除してみて結果を教えていただければ幸いです!

権限がありません

このコメントは管理者のみに公開されています。

このコメントを閲覧する権限がありません。

moka(えむおか)

りつかさま
解決してよかったです~!こちらこそ、ご指摘いただかなかったら気づけなかった問題でした、ありがとうございます!
わざわざ整備して使っていただいてるとのこと、本当にうれしいです。
メニューがサイト名にかぶる問題もちょっと調べてみます、すみません!

そしてres_memoの件は申し訳ありません、こちらでもすでに確認しておりました。次回の更新(てがろぐ公式がVer.4になったタイミング)でデモに適用している修正版を配布する予定ですが、skin-cms.cssの
1149行目付近「body:not(.home) article.res_memo .post_content {~(この間)}」に「min-height:79px;」を、
542行目付近「article:not(.logstatus-fixed) .newsign {~(この間)}」に「z-index:1;」を追加してみてください。
こちらこそお手数かけてしまってすみません、ご報告本当に助かっておりますありがとうございます!

権限がありません

このコメントは管理者のみに公開されています。

このコメントを閲覧する権限がありません。

権限がありません

このコメントは管理者のみに公開されています。

このコメントを閲覧する権限がありません。

moka(えむおか)

仁希 さま
コメントありがとうございます。お返事が遅くなってしまい申し訳ありません。
拙作スキンの利用をご検討いただき嬉しく思います。

ご質問の件ですが、「_modules」フォルダ内「footer.html」187行目付近に
//新着画像スライダー
var latest_img_slider = '<div class="latest_img_slider"><div>[[IMAGELIST:PURE]][[IMAGELIST:PURE]]</div></div>';
という記述があるかと思います。
こちらを
var latest_img_slider = '<div class="latest_img_slider"><img src="表示したい画像URL" alt=""></div>';
のようにしてみてください。(↑※HTMLタグが反映されちゃうので一部全角にしています)
スライダーの表示デザイン(サイズなど)と動きはCSSでしているので
skin-cms.css417行目付近の
/* 新着画像スライダー */というコメント以降の部分を削除や修正してみてください。
また何かありましたらお気軽にご連絡ください!

権限がありません

このコメントは管理者のみに公開されています。

このコメントを閲覧する権限がありません。

承認待ち

このコメントは管理者の承認待ちです。

このコメントは管理者の承認待ちです。

コメント登録

  • コメントを入力してください。
登録フォーム
名前

入力必須項目です

URL
コメント

入力必須項目です

HTML・CSSなどを入力
閲覧制限