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

てがろぐ - Fumy Otegaru Memo Logger -

2025年6月28日(土) 17:49:39〔27時間前〕 更新

■No.3855 ( 1

■フリースペース: 編集

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

■日付検索:

■全文検索:

or 管理画面へ

〔1927文字〕 編集

No.3855 by Icon of admin あどみ 〔1年以上前〕

いつもてがろぐに大変お世話になってます。
投稿記事の単独表示時にページタイトル(title要素、htmlのtitleタグの中身)へ記事タイトルや投稿本文の一部を入れる方法は以前>>3293さんがjQueryで実現されてましたが、自サイト用にjQueryを使わないJavaScriptで同じようなものを作ったのでお裾分けします。

外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記ソースを貼り付けるか、<script>~</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から呼び出せば動くはずです。
私のサイトおよびローカル環境の公式スキンで動作確認済みですが、書き方が間違ってる等のツッコミがありましたらお教え下さると幸いです。

ブログタイプスキン向け(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
<script>
window.addEventListener('load', function() {
   let nowurl = location.href;   //現在のURL
   let singleurl = nowurl.indexOf('postid=');   //記事単独表示かをURL内からpostid=の有無で判別

   //postid=がURLに含まれる場合のみ実行
   if( singleurl != -1){
      let Basetitle = document.title;   //元のページタイトルを変数に入れておく
      let ArticleTitleget = document.querySelector('.logtitle');   //logtitleクラスのhtml要素を取得
      let ArticleTitle = ArticleTitleget.innerText;   //logtitleクラスのテキストだけ取得
      document.title = Basetitle + ' - ' + ArticleTitle;   //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
   }
});
</script>
畳む


標準スキンや昔のツイッターっぽいスキンなど、ブログタイプ以外のスキン向け(Twitterのように、投稿本文の冒頭部分から指定文字数をtitle要素に入れる)
<script>
window.addEventListener('load', function() {
   let nowurl = location.href;   //現在のURL
   let singleurl = nowurl.indexOf('postid=');   //記事単独表示かをURL内からpostid=の有無で判別

   //postid=がURLに含まれる場合のみ実行
   if( singleurl != -1){
         let Basetitle = document.title;   //元のページタイトルを変数に入れておく
         let ArticleTitleget = document.querySelector('.comment');   //commentクラスのhtml要素を取得
         let ArticleTitle1 = ArticleTitleget.innerText;   //commentクラスのテキストだけ取得
         let textcount = 30;   //ここで本文から切り出す文字数を指定
         let ArticleTitle = ArticleTitle1.substring(0, textcount);   //0の部分を変えると切り出し開始位置を変更可能
      document.title = Basetitle + ' - ' + ArticleTitle;   //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
   }
});
</script>
畳む


 document.querySelector('.●●●')の部分はhtml内のクラス名であれば何でも指定できます。
たとえば私のサイトの場合、投稿記事本文の1行目じゃない部分に強調装飾記法をつけて記事タイトル代わりの表示をしているのですが、decorationEクラスを指定すれば本文内の位置に関係なく強調装飾している部分だけがページタイトルに入ります。(1記事内に1回以上強調装飾を使っていないという条件はつきますが…。)

■日付一覧:

■カレンダー:

2023年7月
1
2345678
9101112131415
16171819202122
23242526272829
3031

■最近の投稿:

■新着画像リスト:

Perlのバージョンを上げる設定(さくらインターネット)

全318個 (総容量 36.17MB)

■複合全文検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

ランダムに1件を見る / ギャラリーモードで表示 / 画像一覧モードで表示 / サイトマップモードで表示 / 時系列順で表示する

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