カスタマイズCSS

はてなブログのデザインテーマ 【Brooklyn】に更新日を表示するカスタマイズコードを「元CAバンビ」さんと「ACC-DNTST」さんのコードを組み合わせて作ってみました。 【 特 徴 】 jQueryを使用してsitemap_index.xmlから更新日の取得をしない 自分のブログのサイトマップを指定するコードの手直し不要 FontAwesome ( 外部フォント ) を使わない もっと簡単に言うと 『コードをそのまま1ヶ所にコピペするだけでOK』 と言う事です。

このブログの 『記事の見出し（題）』と『記事』の境目が、 分かりづらく、フォントサイズも似ていて、 区別がつきにくかった為、 カスタマイズした。 ネットで検索をかけて、 いろんな方のブログや記事を参考に、 無事カスタマイズできたが、1～2時間くらいかかった。 方法は、『デザインCSS』にコードを打ち込んで、 『背景色』とか『フォントサイズ』を変更させるが、 全く経験のない初心者だったのでとても苦労した。 このようなプログラムは、 大昔に（20年くらい前に）『VB6.0』を少しかじった程度だった。 （今は分かる人は少ないと思うが。） 『デザインCSS』の場所は、 はてなブログ↓ダッシュボード↓左…

ストア掲載サムネイルの高画質版 blog.hatena.ne.jp レスポンシブ対応 サイドカラムを左に配置し、かつスクロール追従（sticky）するようにしてみた リンクとカテゴリモジュールでは、はてなブログのアイコンフォントを使ってみた テキストリンクは全部下線をつけた Twitterの先行きが怪しく、Webでの発信・アプトプットの中心が、何らかのブログやコミュニティへと移る日が来るのかもしれません。 note、Zenn、Qiita、WordPress、そして STUDIO CMS など、ブログ発信のツールはいろいろあります。ただ、趣味の範囲で、頑張らなくてもゆるい繋がりができる、そしてブ…

今日もこのブログのカスタマイズをあれこれとやって。まだやりたいことあるけど、でも段々自分好みに整ってきたぞーって感じで嬉しい！ デザインとか凝り出すとキリないからこっちは最低限、って思ってたんだけど。いざいじるとやっぱ楽しいんだよな〜〜〜。 自分で少しコード書けるようになったからっていうのもある。昔はHTMLもCSSもコピペしかできなくて、せいぜい数値変えるくらいだったけど、それを繰り返してるうちに段々class指定とかもわかるようになって。今でもイチから全部一人で書くのは無理だけど、でもどんどんできることが増えててとっても嬉しい。 結局は素人だからあんまりやりすぎると意外な不具合とか起こりそ…

デフォルトままでも良かったんだけど、CSS触るの楽しいので記事ページに表示されるSNSシェアボタンの表示をカスタマイズしました。 参考サイト HTMLの変更 アイコンを にしたい場合 CSSの変更 参考サイト www.notitle-weblog.com こちらの「左にアイコンを配置したシェアボタンその2」を参考にさせて頂きました。LINE用のボタンを追加するためにちょっと変更して使わせてもらっています（感謝）。基本的な設定説明はこちらのサイトを見るのが確実だと思うので、変更した箇所だけ備忘録。 HTMLの変更 LINEのボタンを追加しています。LINEのアイコンは ではなく にしました。 だ…

becoです。 4歳と0歳双子の三姉妹を育てています。8月から始めたこのブログ。 本格的なブログ運営は、初めてなので日々勉強中です。 見出しや目次の作り方を試しているのですが、 はてなブログの見出しは、フォントサイズが変わるだけで素っ気ないデザインですね。 そこで、CSSで見出しをカスタマイズしてみました！ 見出しをカスタマイズする方法 見出しをカスタマイズする方法 CSSでデザインを変更する 参考にしたのは以下のサイトです。 excellent.ne.jp いくつかサイトを参考にしましたが、以下の点で一番使いやすかったです。 シンプルな見出しデザインが網羅されている CSSをコピーするだけで…

ブログの右上に勝手に出てしまう「読者になる」ボタンが気になっていました。すぐそばのプロフィール欄にも同じ機能のボタンがあるのに、どんだけ読者を求めてんねん…と。恥ずかしさすら感じるので消すことに。 デザインCSSの場所 「読者になる」を非表示にする デザインCSSの場所 デザインCSSを編集することで非表示にすることが出来ます。デザインCSSは「 デザイン」から入ったところにあります。 「読者になる」を非表示にする デザインCSSに下記のコードをコピペして保存するだけでOK。これでスッキリ。 .blog-controlls { display: none; } なんで表示させる方をデフォルトに…

経緯 ポケサーのサイトなんだから何かポケモン風のものが用意したいと思った 設定方法 アイコンの用意 （ケルディオ カーソルの姿） カーソルにするので32pxくらいがちょうど良いかと あまり大きすぎると認識されないです urlのコピペ アップロードした画像のアドレスをコピペする はてなブログの場合ははてなフォトライフを使ってると思います cssの書き込み デザイン → カスタマイズ → css 書き込める場所まで進んだら、 body { cursor: url("コピペした画像アドレス"), auto;} を張り付けて保存したら完了です 蛇足 ほんとはサイトのheadタグにいれた方が良いかも知れ…

こんにちは岩田です。 当ブログではスマホ表示だけ追従の展開式グローバルメニューを採用しています。 ついこないだCLS対策としてヘッダータイトルごとヘッダー部分を画像に変えたのですが、その結果スマホの表示のみタイトルまで一緒に追従するようになってしまいました。笑 ちなみにパソコンでは追従ではないので普通です。 思わぬ副産物でしたが、個人的には良いと思っているのでご紹介することにします。 追従の展開式グローバルメニューを対応させる ヘッダー画像をはてなフォトライフに保存した画像にする はてなフォトライフにヘッダー画像を保存 ヘッダーに記述するHTML CSSの記述 追従の展開式グローバルメニューを…

こんにちは岩田です。 今回新たにスマホ画面で見た時のデザインを変更してみました。 この上下のメニューバーですが、スクロールしても追従してくれます。 上にはメニューと表示されており、クニックするとこのようにグローバルメニューが表示されます。 ちなみにパソコンだと通常のグローバルメニューの表示になります。 パソコンでも幅が一定の狭さになるとスマホ表示に切り替わります。 目次の表示 おすすめ記事の表示 ボトムメニューには、ホームボタン、おすすめ記事、読者登録、上に戻る、目次を表示させています。 まず、このように表示させるようにデザイン変更をした理由ですが、ユーザーの回遊をしやすくすることでユーザビリ…

はてなブログをカスタマイズしています。 CSS は、外部 CSS ファイルを使っています。 簡単にできて、メンテナンスも楽な外部 CSS ファイルを使ってみませんか。