タグ

はてなブログとブログカスタマイズに関するyuki_2021のブックマーク (9)

  • はてなブログにボタン一つでダークモードを実装する - たねやつの木

    こんばんは、たねやつです。 以前、ブログのテーマを変更したときによりちゃんとしたダークモードを搭載した という話をしましたが、今日はそれについてもう少し詳しく & ソース付きで解説してみようと思います。 基思想 制限 ソース 解説 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

    はてなブログをダークモードにしたかった - トマシープが学ぶ
  • はてなブログ一括置換ツール

    注意事項(必読!!) 必ずバックアップは取って下さい。「設定」→「詳細設定」のエクスポートでバックアップデータをダウンロードして下さい。 テスト用のサブブログを作ってエクスポートしておけば、何かあった時に役立ちます。 はてな側で設定している編集モード(みたままモード、はてな記法、Markdown)以外で作成された記事の置換はできません。 はてな側で設定している編集モード(みたままモード、はてな記法、Markdown)以外で作成された記事を置換したい場合は、はてな側の編集モードの設定を変更し、再度ログインして下さい。 非公開のブログには利用できません。 トラブルが発生した場合の責任は負いかねますので、ご了承ください。 詳しくはコチラの記事をご覧ください。 はてなID ブログURL APIキー 設定している編集方法 見たままモード はてな記法モード Markdownモード 必ず、はてな側で設定

    はてなブログ一括置換ツール
  • 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

    お知らせ 2023年4月2日、サーバーからのスクリプト配信を停止しました。 スクリプトファイルはGitHub上で提供しておりますので、引き続きご利用される方はこれまでの設定部分を修正してください。 詳細は当記事内の手順4,手順5を参照してください。 みなさんはカテゴリーを”階層化”しているでしょうか。 カテゴリーの階層化とは、記事のカテゴリーに親子関係を付けるものです。 これを行った上で”パンくずリスト”を作成すると、SEOに強くなるらしいです。 はてなブログにおいては少し前、公式なパンくずリスト機能が追加されました。 staff.hatenablog.com しかしながら公式パンくずリストは”カテゴリー階層化”には対応しておらず、デフォルトで一つ目のカテゴリだけが表示されます。 そこで公式パンくずリスト登場以前から、独自にパンくずリストを作成するブログパーツが提供されています。 http

    【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
  • 自分のブログに出る不快な広告を絶対許さんマン - karaage. [からあげ]

    自分のブログに不快な広告が出ていた の指摘で気づいたのですが、自分のブログに漫画系のいわゆる不快な広告が出ていたそうです。 この記事のアイキャッチ画像のようなイメージですね。10回以上モザイクかけましたが、それでも不快さがにじみ出てきます。おそるべし不快な広告。 以前にも一度、一通りブロックしたのですが、また増えてきているようです。以下のブログの記事がアドレス網羅されていて良かったです。全部ブロックしました。 ついでに、今まで自分がブロックしていたものも含めて、不快な広告サイトリストを作成しました。 Google Driveで共有して、誰も書き込めるようにしていますので、不快な広告サイトみつけたら是非書き込んでください。 まとめ 自分のサイトの不快な広告をブロックしたという記事でした。Webの広告は、ターゲットに合わせて出すので、自分では気づけなかったりするので注意が必要です。私は、自分

    自分のブログに出る不快な広告を絶対許さんマン - karaage. [からあげ]
  • ランダムエントリーパーツをブログサイドバーに設置 - maRkの

    古くからあるカスタマイズですが、表示のたびにランダムに切りかわる過去記事の参照リンクのカスタマイズです。 PHPを使いますので、別にサーバーが必要です。 おおまかな作業は以下です。 すべての記事を、はてなブログの AtomPub( はてなブログAtomPub - Hatena Developer Center ) を使って取得 取得したら、タイトルとリンクなど必要な情報のみ解析して、JSON形式として書き出し 書き出されたJSONから、ランダムに抜き出しして、HTMLに整形 はてなブログ側で表示 といった形になります。(HTML整形は はてなブログから直接にJSON読む手もありますが、外部 ファイルのリードを抑えてなるべく軽くしたいところなので) 管理としては、 全記事取得はタスク処理などで定期に更新。(更新間隔はブログ記事の更新頻度による) 全記事取得するphpはドキュメントルートより上

    ランダムエントリーパーツをブログサイドバーに設置 - maRkの
  • はてなブログの過去記事からランダムに抽出した記事をつぶやく方法 - iyuichiの私的開発ログ

    今回、サイトマップから取得したURLの中からランダムに選んだ記事のURLとタイトルをTwitterでつぶやくアプリを作って見ました。 最近なんだかNode.js書くのが楽しいのでNode.jsで実装しています。 Nodeクックブック 新品価格 ¥3,672から (2015/4/24 19:34時点) まず、ソースはGitHubにアップしましたので興味がある方はご覧下さい。 github.com サイトマップXMLをパースする まず、はてなブログにはサイトマップXMLが生成されています。 このブログの場合は以下です。 http://iyuichi.hatenablog.jp/sitemap.xml こいつをパースして記事のURL一覧を取得して適当に選ぶ部分を実装します。 世の中にあるものは基利用したいのでモジュールを検索してみました。 こいつが使えそう!とおもったので利用して動かしてみまし

    はてなブログの過去記事からランダムに抽出した記事をつぶやく方法 - iyuichiの私的開発ログ
  • サイトマップを読み取って「初めてのはてな」や「ランダムな記事」へリンクするJavaScript - 太陽がまぶしかったから

    過去記事ガチャ このブログも450記事を超えてきており、「ランダム」に表示させたいと思う事が多いので『過去記事ガチャ』を作ったり、「あわせて読みたい」の一環として id:yuta25 さん作成のランダムリンクサービスを利用させて頂いてました。 『RAD v0.0.3 - Random Access Diaries』は素晴らしいサービスなのですが「エントリの削除」には追随しておらず、僕のように記事消しを頻繁にしていたブログで実行すると「記事が見つかりませんでした」になってしまいがちという問題があります。 これに対応するため、サイトマップからランダムにジャンプする処理を独自で作成することとし、ついでに「最新」「最古」のURL取得処理も作って「はじめてのはてな」へもリンクできるようにします。 記事をランダム表示 sitemap.xmlの取得 sitemap.xmlは来的には検索エンジンに記事が

    サイトマップを読み取って「初めてのはてな」や「ランダムな記事」へリンクするJavaScript - 太陽がまぶしかったから
    yuki_2021
    yuki_2021 2020/11/09
    過去記事ランダムアクセスボタンを作ってみたくなった。
  • はてなブログで「あわせて読みたい」のようなリンクの強調方法を紹介しますの! - 元IT土方の供述

    みんなー!うしるだよー☆ 今回はねえ!はてなブログで「あわせて読みたい」みたいなリンクを強調する方法を紹介するの! 刮目して見てね♡ リンクを強調させたいの! リンク強調(あわせてよみたい)の導入 スマホ版(Pro限定)の設定方法 リンク強調の使用方法 複数リンクの場合 リンクによってボックスのデザインを変化させる方法 まとめ リンクを強調させたいの! ブログの記事内であわせて読んで欲しい記事があって、リンクを貼り付けるなんてことがよくあると思います。しかし、そのまま貼り付けてしまうと▼のようにちょっと味気ない感じになってしまいます。 www.itjigoku.com ブログカード形式ならまだいいですが、文字だけだと、▼のように、ただただリンクを踏めるだけの文字になってしまいます。 クレヨンしんちゃんの舞台「春日部」を聖地巡礼してきたゾ! 読んで欲しいリンクは目立たせてみましてみましょう。

    はてなブログで「あわせて読みたい」のようなリンクの強調方法を紹介しますの! - 元IT土方の供述
    yuki_2021
    yuki_2021 2020/05/14
    ウチのあわせてよみたいも装飾したいかも。
  • 1