こんにちは。シンプルライフ ナビです。 この記事では、ブログの記事に蛍光ペン風のアンダーライン（下線）を引く方法をご紹介します。簡単ですよ！ 好きな色、好きなデザインの下線を作って、あなたのブログにも取り入れてみましょう！ 記事中の「CSSコード」や「HTMLコード」をコピペして（無料版でも）使うこともできます。*1 ブログの記事本文でアンダーライン（下線）を引く方法 はてなブログ標準のアンダーライン（下線） 蛍光ペン風のアンダーライン（下線） 蛍光ペン風のアンダーライン（下線）を使えるように設定する｜コードのコピペ利用もOK ブログ全体に共通の蛍光ペンのアンダーラインを使えるようにする 記事ごとに蛍光ペンのアンダーラインを設定する（CSS不要。超初心者向き） 蛍光ペンの色や太さのカスタマイズや多色展開の方法 蛍光ペンのアンダーラインの色や太さをカスタマイズする方法 アンダーライン（下線）

こんにちは。シンプルライフナビです🌱 今回はブログの記事本文をデザインして、簡単に、わかりやすくなるよう囲み記事にしたり、背景色をつけたりする方法などをご紹介します。 この記事はこんな方におすすめ ブログの記事の本文で、囲み枠や背景色をつけて記事本文の一部を強調するなどのカスタマイズを、簡単にしてみたいとお考えの方 この記事では、記事本文を簡単にデザインし、一度コピペ*1して登録すれば、二度目からは時短化して何度でも利用できる方法をご紹介します。 わたし個人の備忘録も兼ねて記事化しましたのでご覧ください*2。ご紹介しているコードは、はてなブログ以外でも使えると思います。 はてなブログの記事本文の簡単カスタマイズ方法 簡単に記事本文の背景色を設定する方法 簡単に記事本文の一部に囲み枠を設定する方法 定型文貼り付け機能を使うと、簡単、便利！ はてなブログの記事作成画面の定型文を登録する方法

どうも！フジグチです！ 今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。 以前Cappuccinoで（Neumorphismでも）使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタマイズを紹介したいと思います。 ヘッダー下におすすめ記事を設置することで回遊性が良くなり、ユーザーがサイト内を巡回しやすくなるのでPV数の向上にもつながります。 おすすめの「記事」に限らず、カテゴリやまとめページを設置することで、よりユーザーに適したコンテンツを提供することも出来ます。 今回紹介するカスタマイズはHTMLが苦手な方や初心者の方でも、簡単に導入できるようにしています。 以下に、今回の記事の特徴を挙げます。 この記事の特徴 入力が簡単 使用する画像のアスペクト比に合わせてCSSを変えられる レスポンシブで画像サイズが違っ

ブログの何かを無性に変えたくなっています。 吹き出しのイラストとかをね。 会話風の吹き出しをいい感じに使いたいような気もします。しかし、現在のは片方からのみなんですよね～ CSSだわ･･困ったわ。手が出ないかも･･ じゃあ、イラストでも何とかしようかな･･･ ところで私のブログで、たまに出てくるコイツは無料素材です。 コイツって言ったね(怒) 初代は私ですけど･･･出番なし(泣) 「自作したいな～」 現在、パソコンがあまり使えません。 アプリの手軽さが好きなのでアプリで練習してみました( °∇^)］ 練習中なので何も考えずに取り敢えず書いてみたよ～ 歩いて消えて足から戻ってきているという･･･なんでしょうね？ 腕は線ですね(;ﾟ∇ﾟ) 吹き出しにしたら、こんな感じです。 小さいですね。アイコンにするなら大きめに書かなくちゃダメみたい( ´Д｀) 失敗なのね～ ↑定番の動きで走っている･･･

皆様、こんにちは。 この話題については既に議論は行われている内容となりますが、補足事項などがありますので改めてまとめさせていただきました。 はてなブログでブログを書いている方向けのエントリーとなります。 はてなブログの大見出しh3問題 jQueryで動的に書き換える方法 留意事項 h3タグに要素を追加している場合 トップページの装飾も変えたい場合 Adsenseの文中配置を行っている場合 SEO効果について まとめ はてなブログの大見出しh3問題 はてなブログで大見出しを選択するとHTMLのタグとしては<h3>が挿入され、それがSEO的にも悪い影響を及ぼしているのでは？という問題があります。 このあたりの議論については既に他の方が多数解説していただいていますので貼っておきます。 hatena.aaafrog.com www.pojihiguma.com 一応、わかりやすく画像で示すとこんな

はてなブログのテーマ「Minimalism」のカスタマイズまとめ こちらがはてなブログのテーマ「Minimalism」で作成したトップページです。 トップページ おこなったカスタマイズを、早速紹介していきます。 Minimalismのスマホ版で太字が表示されない問題を解決するCSS Minimalismをお使いの方で、スマホで太字が表示されていないことにお悩みの方は、ぜひ参考にしてもらえたら嬉しいです。 意外とスマホで太字が表示されていないことに気付いていない方もいます。 Minimalismのみの現象かと考えていますが、ブログの閲覧ユーザーはほとんどモバイル端末からなので直しておいた方が良いです。 太字のない文章は、単調になり読みづらいので。

こんにちは！sakuです！ ご訪問ありがとうございます。 今回は最近行ったカスタマイズと参考サイトについて覚書として記述したいと思います。 シェアボタン変更 オシャレでかっこいいシェアボタンにしてみました！ ▼こちらを参考にさせて頂きました！ www.notitle-weblog.com プレビューにしながら作成していたのですが、facebookとGoogle̟+とPocketのアイコンがきちんと表示されませんでした。。。 www.lazypolarbear.com をヒントに、FontAwesomeのアイコンシートからコードをコピーしなおして同じところに貼り付けて修正したらできました。 FontAwesomeが消えてしまう 記事中にアイコンをいれるとプレビューしても表示されない問題も生じました。 これについては はてなブログでFontAwesomeが使えないときの対処法 を参考に実践した

※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。 ※追記あり：デザインのアップデートについて+ 元のデザインに戻す方法 当ブログ「ひつじの雑記帳」を開設して間もなく、フラットデザイン風のおしゃれな自作テーマ「Codomisu Flat」を公開しました。 レイアウト的に少し扱いにくいテーマでしたが、思っていたよりたくさんの方に使ってもらえました。 力こそパワー　+ログ　ゼロから始めるビットコイン さんなど特におしゃれにカスタマイズされているので是非見てみてください。 あれから約2ヵ月経った今、オリジナルのはてなブログテーマ第二弾「Minimalism」を公開しました！ Minimalism（ミニマリズム）の特徴 このテーマは、テーマ名「Minimalism」にある通り、デザインは最小限のみに抑えてあり、「美」をとことん追求しました。 こどみすフラットとは

こんにちは。アラフォーママのあやぞうです。 よく見かけるこんな吹き出しを使った会話形式のブログ。 みなさんも使ってみたいと思ったことありませんか？ 難しそうな気がして敬遠してたけど、実際に設定してみたらこれが意外と簡単！ こんなにすぐに出来るならもっと早くやっとけばよかった(;^ω^) ということで、今回はこの「会話形式の吹き出しが使えるようになるカスタマイズ方法」をご紹介します。 吹き出しで会話形式にするカスタマイズ方法 今回のカスタマイズはこちらの記事を参考にさせていただきました。 www.notitle-weblog.com Google chromeの拡張機能を使った方法が主に紹介されていましたが、私はchromeの拡張機能を使わない方法で設定しました。 特に理由はないんですが、会社のPCなのであんまり拡張機能追加しない方がいいかなと思って…。 chrome拡張機能を使ったカスタマ

こんにちは。今日は文中で言葉を強調したいときに使う蛍光ペンをマスターしますよ。 これで私のブログもおしゃれに変身 このラインですね。まるで魔法のようにオシャレなブログになっちゃうわ。これを呼び出す呪文を覚えます。 蛍光ペンでブログをおしゃれにしよう 蛍光ペンでブログをおしゃれにしよう 参考にさせていただきました まずは魔方陣を作る（CSSの設定） 蛍光ペンを呼び出す呪文 使い方の注意 参考にさせていただきました 蛍光マーカーのカスタマイズにあたってこちらのサイトを参考にさせていただきました。ありがとうございます。 saitoumasami.com まずは魔方陣を作る（CSSの設定） 蛍光ペンの呪文を使うために、CSSに魔方陣を作ります。 デザイン→スパナマーク→デザインCSSにコードをはる。 /*太ピンク*/ .pink_line {background:rgba(0, 0, 0, 0)

PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。（はてなブログ以外でも使えます） PCではマウスオーバーするとドロップダウンメニューが表示され、スマートフォンでも2階層目のサブメニューが表示されます。 使用ライブラリ： ドロワーメニュー用のテンプレートを作りました | ザリガニデザインオフィス github.com こちらのザリガニデザインオフィスさんのテンプレートをベースに作らせていただきました。 デモ HTML・JS CSS 【追記】 改良版を作りました。 blog.minimal-green.com デモ出来上がりはこんな感じです。スマートフォンではメニュー項目の他、プロフィール欄やフォローボタンも表示されます。PC非表示フリースペースはアレンジして作り込んでみて下さい。PC版