はてなブログカスタマイズ

このタグでブログを書く

言葉の解説

ネットで話題

はてなブログカスタマイズ

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

あとぢゑ〜る•5ヶ月前

🍵アイキャッチ画像などを追加

ブログ指南によると、デザインだのカスタマイズだのどうでもいいから記事を書けとのこと。そう言われても、やっぱり外観いじりに精を出してしまった。トップをカード式にしたので、やはりアイキャッチ画像もオリジナリティを出して、全体に統一感を持たせたいよね。今回、アイキャッチ画像を新たに複数枚作成。やり出すとハマってしまうのがASD脳。麻雀めをすゑ～るは出来るコなんで、下のてんぱ～るが私だな……。発達障害最初は何となくテキトーに考えただけなんだけど、いつの間にか自分を反映したキャラクターになっていた、ま～る族。社会と文化強まんの形状が異質なのは、昔考えたキャラクターの使い回しだから。人間と生…

#ライフスタイル#創作キャラ#はてなブログカスタマイズ

ネットで話題

110ブックマークレビューブログに使ってほしいはてなブログカスタマイズその1：良い点・悪い点のリスト - FOXISM

foxism.jp

91ブックマークはてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから

www.du-soleil.com

53ブックマーク【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - LIABLIFE（リアブライフ）

blog.kaerucloud.com

51ブックマーク簡単！はてなブログカスタマイズ！スマホ表示がオシャレに見える！ - ココッチィ

rico-note.hatenadiary.jp

43ブックマークはてなブログカスタマイズ「パンくず」「グローバルメニュー」「引用」「注目記事」を実際にやってみたらこうなった - 心に火を、指先にペンを

defender-21.hatenablog.com

42ブックマーク【はてなブログカスタマイズ】はてなブログをcodocで課金記事化する - TOMOKO OOSUKI

petitmatch.hatenablog.com

40ブックマーク【はてなブログカスタマイズ】デフォルトのスマートフォン表示から不要な要素を削除して、「はてな」っぽさをなくす - この世の果てブログ 2014-11-19 【はてなブログカスタマイズ】デフォルトのスマートフォン表示から不要な要素を削除して、「はてな」っぽさをなくす【Sponsored Link】はてなブログのスマートフォン表示のカスタマイズ。俺が使用しているテーマ「Afterrain」はレスポンシブ対応ではないので、iPhone などのスマートフォンでの表示は、は...

konoyono.hateblo.jp

39ブックマークはてなブログカスタマイズまとめ（スマホメイン）【2016】 - 羆の人生記

www.pojihiguma.com

37ブックマークはてなブログカスタマイズが全て分かるまとめ - nasust life blog

nasust.hatenablog.com

関連ブログ

雲呑春雨鶏ガラスープ•6ヶ月前

見出しが固定メニューバーで隠れてしまう時の調整方法

このサイトの上部にはグローバルメニューが固定で設置してあるのですが(PCサイズのみ)、一つ悩みが。それは目次から見出しに飛ぶとき。見出しがメニューバーに隠れて見えなくなってしまうのです。しょうがなくh3タグのpaddingを多めに取ったりしていたのですが… あっさりCSSのみで解決できたのでご紹介します。参考サイト: ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリスコピペするコードはてなブログのカスタマイズから、デザインCSSにこれを貼り付けるだけ。 html {scroll-padding: 50px;} 要素がどこまでスクロールされるかを指…

#はてなブログカスタマイズ

あとぢゑ〜る•8ヶ月前

🪟無料ブログでトップをカード式に表示させる方法

過去記事でエントリーカードについて言及した。その時はあまりよく知らなかったのだが、基本、カード式は記事一覧表示にしないと設置できないらしい。つまり、うちは無料ブログなので、カード式にはできないということになる。しかし、無料ブログでもトップページをカード式に表示させる裏技があったのだ。👇こちらのブログ、カスタマイズが凄いな～と思って拝見していたのだけど、無料ブログでもトップがカード式になっている。無料ブログでは、トップページを一覧形式にする選択はできない。それでは、どのように記事を一覧表示させるのか。その裏技は意外と単純で、トップページからアーカイブ（記事一覧表示ページ）に強制的に飛ばしてしま…

#はてなブログカスタマイズ

Askthewind’s diary•8ヶ月前

はてなブログの公式テーマSmoothのアーカイブページをCSS Gridでカード型にしてみた。

レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」の記事一覧ページをGrid レイアウトでカード型にしてみました。はてなブログPROのユーザーは表示形式を一覧形式に変更すればトップページがカード型になります。全てのブラウザがCSS Gridに対応したので、はてなブログのデフォルトの公式テーマ「Smooth」用のカード型デザインをCSS Gridで追加コードを作ってみた。実行結果です笑 iPhoneの縦向きは1列 iPad iPhoneの横向きは2列 PCは3列表示になります ↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ…

#CSS#はてなブログカスタマイズ#テーマ#公式テーマ#カード型デザイン#レスポンシブデザイン

Askthewind’s diary•9ヶ月前

iPhoneで見ると横揺れするはてなブログの公式テーマSmoothをCSSで直してみた。

⬆️画像だよクリックで拡大⬆️レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」を使ったブログの表示がiPhoneで見ると横揺れがするのでCSSを見てみたら、犯人がちゃんといるじゃあ、ありませんか笑。 entry-footer-adというclassの左右のマージンがネイティブマージンになっていたのだ。⬇️画像だよ横揺れの根本的な原因はこれ⬇️ なんでネイティブマージンでデザインをととのえたのか理由はわからないけど、とりあえずCSSを修正。 (max-width: 767px) { .entry-footer-ad { margin-left: 0; ma…

#CSS#レスポンシブデザイン対応#レスポンシブ#レスポンシブ対応#はてなブログカスタマイズ#テーマ#公式テーマ#レスポンシブデザイン

Askthewind’s diary•9ヶ月前

はてなブログの公式テーマSmoothのサイドバーのアイキャッチ画像を右側にしてみた

↑こんな感じになります↑ レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」のサイドバーのアイキャッチ画像を右側に表示してみました。システム側のblog.cssでアイキャッチ画像をfloat:left;で、左側に寄せているので、float: right;に書き換えて、marginを調整するだけです。 floatを使ってますがシステム側のblog.cssで回り込みの解除(clear fix)はやってくれるので、CSSの記述はこれで良しとします。自分用の備忘録としてCSSのソースコードを残しておく。使う方はお好きなのをデザイン→カスタマイズ→デザインCSS…

#CSS#テーマ#公式テーマ#はてなブログカスタマイズ

あとぢゑ〜る•9ヶ月前

💻グローバルメニューを付けた

グローバルメニューというのをつけてみた。まだ始めて半年も経ってない中身のないブログに必要あるのかという感じだが、今どきのブログはSEO対策でグローバルメニューをつけるように推奨されている。実はWordPressの方でやってるブログの方はいまだにグローバルメニューをつけていない。というか、グローバルメニューの存在を意識していなかった。そもそもどのような効果があるのか仕組もよくわからないままで、とりあえず体裁のためにつけましたというのが本音のところ。ググって、はてな用のグローバルメニューの設置方法を紹介しているブログが多くヒットした。いくつか試してみたが、ことごとくレイアウトが崩れてしまった。調整…

#はてなブログカスタマイズ#CSS#グローバルメニュー

Askthewind’s diary•9ヶ月前

はてなブログの公式テーマEpicをレスポンシブデザインにしてみた

↑上の画像が表示結果だよ↑ ベーシックなデザインで最も利用者の多いオフィシャルテーマ「Epic」。レスポンシブデザインに対応してないのでレスポンシブデザインにするCSSの追加コードを作りました。公式テーマ「Epic」専用のCSSになります。他のレスポンシブデザインに対応してない公式テーマでは使えません。自分用の備忘録としてCSSのソースコードを残しておく。 ↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓ /* EpicをレスポンシブデザインにするCSSコード */ /* Add Responsive design CSS for Theme Epic …

#CSS#レスポンシブ#レスポンシブデザイン対応#レスポンシブ対応#テーマ#公式テーマ#はてなブログカスタマイズ#レスポンシブデザイン

Askthewind’s diary•9ヶ月前

はてなブログの公式テーマEpicのエントリー記事の幅を100px広げてみた

↑上の画像が実行結果だよ↑ ベーシックなデザインがとても美しいオフィシャルテーマ「Epic」の日付部分をタイトルの上に表示してコンテナの幅を広げずにエントリー記事の部分を100px広げてみた。更にシンプルになってこれはこれでかっちょえー笑自分用の備忘録としてCSSのソースコードを残しておく。 ↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓ /* Epicのコンテナの幅を広げずにエントリー記事の幅を100px広げる */ .date { display: inline; position: initial } .date a { display: inlin…

#はてなブログカスタマイズ#CSS#テーマ#公式テーマ#ブログデザイン

Askthewind’s diary•9ヶ月前

はてなブログの公式テーマEpicのサイドバーのアイキャッチ画像にタイトルリンクを重る

↑実行結果だよ↑ ベーシックなデザインが人気のオフィシャルテーマ「Epic」のサイドバーの注目記事と最新記事のアイキャッチ画像にタイトルリンクを重ねて見た。アイキャッチ画像を設定するとタイトルリンクがしりすぼみになるのでアイキャッチ画像にタイトルリンクを重ねたよー。アイキャッチ画像を全ての記事に設定していて日付とカテゴリを表示設定していない場合のみ有効(限定的笑) Epicのリンクカラーを背景色にしてopacityで透過してるんだよ。自分用の備忘録としてCSSのソースコードを残しておく。 /* Epicのサイドバーのアイキャッチ画像にタイトルリンクを重る */ #box2 .hatena…

#はてなブログカスタマイズ#CSS#公式テーマ#テーマ#ブログデザイン