デザイン
【横スクロール】スマホでスワイプできるおすすめ記事一覧ををコピペで（カルーセル） スマホでよく見る横にスクロールできる記事の一覧。LINEニュースやSmartNewsなどでも見かけますね。つるつると動かしながらコンテンツを見ることができるので非常に便利…
見やすくお洒落なブログのフッターカスタマイズをコピペで ブログのデザインをカスタマイズするとき、面倒なのはプログラミング。見れば見るほどわからなくなり、結局諦めてしまうことも。デザインは読み手が感じる印象におおきく影響するほか、サイト内のほ…
はてなブログのサイドメニュー・サイドバーを固定表示する方法 下まで読んでもついてくるサイドメニューの設定。 WEBサイトを見ていると、下まで見ていったときにもメニューがついてくるサイトがあります。 サイト内で情報を探すにあたり、メニューが常に画…
【コピペOK】はてなブログで関連記事をパネル表示する方法 関連ページをパネルで表示する方法をご紹介。 サイトを運営している方にとって、ページをより多く見てもらうこと、滞在時間をより長くすることは重要な課題かと思います。 多くのページを見ていただ…
【パワーポイントでもできる】ブログのオリジナルデザインヘッダーを作る方法とアイデア 自分だけのヘッダーアイコンを作る方法をご紹介。 自分のサイトを作成したとき、悩みのタネとなるのがヘッダーとアイコン。人目につきやすくサイトの印象を左右するた…
【プログラミング不要】一番簡単にブログに読了時間を表示させる方法 ※クリックで拡大できます。 ブログのカスタマイズを検討するとき、そのうちの１つに読了時間の表示があるかと思います。記事を読むためにかかる時間をあらかじめ提示することで、ページを…
はてなブログで日付部分に時計アイコンを表示する方法 記事ページにたどり着いた閲覧者が最初に見るコンテンツは「ヘッダー」そして「記事のタイトル」です。 はてなブログでは、標準で記事のタイトルに公開日付が表示されるようになっていますが、そこにア…
コピペでスマホ向けアイコンメニューを表示する ※クリックで拡大できます。 このご時世、ブログへの半数以上のアクセスがスマホからになっています。 スマホはPCよりも画面が小さいために、読み終えるまで時間がかかるもの。 途中で疲れて、読むのをやめてし…
// はてなブログのプロフィールアイコンカスタマイズ！ ※クリックで拡大できます。 はてなブログでは既定のデザインレイアウトがあり、何もしないままでは、他のブロガーと全く同じデザインになってしまいます。 ブログはネタで勝負！とは言え、やはり見た目…
// 【画像でわかる】HTMLとCSSの役割 ※クリックで拡大できます 以前、WEBサイトのデザインはHTMLとCSSでできているという記事を書きました。 HTMLがサイトの骨組み、CSSは肉付けです。 今回はイメージつきでCSSがいかに大切か、ということをご紹介したいと思…
【はてなブログコピペ】スマホ対応メニューバーを表示する方法 ※クリックで拡大できます 先日ご紹介したメニューバーを表示する方法、スマホでも対応できる方法をご紹介します！ ↓PCでメニューバーを表示する方法はこちら↓ 【はてなブログ限定】メニューバー…
// 【コピペで簡単】TOPへ戻るボタンを設置する 縦長のサイトを見ているとき、ページの一番上まで戻るのに苦労したことはないでしょうか。 PC画面では画面右にスクロールバーがあるので少し楽ですが、スマホで見ている場合にはそうはいきません。 特にブログ…
// CSSを編集するときの書き方入門 rawpixelによるPixabayからの画像 ブログの見た目を変えたいときにはCSSファイルを編集する、ということを前回ご紹介しました。 ↓前回記事はこちら↓ www.blog.biz-thinking-k.com 今回はCSSを編集する際のお作法について、…
// 初心者向けWEBデザイナー入門ーHTMLとCSSの仕組み 前回記事で、見た目を変えるにはHTMLとCSSそれぞれを変える必要があるというお話をしました。 ↓前回記事はこちら↓ www.blog.biz-thinking-k.com この記事の中では詳しく仕組みをお話ししていなかったので…
【はてなブログ限定】メニューバーを３分で表示する方法 メニューを表示してPVをアップ！ 先日当サイトのタイトル下にメニューバーを表示してみました。 このメニューバー、動きを付けていることもあってか、画面をスタイリッシュにしてくれるだけではなく、…
// 【hoverで簡単】CSSでスタイリッシュな動きをブログに 他の方のブログを見ていると、あるボタンに触ったときに色が変わったり、サイズが変わったりと、動きのあるサイトを見たことがあるかと思います。 動きがついていると印象には残るもの、再訪の機会も…
CSSカスタマイズ時短テクニック【GoogleChromeデベロッパーツール】 前回・前々回に引き続き、CSSでブログをアレンジする方法についてです。 今回はカスタマイズのやり方ではなく、時短テクニックをご紹介します！ はてなブログでCSSをカスタマイズをすると…
//
【コピペOK！】ブログに吹き出しを表示する方法【はてなブログ手順あり】 今回はブログ運営で使える知識です。 主にブログの滞在時間を延ばす効果がある吹き出しを表示する方法をご紹介します。 CSSを編集するので、word pressの方も同じような手順で実装で…
【スマホからのアクセスアップ】レスポンシブ対応CSSでPCとスマホの見た目を変える スマートフォンやタブレットの急速な普及を背景として、パソコンよりも小さな画面からWEBサイトを見る機会は多くなりました。 通勤・通学の時間や、休憩の合間などにスマホ…
// // グラデーションカラーコード一覧 こちらではCSSアレンジ用のカラーコードを一覧にしています。 お好みの色を見つけてください。 こちらは随時更新する予定です。 お気に召したものはメモを控えていただきますよう、お願いいたします。 【汎用】 #00000…
