てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

■フリースペース: 編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

or 管理画面へ

No.3107, No.3106, No.3105, No.3104, No.3103, No.3102, No.31017件]

NO IMAGE にしし 牛乳の消費期限チェックを忘れないように……!(>_<)

🌰Re:3104◆新機能がお役に立っているようで嬉しいです。(╹◡╹)
🌰Re:3105◆感想ありがとうございます。需要があると分かると開発モチベーションが維持しやすいのでありがたいです。順調にいけば、近日中にβ版として公開できそうな気がしています。
NO IMAGE にしし てがろぐCGIでギャラリーサイトっぽい構造を作った際の実例:

🌰この名古屋のリフォーム会社の施工例ページが、てがろぐで生成されています。ギャラリーっぽい表示で、クリックすると個別ページに飛びます。これは特にギャラリーモードを活用しているわけではなく、「全投稿に必ず1枚以上の写真を掲載する」という前提で運営しているので、「画像ありき」のスキンを作って通常モードで使っています。(たとえ画像がなくても、サムネイル領域が空白になるだけで、表示が崩れることはありませんけども。)

🌰スキンが1つしかないのに「TOPではギャラリーっぽい表示」で「単独投稿ページでは全文表示」になっているのは、内側スキンskin-onelog.htmlを次のように書いているからです。

<!-- ▼TOPでのみ表示する部分 -->
<div class="oneWorkBox forLinkListBox">
   <a href="[[PARMAURL:FULL]]" class="oneItemOnLinkList">
      <span class="oneLinkImage"><img src="透明GIF" width="300" height="300" alt="" style="background-image:url('[[GETURL:PICT:1]]');"></span>
      <span class="oneLinkTitle">[[COMMENT:TITLE]]</span>
      <span class="oneLinkDate">[[DATE:Y.M.D]]</span>
   </a>
</div>
<!-- ▼単独投稿表示時でのみ表示する部分 -->
<div class="oneWorkBox forIndividual">
   <p class="workDate">[[DATE:Y.M.D]]</p>
   <h3 class="workTitle"><a href="[[PARMAURL:FULL]]">[[COMMENT:TITLE]]</a></h3>
   <p class="workMain">
      [[COMMENT:BODY]]
   </p>
</div>


このようにHTMLを書いておいて、
●投稿単独表示時では .forLinkListBoxdisplay:none; にし、
●それ以外の状況では .forIndividualdisplay: none;
しています。こうすると、1つのスキンだけでも「単独投稿表示時」と「それ以外」とでデザインを別々に用意できます。(よほど本文が長い場合には、無駄にHTMLソースが長くなる問題はありますが。)
※上記で、「投稿1枚目の画像」を background-image で表示しているのは、元の写真の縦横比に関係なく正方形に描画するためです。今ならそんな回りくどい方法を使わなくてもCSSで object-fit: cover; とか書けば良いのですが、このサイトでは(企業サイトなので)一応ふるーいブラウザ(IE11等)で閲覧された場合も考慮して、背景画像を駆使する方法を使っています。
畳む


🌰さらに、このリフォーム会社のHOMEページ冒頭では、投稿の最新10件をループスライダーで無限ループ表示させています。右から左へ向かって流れていく「施工例」の部分です。ここは、埋め込み用に作成したスキンを使って埋め込んでいます。クリックすると、投稿単独ページに飛びます。

🌰ここは、外側スキンを次のように書いて

<!-- ループスライダー -->
<div class="loopSlider">
   <ul>
      [[TEGALOG:10]]
   </ul>
</div>
[[VERSION]]

(※VERSION部分は、ライセンスがあるので非表示になっています。)

畳む
、内側スキンを以下のように書いて

<li>
   <p class="loopBoxImage forLinkListBox">
      <a href="[[PARMAURL:PURE:FULL]]" class="oneItemOnLinkList">
         <span class="oneLinkImage"><img src="透明GIF" width="142" height="142" alt="" style="background-image:url('[[GETURL:PICT:1]]');"></span>
         <span class="oneLinkTitle">[[COMMENT:TITLE]]</span>
         <span class="oneLinkDate">[[DATE:Y.M.D]]</span>
      </a>
   </p>
</li>

(※ここでも「1枚目の画像」をbackground-imageで掲載しているのは、さっきと同じ理由です。)
畳む
いるだけです。

使っているスキンは、メインのが1つと、ループスライダー埋め込み用のが1つの、計2つです。
Icon of admin あどみ 新着画像のサムネイルいいですね!
自分でこんな感じのやれないかな〜と考えたことありましたが、分からなかったので嬉しいです😆楽しみです。
Icon of admin あどみ パスワード機能、実装してくださり嬉しいです!
いつもありがとうございます。
NO IMAGE にしし Twitterのメディア欄みたいな、新着画像リストが表示できるようになった Ver 3.8.2(未配布)の動作テスト。
まだ標準スキンしか作っていないので他のスキンでは見えませんが。 [[IMAGELIST]] と書くと、そこに投稿画像が指定個数だけ表示されます。画像をクリックすると、その画像が使われている投稿に移動できます。いくつ掲載されるかは設定で指定できますが、[[IMAGELIST:12]] のように書けば、スキン側で強制的に個数を指定することもできます。
Icon of admin あどみ 画像投稿テスト📸

20221006182338-admin.jpg 20221006182344-admin.jpg 20221006182349-admin.jpg畳む

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「チャットタイプスキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンがあります。
てがろぐCGIの配布・解説ページに戻る