サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
kikicom.hatenadiary.jp
はてなブログ[キキコム]のデザインを変更しました、KiKi(@kiki_ro_ck)です。 ブログを続けるモチベーションに「ブログのデザイン」って絶対必要だと思ってます! この記事では備忘録もかねて、デザインを変更した箇所をまとめました。 たぶん細かい部分はちょくちょくいじっていくと思うのでご了承ください☆ ※CSSを変更する時は先にバックアップを取っておきましょう☆ PCデザインのカスタマイズ 記事一覧ページの本文冒頭部分を消す ブログのカラーをピンク系から青系へ 配色パターンの選び方 参考にしたブログ・サイト フォント設定 ブログタイトルのフォント グーグルフォントの導入方法 ドロップダウンメニューを設置 カテゴリーの階層化 サイドバーのフォローボタン シェアボタン 見出し・リスト・ボックスのデザイン カエレバ・ヨメレバのデザイン 目次の表示/非表示ボタン サイドバーの目次を追尾させる
こんにちは、KiKiです。 今回はHTMLを使ったブログ記事を読みやすくする方法をご紹介しようと思います。 上記みたいな感じのです。ただし、使いすぎると逆に見にくくなるので!全体的なバランスを見ながら使ってみてください。 無料版はてなブログでも、記事内のHTMLならスマホ表示に反映すると思います。※見たまま編集モードの「HTML編集」じゃないと反映しないようです。 それではいってみましょう。 文字の色を変える まずは基本から。見たまま編集では簡単に、色をかえたい文字をドラッグで選択→上記にある色選択から色を指定すると、文字色をかえることができます。 既存の設定だと配色が30色だけなので、他の色に変えたいときは「HTML編集」からカラーコードを入力して変えてみましょう。 コピペはHTML編集へ <span style="color : #ff5252 ; ">文字色を変える</span> カ
リストアイコンのデザインをカスタマイズしてみました。KiKi(@kiki_ro_ck)です。 CSSは自分で考えたわけではなく、他の方が紹介しているCSSを参考に、はてなブログ仕様に書き換えただけです。あしからず。 はてなブログ用に書き換えたコード、カスタマイズの参考になれば幸いです。 追記 2016/12/19:気分でコロコロと変えています。現在のコピペコードも下の方で紹介しています。 追記 2018/1/14:いろいろ変えているので、リアルタイムのリスト紹介はやめることにしました。気になる方はお気軽に聞いてください。 リストアイコンとは カスタマイズしたリストアイコン 参考にさせていただいたのはNxWorldさん はてなブログのCSSをカスタマイズする場所 コピペするCSSコード 書き加えるCSSコード コピペしたい方はこちらから 追記:ダイヤのマークにする 色の参考サイト おわりに
ブログのカスタマイズにハマっています、KiKi(@kiki_ro_ck)です。 恥ずかしながらグーグルフォント、いや「Webフォント自体」を初めて知ったんですが、サーバーからフォントが読み込めるそうですね☆ 今まで、日本語Webフォントのほとんどが有料だったんですけど、Googleが無料配信しているGoogle Noto Fontsの日本語フォント[ Noto Sans CJK JP ]を見つけました。 はてなブログへの導入方法をシェアしたいと思います。 ※CSSを変更する際は、必ずバックアップをとりましょう。 導入したのはNoto Sans CJK JP Googleフォントの導入はEarly Accessを使う link要素で外部ファイルを読み込む方法 使いたいところへfont-familyを指定する Webフォントのメリット、デメリットを考える Webフォントのメリット Webフォン
無料はてなブログを始めて15日が経ちました!まだまだProへの道のりは遠いけど、カスタマイズを始めてみたら、これがすんごく楽しい~♪ もちろんhtmlやcssなどの難しいことはさっぱりわからないので、自分への備忘録もかねて、参考にした記事やサイトをまとめてみました。 今までデザインのテンプレートを変えるだけで満足していましたが、こうしたいな~、こうなればいいのにな~と思っていたことが叶うってすごいですね。cssって何?魔法? 見出し(タイトル)のデザインを変える まず最初にカスタマイズしたのはこの↑大見出しのデザインです。サイトにあるcssの部分をコピーして、カスタマイズ画面の{}デザインCSSをクリックして貼りつけるだけ。そのあと一手間加えるけど、簡単に変えられます。 見出しデザインを紹介しているブログ2撰 わたしはこの素晴らしい2記事があればもう何もいりません。 ↑ 貼りつけた後に「h
このページを最初にブックマークしてみませんか?
『kikicom.hatenadiary.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く