RAGFAIR 近況まとめ+TOPICS

TOPICS(Updated:2022/01/22)

 

  • TOPICS(Updated:2022/01/22)
    • 2022/2/15-3/15 「RAG FAIR 20周年感謝ライブおかわりツアー」開催決定!
    • 12/19(日) 開催 RAG FAIR & INSPi 20周年感謝LIVE 〜Love is here〜・「RAG FAIR shop」にて記念CD好評事後通販中
    • 荒井・加藤所属「ザ・ハモーレ・エ・カンターレ」・2020年度配信公演「うちに遊びにおいでよ」シリーズ DVD好評発売中・1/29(土)「貫く純愛!駆け抜ける青春!」無観客配信公演開催決定(チケット販売中) ※有観客トライアルは中止
    • 加藤・荒井所属「BROAD6」2/19 (土)ブルーノート東京公演-Selection- 開催決定
    • DVD「RAG FAIRの音楽室1」「RAG FAIRの音楽室2」RAG FAIR shopにて好評販売中
    • RAG FAIR & INSPi合同制作楽曲「20/20 ~あなた キミ 僕~ /今しか言えない」 好評DL販売中
    • ライブアルバム「RAG FAIRの音楽室」シリーズ 好評配信中
    • RAG FAIR shopにてグッズ各種(エコバッグ)好評販売中
    • 公式Youtube「RAGFAIRmovie」次回放送予定:1/25(火) 22:30-
    • RAG FAIR&INSPi 20周年記念特設サイト 好評稼働中
    • その他の出演などはこちらから
  • レギュラー

(※目次のページ内リンクが不能な場合があります。お手数ですがスクロールをお願いします)

2022/2/15-3/15 「RAG FAIR 20周年感謝ライブおかわりツアー」開催決定!

詳細は上記リンクより(リンク張替済) 一般発売中(完売の会場あり)

12/19(日) 開催 RAG FAIR & INSPi 20周年感謝LIVE 〜Love is here〜
・「
RAG FAIR shop」にて記念CD好評事後通販中
荒井・加藤所属「ザ・ハモーレ・エ・カンターレ」
・2020年度配信公演「うちに遊びにおいでよ」シリーズ DVD好評発売中
・1/29(土)「貫く純愛!駆け抜ける青春!」無観客配信公演開催決定(チケット販売中) ※有観客トライアルは中止
加藤・荒井所属「BROAD6」2/19 (土)ブルーノート東京公演-Selection- 開催決定

web・電話とともに予約受付中

DVD「RAG FAIRの音楽室1」「RAG FAIRの音楽室2」RAG FAIR shopにて好評販売中
RAG FAIR & INSPi合同制作楽曲「20/20 ~あなた キミ 僕~ /今しか言えない」 好評DL販売中
ライブアルバム「RAG FAIRの音楽室」シリーズ 好評配信中


www.tunecore.co.jp

 

RAG FAIR shopにてグッズ各種(エコバッグ)好評販売中
公式Youtube「RAGFAIRmovie」次回放送予定:1/25(火) 22:30-


www.youtube.com

アーカイブはwe!プレミアムで視聴可能

 

RAG FAIR&INSPi 20周年記念特設サイト 好評稼働中

20th-ragfair-inspi.amebaownd.com

 

その他の出演などはこちらから

 

レギュラー

次回のチャンネル土屋礼央:1/27(木) 22:00-
その他はこちらと20周年HPを参照のこと
ワタナベエンターテインメントメンバーズサイト we!プレ にて動画コンテンツ「RAG FAIRだよ!」全員集合 配信中(毎月10日更新)
続きを読む

はてなブログで個人HPのような限定公開記事を作成する

令和になってもこんなことすると思わなかった。

 

こちらの記事を参考にしています、ありがとうございます!

はてなブログでトップページの記事一覧から特定の記事を非表示にする - ───解放しろ、全てを。

(参考にしておいてなんですが、PC版からだとサイドバーがなくて読みづらい&ホバー時のエフェクトが強すぎて画面酔いします……)

 

先ほど貼ったリンクを参考に、「一覧から表示されない記事」を作成します。

この時、念のために日付をすごく古くしておくことをおすすめします。日付が新しすぎると「更新履歴」などに載ってしまう可能性があります(検証はしていません)。

記事のUUIDは、一度「公開する」ボタンを押した記事を再度編集する時にアドレスバーに表示されているので、デベロッパーツールを呼び出さなくて大丈夫です。

これだけで限定公開記事にはなっていますが、「カスタムURL」機能を使って、非表示にする記事のURLを変更し、どこか他のページにヒントでも書いておけば、個人サイト時代の隠しページのような運用ができます。

ただ、あまり現実的でない数の記事を運用するのはCSS上おすすめしません。あくまで自己責任でご利用下さい。(私は5記事ほど限定公開にしています)

 

ブログカスタマイズ カテゴリーの記事一覧 - すきなものをすきなだけ

リンクの前にファビコンを挿入するHTML

意外と調べても出てこなかったのでメモ。こういうやつです。

すきなものをすきなだけ

 

 

実装図

タイトル(再掲)

すきなものをすきなだけ

URL

http://blanche573.hatenadiary.jp/

 

実際のタグ

<p><a href="https://blanche573.hatenadiary.jp/"><img src="https://cdn-ak.favicon.st-hatena.com/?url=https%3A%2F%2Fblanche573.hatenadiary.jp%2F" alt="" class="http-favicon" />すきなものをすきなだけ</a></p>

aタグ内のリンクと、赤字&アンダーライン部分を書き換えて、他のサイトに応用可能です。

2番目のリンク部分の記号・ひらがな・カタカナはエンコードして下さい。わからなかったらエンコードツールに突っ込めばなんとかなります。

(「:」を%3Aに、「/」を%2Fにエンコードして入れてあります)

<a>タグの間に<img src>を入れているだけなので、慣れている人はそこだけ持って行っても。

 

諸注意

特に特別なタグを打っているわけではありませんが、導入する場合はこの記事へのリンクがあると嬉しいです。画像つきの細かな再説明記事なども、基本的には歓迎しています!

 

今までのカスタマイズ記事一覧

ブログカスタマイズ カテゴリーの記事一覧 - すきなものをすきなだけ

HTMLのアコーディオンパネルを使って、はてなブログのサイドバーを開閉式にする

年末年始に本格的にブログのカスタマイズをし始めて、ようやくやりたかったことができました。嬉しい!!

 

 

アコーディオンパネルとは

タップ/クリックで開閉されるメニューパネルのこと。はてなブログだと「目次」の動きとほぼ同じやつです。

【タップ/クリックで開閉】
この状態が「アコーディオンパネルが開いた状態」で、
閉じると「アコーディオンパネルが閉じている状態」です。

 

このアコーディオンパネルをサイドバーに取り入れられれば、ブログが縦に間延びしないし、スッキリするんじゃないかという算段。今使っているテーマはレスポンシブデザインなんですけど、スマホだとサイドバーのメニューが下に下に増えて縦長になってしまうので、それを解決したかったんです。

タブメニューにしてコンパクトに*1、という選択肢もあったけれど、私の場合は同じモジュールを複数個使っているので、ちょっとうまくいかなかったんですよね。

 

実装図

【タップ/クリックで開閉】

わかりやすいように、実際のサイドバーをそのまま持ってきています。

 

詳細手順

デベロッパーツールから、開閉したい要素のHTMLを抜き出す→サイドバーのHTMLモジュールにコピペ→対応タグで挟む(→カスタマイズ) という流れ。

 

デベロッパーツールから該当のHTMLを抜き出す
  1. 開閉式にしたい要素がサイドバーに表示されている状態でブログページを開いて、デベロッパーツールを呼び出す(Chromeだと「その他のツール」>「デベロッパーツール」、もしくは「Ctrl」+「Shift」+「I」)。
  2. ページ内検索(「Ctrl」+「F」)を呼び出して、開閉したい要素のHTMLを探す
    サイドバーの要素名一覧はここが見やすいです。私はリンクを開閉式にしたかったので、「.hatena-module-links」で呼び出しました。どうせ全部はてななので、入力は「module-」からで問題ないです。
  3. 要素のHTMLをコピー
    該当する行を右クリック→「Copy」>「Copy Element(要素をコピー)」。

 

サイドバーのHTMLモジュールにペースト

ブログ管理画面にいって、「デザイン」>「カスタマイズ」>「サイドバー」、最下部にいって「モジュールを追加」→「HTML」を選択、本文に先ほどのHTMLをペースト。新しいモジュールのタイトルは、わかりやすいものであればなんでも。

ここから少し作業をするので、一時的にサイドバーの上の方にこの新しく入れたモジュールを入れておくと見やすいです。

コピペ元のモジュールのタイトルは必要ないので、2-4行目の

 <div class="hatena-module-title">
(ここにコピペしたサイドバーのタイトルが入っていると思います)
  </div>

は削除しておいてください。

1行目と最終行の

<div class="hatena-module hatena-module-モジュール名">

~ </div>

を消すのも悪くはないと思います。が、CSSで他のカスタマイズをしたときに、開閉式にした部分だけカスタマイズが効かなくなる可能性があるので、そのままにしておくのを推奨します。

 

対応タグで挟む

コピペしてきたHTMLの1行目に<details>、最終行に</details>を追加。

<details>の次の行に<summary></summary>を追加し、開閉することを確認。

このままだと<summary>の部分に何もなく、「詳細」という字が表示されているだけなので、<summary>で挟まれた部分に例えば「タップで開閉」とか書いておく。

問題なく動くことを確認したら、コピペ元のモジュールを削除して終了です!おつかれさまでした!

 

<details><summary>タグで挟まれていれば、基本的にはなんでも開閉式にできます。例えばこういう実装も可能。

 

実装図のコード【タップ/クリックで開閉】

<details>
<summary><strong>【タップ/クリックで開閉】 </strong></summary>
<div  class="hatena-module hatena-module-links">
<div class="hatena-module-body">
<ul class="hatena-urllist">
<li><a href="https://odaibako.net/u/orangecat_chun ">感想・質問・ご連絡など(お題箱)</a></li>
<li><a href="https://privatter.net/u/orangecat_chun">Privatter-@oranegcat_chun</a></li>
<li><a href="https://note.mu/white_cat_notes">note-しろねこやまと</a></li>
</ul>
</div>
</div>
</details>

赤字が足した部分です。

 

カスタマイズ

<details>で挟んでいるところは基本的にはコピペなので、<summary>部分でいかに開閉式だとわかってもらうか、というカスタマイズが中心になるかと思います。要素を指定すればCSSカスタマイズもできそうですね。

とはいえ、CSSはそんなに詳しくないのでサンプルを出せません。ごめんなさい……!

HTMLサンプルを少しずつ作っていきます。お待ち下さい!

 

諸注意・その他

  • IEは記事執筆時点では対応していないようです(対応させる方法はあるようです)。対応していない場合は、常に開きっぱなしになってしまうようです。最新の対応状況はこちらから確認して下さい。
  • 私はサイドバーモジュール「リンク」「プロフィール」での実装です。その他のサイドバーモジュールやブログテーマ*2ではうまくいかない可能性があります。自己責任でご利用ください。
  • 不具合があれば、twitterやサイドバー「連絡先」からご連絡ください。紹介した私に責任が生じるので。
  • 特に特別なタグを打っているわけではありませんが、導入する場合はこの記事へのリンクがあると嬉しいです。画像つきの細かな再説明記事なども、基本的には歓迎しています!

 

参考リンク

 

今までのカスタマイズ記事一覧

ブログカスタマイズ カテゴリーの記事一覧 - すきなものをすきなだけ