【10周年っぽい】 デザイン超絶リニューアルで「すちゃらかぁん。」ついにレスポンシブ対応!! パソコンでもスマートフォンでもブログを楽しんでおくれえーっ!! - すちゃらかぁん。
歴代最長タイトル？ 分かんないけど長いね、どうもざれんですー。 ブログ「すちゃらかぁん。」は、2024年6月7日にいよいよ10周年を迎えます！ 大々的にイベントを開催したりだとか、特殊なことをしたりだとかはありませんが、タイトル通りブログデザインを一新しました！ 構想1年、開発3日(笑)！ サブブログを作った辺りから自作の気持ちがあったよね。始めるまでが遅いんだなぁ。 ということで、今回はそんなリニューアルした「すちゃらかぁん。」を眺めて参りましょう(笑)！ よろしくどうぞ！ ビフォー！ 見辛い。 左がパソコン、右がスマートフォン。 アフター!! あれ、肝心のスマートフォンは？ アップロード出来ませんでした……(サイズオーバー)。 えぇ……。 ええ、アフターはなうなんですから、その目で見よ！ というやつです(笑)！ しかしどうです？ めちゃくちゃ変化したでしょう？ 色味は可能な限り変えずに
好みのAIモデルを選択してWebサイトのチャットボットとして運用できるWordPressプラグイン・「wpai」
wpai wpaiは好みのAIモデルを選択してWebサイトのチャットボットとして運用できるWordPressプラグインです。※気になったのでメモ的な記事になります。 特に難しい話ではなく、沢山のLLMをサービス提供しているSupervised AIの公式プラグインで、このサービス内で発行されるチャットボットのパスをWordPressの管理画面で設定し、ショートコードで任意のページに貼り付けられる、というもので、基本的にはSupervised AIと導入したWordPressとを接続する為に提供する、というプラグインになります。 肝心のSupervised AIですが、こちらもノーコードでAIアプリを構築可能、LLMもOSSは無料利用可能、他モデルも安価なAPIとして提供しているようです。時間なくて動作テストまで出来ていませんが、時間を見つけて日本でも使えるか等をテストしてみようと思います。
アドセンス遅延読込みでページスピードの高速化！新しいコードも古いコードもコピペで簡単対応
ページのスピードを上げる高速化では、グーグルアドセンスの遅延読み込み（Lazy Load）を行うのが非常に効果的ですが、この遅延表示では「アドセンスの広告コード先頭にある scriptタグ を後で読み込む」、ということが一般的に行われてるようですね。 （これにより、ページ読み込みスピードを上げて page speed insights の点数（パフォーマンス スコア）を上げてSEO効果を期待する） ネット上には その遅延読み込みを実現するための javascript が確認した範囲では2,3種類あるようですが、以下のポイントが気になります。 script タグを javascript で組み立てているのがどうも気になる （コードの見通しが良くないので、何か広告コードの改変につながるかも、といった不安感）そのためもあって、アドセンスの古い広告コードと新しい広告コードで javascriptの
GPTのEmbeddingを利用してブログの投稿に対する近いものを探し出す - きしだのHatena
OpenAIでGPTを使ったAPIにembeddingというのがあって、これを使うと文章同士の距離がとれるので、近いエントリを取得したり文章から検索したりができるということで、試してみました。 思いのほかちゃんと動きました。おそらく、GPTで一番実用的なんじゃないでしょうか。 GPTで実際に一番出番がありそうなEmbeddingを使った、近いブログをとってきたり検索したりするやつ。 pic.twitter.com/Vzgy57a7ju— きしだൠ(K1S) (@kis) 2023年3月9日 embeddingとは なんか、文章の特徴を表す多次元のベクトルに変換してくれるらしい。 ようわからん。 OpenAIでは1500次元くらいのベクトルに変換します。 そして、このベクトルの距離が近ければ文章の内容も近いやろということで、似たエントリの抽出などができます。 しかし、テキストが要素数1500
マストドンのシェアボタンを自作した(追記あり)(今日から使えます) - Lambdaカクテル
自分でマストドンのシェアボタンを作ってみた。 <a href="#" class="js-mstdn-share-button">Share: {title} {}</a> <script defer src="https://github.com/windymelt/mastodon-share-button-scalajs/releases/latest/download/mstdn-share.js"></script> このコードを貼り付けるとテンプレートが展開されてシェアボタンになる。Share: {title} {}としている箇所は文言のテンプレートで、{}がURLで、{title}がタイトルで置換される。 初めてクリックするとポップアップが出てきて、自分のインスタンスがどこなのか教える必要があるけれど、一度使ったらLocalStorageに覚えてもらうようにした。一度設定した
Mastodonシェアボタンを設置してみた【AddToAny】
色々なwebサイトで見かけるシェアボタン。メジャーなものですとTwitterやFacebookでしょうか。その他はてブやPinterest、いくつかのボタンをブログに並べて設置されてる方も多いですよね。記事を共有するのにとても便利！ でも、Mastodon（マストドン）のシェアボタンを設置されてる方ってあまり（というか殆ど）見かけなくて…(;´∀｀) 昔はFANBOXにもPawoo（※Mastodon鯖のひとつです）のシェアボタンがあったんですけど、いつの間にか撤去されてましたし。切な！！！(；∀；) 私はこれまでPawooでシェアするときは、ページurlをコピペしてトゥート（※Twitterでいうtweet）していたのですが、シェアボタンがあったら便利だなあ～～～と、思っていたんです。 ということで、幣ブログのシェアボタン群にMastodonが仲間入りですよ。もっと早くカスタマイズしてお
はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG
・はてなブログで使えるアイコンフォントの使い方を知りたい。 ・はてなブログで使えるアイコンフォントの一覧を見たい。 こういった疑問に答えます。 本記事の内容 はてなブログで使えるアイコンフォント(blogicon)の一覧をまとめました（全122種） はてなブログのアイコンフォント(blogicon)の使い方 この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。 当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。 こういった私が、解説していきます。 本記事の内容 はてなブログのデフォルトで使えるアイコンフォント(blogicon)について はてなブログで使えるアイコンフォント(blogicon)の一覧まとめ（全122種）【2020年9月時点】 はてなブログのアイコンフォント(blogicon)の使い方 HTMLの中で、iタグを使う場合
最低限のDark Modeライブラリ「color-scheme-handler」 - ryoのぼやき
近年増えつつあるダークモード対応のサイト 少し前にOSのカラースキーマを"Dark"に変更してみて、思った以上に多くのWebサイトがダークモードの対応をしていることに気が付いた。 ダークモードには次のようなメリットがあると言われてる。 目が疲れにくい 見やすい デバイスのバッテリーが長持ちする かっこいい それぞれについて賛否両論あるんだけど、少なくとも「かっこいい」という部分については大賛成である。 ダークモードの対応は難しいものではないが少し面倒 ダークモードの対応方法について調べてみると、そこまで難しいものではなさそうだった。 ただWebサイトを複数持っている場合、それぞれに対しその対応するのは少し面倒にも思えた。 例えば自分のケースだと次のような対応をする必要があった。 ユーザーがOSでダークモードを選択してる場合は、ダークモードで表示する ユーザーがWebサイト上でダークモードと
はてなブログにボタン一つでダークモードを実装する - たねやつの木
こんばんは、たねやつです。 以前、ブログのテーマを変更したときによりちゃんとしたダークモードを搭載した という話をしましたが、今日はそれについてもう少し詳しく & ソース付きで解説してみようと思います。 基本思想 制限 ソース 解説 changeBgColor setAttributeStyle setAttributeStyleAll 例外 removeAttributeStyle 最初から背景色を暗くする 最後に 基本思想 基本的には、背景色変更のボタンを押したときに、JavaScriptで各要素にstyle属性を追加し、主に文字色と背景色を変更します。 style属性で指定した値は、!importantで指定されている値の次に優先的に適用されるのでほとんどの場合に設定値を上書きできます。 背景色を元に戻す時には逆にstyle属性を取り除きます。 制限 ここで紹介しているソースは、Ha
はてなブログをダークモードにしたかった - トマシープが学ぶ
私は白が好きだが、スマホやPCで見るものは黒い設定にできるだけしてる。 ナイトモードがあるものはないとモードにするし、スキンが一つのやつは暗い色にしている。 PC見るのは夜が多いけど夜は明るいと目が疲れちゃう＞＜ 自分のこのサイトは明るすぎて眩しいよ〜〜 ナイトモードにできないかな？ ナイトモード実装記事 haijpuro.hateblo.jp www.taneyats.com 上の二つやってみたけど、なんかうまくいかない＞＜ 下のやつはHaruniというテーマでは動作確認していると書いていたけど、同じくHaruniを使っている日記の方でやっても動かない〜〜 ヘッダ＞タイトル下にコピペして サイドバーモジュールにボタンを追加した OSで変更 こちらはOSでダークモードを設定している人が見た時にダークモードになるようにしている rokuzeudon.hatenablog.jp prefers
はてなブログPROでads.txtファイルの問題を修正した話 - orangeitems’s diary
ads.txtファイルの問題 ブログ運営費のためにGoogleアドセンスを利用しているのですが、本日以下のエラーを検出しました。 要注意 - 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。 本件については、はてな社が言及しています。 はてなブログ - お問い合わせ - はてな 「要注意 - ads.txt ファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。」 というエラーが表示されるようになったというお問い合わせをいただいております。 現在のところ、はてなが提供しているドメイン ( *.hatenablog.com 等) か独自ドメインを設定しているブログかに関わらず、ads.txt を配信する機能は提供していません。 多くの方が利用されているGoogle AdSense ads.txtに関するヘルプ
はてなブログ一括置換ツール
注意事項（必読!!） 必ずバックアップは取って下さい。「設定」→「詳細設定」のエクスポートでバックアップデータをダウンロードして下さい。 テスト用のサブブログを作ってエクスポートしておけば、何かあった時に役立ちます。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事の置換はできません。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事を置換したい場合は、はてな側の編集モードの設定を変更し、再度ログインして下さい。 非公開のブログには利用できません。 トラブルが発生した場合の責任は負いかねますので、ご了承ください。 詳しくはコチラの記事をご覧ください。 はてなID ブログURL APIキー 設定している編集方法 見たままモード はてな記法モード Markdownモード 必ず、はてな側で設定
YouTubeだけじゃない！はてなブログに動画を貼り付ける方法！ - なべやすブログ
おはようございます、なべやすです。 ブログは、文字を使って読者に様々なことを伝えるツールですが、すべてを文字だけで伝えようとするのにも少し限界を感じております。 当ブログにおいても写真やイラストなどの画像を使ったり、時には表やグラフなどを使って記事を作成しないと、読者にうまく伝えられない内容もたくさんあります。 もはや、ブログに写真やイラストなどの画像を使うことは、すっかりスタンダードになっているのが現状です。 そして、写真やイラストではどうしても伝えにくいことに対して、最近では動画も取り入れるようになりました。 ブログに動画を取り入れる方法としては、誰もが知ってるYouTubeを使うのが簡単かつ手っ取り早いのでおすすめです。 今回は、YouTube以外にもブログに動画を取り込める方法がありますので、あわせてご紹介いたします。 ※当記事は、はてなブログに動画を載せる方法を記載しておりますが
スマホ版はてなブログの『ヘッダーの読者になるボタン』と『スクロール追従ブックマークボタン』を非表示させる方法を紹介しますの！ - 元IT土方の供述
みんなー！うしるだよー☆ スマホ版はてなブログの『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』を非表示させる方法を紹介するんだ！ 刮目して見てね♡ 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ヘッダーの読者になるボタンを非表示にする方法 追従ブックマークボタンを非表示にする方法 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ある日突然、「読者になるボタン」がブログタイトルとブログアイコンと共にヘッダーに表示されました。 2021年7月13日のはてなブログの仕様変更で追加されたようです。 そして、記事ページのヘッダーには記事タイトルが書かれた「ブックマークボタン」が表示され、スクロールするとストーカーの如く追従するようになりました。 こちらは2021年5月17日の仕様変
【はてなブログ】ヘッダー・タイトル右上の読者になるボタンを削除・非表示にする方法 - YUUU BroG
本記事ははてなブログを利用しているブロガーさんに向けたカスタマイズ記事になります。 2021年7月13日に突然はてなブログのアップデート？があり、ブログタイトル部分の右上（ヘッダーの右下）に「読者になる」ボタンが表示されるようになりました。謎アプデ ブログによってはタイトルやメインビジュアルに被ってて邪魔になるかと思いますので、今回はこのボタンを非表示にする方法について解説していきます。 読者になるボタンを削除・非表示にする方法 そもそも読者になるボタンが追加されていないブログもある 読者になるボタンを削除・非表示にする方法 このボタンはデザインcssにたった1行コピペするだけで削除することができます。 デザインcssは編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から編集することができます。 ここに以下のコードをコピペ
超簡単？！はてなブログのトップ画面をタイル表示に変更する方法♪～お洒落なレイアウトのブログに大変身させよう～ - ゆるふわSEの日常♪
おはこんばんちは！！！ ゆるふわSEの「ゆるちょここ」です♪ 今回は、ブログのカスタマイズとして以前からちょっぴりだけやってみたかった「トップ画面のタイル表示」をやってみましたので、その備忘も兼ねて手順を大公開しちゃいまーす！ IT、ガジェット系特化のニュースサイトとして「GIGAZINE」っていうサイトがあるのですが、このサイトを以前結構みていて、、、 gigazine.net 「こういった見栄え（タイル、カード型）の記事一覧って見やすくて良きよねー♪」って思ってたので、このカスタマイズやってみたかったんですよねー(´・∀・｀)v サンプルのCSSコードをコピペで貼って、ちょちょいと自分好みに修正するだけで、できちゃうので、プログラムわかんなくてもわりかし簡単にできちゃうと思います！ 部屋の模様替えよろしく、ブログの模様替え的な気分転換に実施してみるのもいーかもしれませんね（何それ？！w
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
お知らせ 2023年4月2日、サーバーからのスクリプト配信を停止しました。 スクリプトファイルはGitHub上で提供しておりますので、引き続きご利用される方はこれまでの設定部分を修正してください。 詳細は当記事内の手順4,手順5を参照してください。 みなさんはカテゴリーを”階層化”しているでしょうか。 カテゴリーの階層化とは、記事のカテゴリーに親子関係を付けるものです。 これを行った上で”パンくずリスト”を作成すると、SEOに強くなるらしいです。 はてなブログにおいては少し前、公式なパンくずリスト機能が追加されました。 staff.hatenablog.com しかしながら公式パンくずリストは”カテゴリー階層化”には対応しておらず、デフォルトで一つ目のカテゴリだけが表示されます。 そこで公式パンくずリスト登場以前から、独自にパンくずリストを作成するブログパーツが提供されています。 http
自分のブログに出る不快な広告を絶対許さんマン - karaage. [からあげ]
自分のブログに不快な広告が出ていた 妻の指摘で気づいたのですが、自分のブログに漫画系のいわゆる不快な広告が出ていたそうです。 この記事のアイキャッチ画像のようなイメージですね。10回以上モザイクかけましたが、それでも不快さがにじみ出てきます。おそるべし不快な広告。 以前にも一度、一通りブロックしたのですが、また増えてきているようです。以下のブログの記事がアドレス網羅されていて良かったです。全部ブロックしました。 ついでに、今まで自分がブロックしていたものも含めて、不快な広告サイトリストを作成しました。 Google Driveで共有して、誰も書き込めるようにしていますので、不快な広告サイトみつけたら是非書き込んでください。 まとめ 自分のサイトの不快な広告をブロックしたという記事でした。Webの広告は、ターゲットに合わせて出すので、自分では気づけなかったりするので注意が必要です。私は、自分
![自分のブログに出る不快な広告を絶対許さんマン - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2184da77d17a1fd82c8327d36b582ba9e194cde/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20201205%2F20201205020031.jpg)
ランダムエントリーパーツをブログサイドバーに設置 - maRkの
古くからあるカスタマイズですが、表示のたびにランダムに切りかわる過去記事の参照リンクのカスタマイズです。 PHPを使いますので、別にサーバーが必要です。 おおまかな作業は以下です。 すべての記事を、はてなブログの AtomPub( はてなブログAtomPub - Hatena Developer Center ) を使って取得 取得したら、タイトルとリンクなど必要な情報のみ解析して、JSON形式として書き出し 書き出されたJSONから、ランダムに抜き出しして、HTMLに整形 はてなブログ側で表示 といった形になります。（HTML整形は はてなブログから直接にJSON読む手もありますが、外部 ファイルのリードを抑えてなるべく軽くしたいところなので） 管理としては、 全記事取得はタスク処理などで定期に更新。（更新間隔はブログ記事の更新頻度による） 全記事取得するphpはドキュメントルートより上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fedibuzzer - フェディバース向けシェアボタンをまとめよう