チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

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

CSSのみで背景透過のハンバーガーアイコンを作ってみました

以前、CSSのみでハンバーガーアイコンを作成したという記事を書きました。 これは枠ありで背景色を自分で変えることが出来るというものでした。 今回は上の画像のように枠を無くして背景を透明にし、どんな背景色や背景画像の上に表示しても馴染むようなもの…

【はてなブログ】スマホ用ページのヘッダーにアイコンや画像を重ねて表示させる方法

今回ははてなブログスマートフォン用ページのヘッダーにアイコンや画像等を重ねて表示させる方法をご紹介します。 これを応用すればナビゲーション・読者登録・SNS等のアイコンをヘッダーの好きな位置に表示させることが出来るようになるのでかなり便利^^

CSSのみでヘッダ用のドロップダウンメニューを作成してみた

前の記事ではハンバーガーアイコンの作成方法を紹介しました。 今回は作ったハンバーガーアイコンを利用して、クリックするとメニュー一覧が上から下りてくる「ドロップダウンメニュー(プルダウンメニュー)」をCSSのみで作成してみたので紹介します。

CSSでハンバーガーアイコンを作ってみた|ハンバーガーボタンの作り方解説

ハンバーガーアイコンとは上画の様なボタンのことで、ボタンを押すとメニューや設定画面と等が開きます。 スマホ用のサイトとかで良く見かけるようになりましたね。 今回はハンバーガーアイコンをCSSを使って作ってみたので紹介します。※今回紹介するのはハ…

【はてなブログ】本文とサイドバーの間に仕切り線を入れる

今回は本文とサイドバーの間に仕切り線(上画像の赤枠部分)を表示させる方法をご紹介します。 方法としては「記事本文の右側に線を表示」「サイドバーの左側に線を表示」の2パターンがあるので、この2つの表示方法と違いを書いていきます。

【はてなブログ】スマホ版Chromeで閲覧するとスクロールバーが2個表示されてしまう時の対処法

スマホアプリのChromeでスクロールバーが2重に表示されてしまった場合の対処法をご紹介します。

【はてなブログ】スマホ用ページで横スクロール出来るカテゴリ一覧を作ってみました

スマホページ用に横スクロール出来る画像付きカテゴリ一覧を作成しました。 設置方法のご紹介。

【はてなブログ】PC版ヘッダー画像が切れてしまう場合の対処法

はてなブログのPC版ヘッダー画像を設定した時に、画像が切れてしまってうまくいかない時の対処法を載せてます。

【はてなブログ】スマホページで横スクロールするグローバルナビを設置

はてなブログのスマホ用ページで横スクロールできるグローバルナビの設置方法を紹介します。

【はてなブログ】はてな記法で自動改行を無効にする方法

はてなブログのはてな記法で自動改行を無効にする方法と注意点を紹介しています。

【はてなブログ】ソーシャルボタンのデザインを変更しました

ツイートボタンの公式カウンタが廃止されたので、ソーシャルボタンのデザインを変えることにしました。

【はてなブログ】直帰率を改善させるためにおこなったカスタマイズ

はてなブログで直帰率の改善に貢献してくれた3つのカスタマイズを紹介します。

【はてなブログ】ブログ(PC版)のヘッダーにグローバルナビを設置する方法

はてなブログのヘッダにグローバルナビを設置してみたので、設置方法をご紹介します

【はてなブログ】アドセンスの2個のレクタングルを横に並べる方法|ダブルレクタングルの設置

はてなブログでのダブルレクタングル(レクタングル横並び)の設置方法をご紹介。

【はてなブログ】記事本文とサイドバーの幅の変更(調節)方法

はてなブログで「ブログ幅」「記事本文の幅」「サイドバーの幅」を自由に変更する方法をご紹介。

【はてなブログ】パンくずリストを表示させてカテゴリを階層化してみました

はてなブログでパンくずリストを表示してみたのでご報告です。

【はてなブログ】関連記事を表示させたことで直帰率が改善されたよ

はてなブログの記事下に「あわせて読みたい」プラグインを設置することで、直帰率が改善されたので報告します。

【はてなブログ】「外部サービス連携」を無効にしたままTwitterカードに対応させる方法

はてなブログで「外部サービス連携」を無効にしたままTwitterカードに対応させる方法をご紹介。 一つ一つのブログに対して個別のTwitterアカウントに連携させる場合におすすめです。

【はてなブログ】記事下に「関連記事」を表示させました|「あわせて読みたい」の設置

直帰率を改善させる為、はてなブログの記事下に「関連記事」を表示させました。

【はてなブログ】「読者になる」リンク(ボタン)を設置する方法

はてなブログで読者になるボタンを設置する方法をご紹介しています。

【はてなブログ】スマホ用のページにカテゴリ一覧を設置してみた

はてなブログのスマホ用のページにカテゴリ一覧を設置して直帰率の改善を図る。

【はてなブログ】「続きを読む」を画像にしてカスタマイズしてみました

はてなブログの「続きを読む」リンクを画像に変更する方法をご紹介します。

【はてなブログ】タイトル下に表示されるカテゴリのデザインを変更してみた

はてなブログでのタイトル下に表示されるカテゴリのデザインを変更の変更方法をご紹介。

【はてなブログ】スマホ用ヘッダーをオリジナルのサイズで設置する方法

↑以前までのスマホページのヘッダーはこんな感じ。 これははてなブログのスマホページのヘッダーから変更したものです。

【はてなブログ】記事本文の直下にアドセンスを設置する方法

はてなブログで記事本文の直下(ソーシャルボタン等の上)に一括でアドセンスを設置する方法をご紹介。

ブログに簡単にスマホアプリのリンクを設置する方法|ブックマークレットを使用

chromeのブックマークレットを利用してマーケット(プレイストア)からスマホアプリのリンクを簡単に設置する方法をご紹介します。

【はてなブログ】見出しのデザインを変えてみる|スマホ用ページにも対応

はてなブログの見出しデザインを変えてみました。 スマホ用ページも変更可能です。

【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法

はてなブログで「ブログ内検索ボックス」をスマホ用ページの上部に表示させる方法をご紹介

はてなブログのスマホアプリが出たので使ってみた感想

どうもこんばんは☆ 昨日のことなんですが、 はてなからメールがありました。 内容ははてなブログのスマホアプリが出たとのこと。 今までスマホからの記事作成がとても面倒だったので、嬉しい限りです(^^) ということで早速使ってみようと思いインストール。

はてなブログに「トップへ戻る」ボタンを設置してみました|スマホページ、PCページどちらにも対応してます

はてなブログに「トップへ戻る」ボタンを設置してみました。 スマホ用ページ、PC用ページどちらにも対応してます。

PAGE TOP