関連記事と記事下の順番を変えたり、いろいろカスタマイズ - FOXISM
はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。 記事下と順番を入れ替える css ちょっと細かい解説 記事下の要素の間に入れる html css ちょっと細かい解説 そのほかのカスタマイズ 2列にする ○○を非表示にする サムネイルを消す 日付を消す 冒頭文を消す リストの5番目を消す 「関連記事」の表示を別の名前にする サムネイルを大きくする まとめ 記事下と順番を入れ替える 通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。 css .customized-footer{ d
目指せ最速！はてなブログで表示を高速化するために行った7つの施策 - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 ちょっと前に私のブログのデザインを変更したのですが、どうもトップページの表示が遅い（気がする）。右半分ははてなブログの仕様上ちらついちゃうのは仕方ないと許容していましたが、なんか全体的に遅い（気がする）。というわけで、本日のテーマはタイトル通り高速化になります。地味な内容ではございますが、よろしくお付き合いください。 早いは正義？ 大袈裟に言いましたが… 画像の圧縮 不要な外部リソースの排除 不要なカスタマイズの排除 カスタマイズコードの位置を調整 ライブラリの遅延読み込み jQueryコードの排除 DNSプリフェッチの導入 一連の施策を終えて 具体的なコードも1つご紹介 今後の展望と課題を CSSのインライン化 はてなスターどうしよう 広告も遅い部類 さいごに 早いは正義？ だと個人的には考えています。SEOとか専門的なことは知りません
はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 若干出遅れましたが、タイトル通り、私もカスタマイズコードをご用意しました。まだちょっと課題があるんですけど、水物といいますか、旬を逃したくないので見切り発車でご紹介します。 ごめん、バグってた 詳細は公式ブログを 現時点での出来栄え ソースコードはこちら JavaScript CSS 把握している課題 さいごに ごめん、バグってた www.tsubasa-note.blog ごめんなさい記事書きました。上記ページのコードをご利用いただけますようお願いします。 詳細は公式ブログを staff.hatenablog.com どうぞ。特に説明は必要ないと思いますので割愛。/archiveに飛ばす必要がなくなりましたね、やったぜ。 現時点での出来栄え キャプチャでドン。 うん、カード。 www.foxism.jp 本日、先に記事を公開されたore
はてなブログのスマホ表示でスクロールが引っかかるのを解消する
はてなブログのスマホ表示で、たまにスクロールがガクガクと引っかかるブログがあります。 若干ストレスなので解消しましょう。 以下のコードをスマホの「フッター」かヘッダーの「タイトル下」あたりにコピペして下さい。 <style> .entry-content { overflow: visible; } </style> これだけでOKです。 よろしくお願いいたします。 注意事項： スマホで動作確認はして下さい。 カスタマイズは自己責任でお願いいたします。 他にもカスタマイズ記事書いてます。 必見！はてなブログのカスタマイズを一気に紹介する | SHIROMAG 吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった | SHIROMAG
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
はてなブログのスライドパネルやりかた - ナサのブログ
2017 - 03 - 08 はてなブログのスライドパネルやりかた ブログ 雑談 どうもナサです！ そこのアナタ。 スライドパネルって知ってます？ クリック 隠しテキストが表示されます この、いかにも怪しいボタンをクリックすると隠されていたテキストが表示されます。 私はこれをスライドパネルと呼ぶことにしました。 少し前まではJqueryでやっていたのですが、それだとページの読み込みが遅くなるのでCSSでやってみることにしました。 ブロガーのハチさんという方に教えてもらったサイトを活用して無事CSSでもスライドパネルを実装できました。 www.webcreatorbox.com 実装方法 CSSは先程のサイトを丸パクリすることでできます。 CSS input { display: none; } label { cursor: pointer; display: inline-block;
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
コピペでどうぞ。サイドバーのカテゴリーモジュールに親子関係を持たせて表示するカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 久しぶりにカスタマイズの記事を書いている気がします。今日はやろうやろうと思っていたものの、ついつい後回しにしてしまっていたカスタマイズをご紹介します。コピペでいけますので気になった方はお試しください。 サイドバーが気になった サクッと完成 JavaScriptの追記 CSSの追記 課題が2つほど さいごに 関連記事 サイドバーが気になった bulldra.hatenablog.com 今日のカスタマイズは上記サイトで紹介されているパンくずリストのカスタマイズを導入している人向けとなっています。当ブログでもお世話になっているカスタマイズです、ありがとうございます。 SEOとか詳しいことは存じませんが、このカスタマイズはやったほうがいい！とあちこちのブログで紹介されていましたので、私も結構早い段階で導入しました。 パンくずリストがいい感じに表
はてなブログでコピペで簡単に人気記事セレクションやおすすめ記事を設置する方法｜本日もトントン拍子
今回は僕がブログで使っている人気記事やおすすめ記事を記事上や記事下に表示する方法を紹介していきます。 僕自身ブログに実際に設置しているのでそちらも参考にしてみてください。URLを書き換えて貼り付けるだけなので、興味のある方はぜひ設置してみてください。 以前書いたこちらの記事でコメントを頂けたり、実際に設置してくださる方がいて嬉しかったので今回はパワーアップバージョンです。 www.tontonpig.com 人気記事セレクション① 人気記事セレクション①（色付き） 人気記事セレクション② 人気記事セレクション②（枠付き） 人気記事セレクション（スマホ向け） おすすめ記事 おすすめ記事（色付き） 記事下人気記事 シロマティさんのおすすめ記事カスタマイズもおすすめ まとめ おすすめ記事 人気記事セレクション① 人気記事セレクション 1. Amazonプライムビデオでおすすめの映画ベスト50を年
必見！はてなブログのカスタマイズを一気に紹介する
最終更新：7月25日 カードリンクが重かったのでテキストリンクに変更しました。 はてなブログのカスタマイズ方法まとめ 今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。 もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。 目次を見れば、はてなブログでどんなカスタマイズができるか把握できますね。 カスタマイズの前に注意事項 カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。 動作チェックを必ずする カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。 PCではちゃんと表示されていても、手違いでスマホだと表示されていない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに