サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
chipspd.hatenadiary.jp
「シルク・ドゥ・ソレイユのトーテム見てきたよ!!」 今回は上の様な画像とテキストを 「シルク・ドゥ・ソレイユのトーテム見てきたよ!!」 ↑このように重ねて表示する方法をご紹介します。 ※テキストがそのままだと見え辛いので、背景に色を付けて文字を白にしています。 画像にテキストを重ねる場合のHTMLとCSS HTMLコード HTMLの解説 全体(画像とテキスト)を「div」で囲んで、上に重ねたい部分(テキスト)を「span」で囲みました。 CSSコード CSSの解説 HTMLコードの「div」部分に「position:relative;」、上に重ねて表示させたい部分(今回の場合は「div」内の「span」部分)に「position:absolute;」がかかるようにします。 「position:absolute;」の下に書いた「bottom:5px;」「left:0px;」は重ねる位置の設定
前の記事ではハンバーガーアイコンの作成方法を紹介しました。 今回は作ったハンバーガーアイコンを利用して、クリックするとメニュー一覧が上から下りてくる「ドロップダウンメニュー(プルダウンメニュー)」をCSSのみで作成してみたので紹介します。 ドロップダウンメニューは上の記事を参考にさせていただきました。 完成品は今のところ、このブログのスマホ用ページのヘッダーで使用しているので、試していただいてどのような動きをするか確認していただければと思います。 ※他に良いグローバルナビが出来たらそちらに変更してしまう場合があるので悪しからず(汗。 HTML コードの上部がハンバーガーアイコンとリンクの部分、「nav id="p-nav1」から下がメニュー一覧部分になります。 ブロック要素をaタグで囲むのは良くないみたいなので、ハンバーガーアイコンにリンクをかけるのに苦戦しました(汗。 「ul~ul」内は
以前、このブログをスマホアプリのクロームで閲覧するとスクロールバーが2重に表示されていたんです。 ↑スマホで閲覧するとこんな感じ。ちょっとわかり辛いと思うので、PC版クロームでスマホページを確認した時の画像を載せると、 ↑完全にスクロールバーが2個表示されているのが分かります。 ただ単にスクロールバーが2個表示されているだけなら問題ないのですが、スマホで閲覧時にスクロールさせようとすると、画面がロックされている感じになってスクロール出来なかったり、動きがカクカクになってしまうという不具合が発生していました。 一応、他のブラウザアプリでも一通り閲覧してみたんですが、このような現象は起こりませんでした。 何が原因なのか色々調べてみた結果、対処法を見つけることが出来たので書いていこうと思います。 原因を調べてみた PC版クロームでスマホページを表示して、デベロッパーツール(Ctrl+Shift+
少し前にね、「カテゴリを階層化させることによってアクセスアップ出来る可能性がある」みたいな記事を読んだんです。 いろんなサイトで目にする、 TOP>親カテゴリ>子カテゴリ みたいなやつです。(パンくずリストって言うらしい) 階層はGoogleにも認識されるみたいですし、このようなナビゲーションがあるとユーザも今どこにいるのかがわかりやすくて便利ですよね。 しかし、はてなブログはデフォルトのままだとカテゴリを階層化出来ないんですよねぇ。 どうにか出来ないかと検索してみたら、はてなブログでカテゴリを階層化するプラグインを作成している方を発見。 やっぱりすごい人がいるんですねぇ。 ということで、このブログでも実践することにしました。 カテゴリの階層化方法 カテゴリ分け まずはブログのカテゴリを階層化できるように作り直します。 ちなみに、今回使用させていただいたプラグインでは「TOP→親カテゴリ→
今回ははてなブログのヘッダー(PC版)に上画像の様なグローバルナビを設置する方法を紹介します。 設置方法 <style> #blog-title{ height:170px; } /*↓グローバルナビCSSここから*/ #sm_nav{ color: #ffffff; width:900px; text-align: center; background-color: #3b63a6; margin-bottom:15px; margin-top:0px; } #sm_nav .category{ padding-right:30px; padding-left:30px; padding-top:5px; line-height: 300%; font-size: 90%; } #sm_nav a{ color: #ffffff; text-decoration: none; word-
いろいろなサイトで見かけるレクタングルを横に2つ設置してるやつ。 巷ではダブルレクタングルと呼ぶらしく、効果抜群らしいです。 私のサイトでも設置してみようと思ったわけなんですが、アドセンスのコードを連続で書いただけでは横ではなく縦に並んでしまいました(汗。 中々簡単にはいかないものですねぇ… 少し試行錯誤してみたらうまく表示できたので、今回はその方法をご紹介していこうと思います。 ※私の知人はアドセンスのコードを連続で書いただけで横並びになったみたいなんで、そのまま書いただけでは横並びにならないよって人の参考になればと思います。 ダブルレクタングルの設置方法 ブログの幅を調節 ブログ本文の幅がレクタングルを2つ並べたサイズよりも小さかったら表示できないので、まずはブログ幅の調節をします。 はてなブログの幅変更に関しては下の記事を参考にしていただけると幸いです。 グーグルアドセンスのレクタン
今回はタイトルの通り、記事本文とサイドバーの幅を変更する方法をご紹介します。 はてなブログの幅の変更方法 具体的には「本文の幅(赤)」「サイドバーの幅(青)」「ブログの幅(黄色)」を変更していきます。 #container { width: 973px; } #main { width: 728px; } #box2 { width: 220px; } 上記のコードをはてなブログの「デザイン」→「デザインCSS」の中に書き込むだけです。 ちょっと解説 「#container」が「ブログの幅(黄色)」 「#main」が「本文の幅(赤)」 「#box2」が「サイドバーの幅(青)」 に対応しています。 「width: ○○px;」の数値を変更することで調節が可能です。 上のコードだと 本文の幅(728px)+サイドバーの幅(220px)=948px となるのですが、本文の幅をぴったり948pxに
どうもこんばんは。 はてなブログのスマホ用ページに「ブログ内検索ボックス」がありますよね。 ↑これです。 これがあると記事探すのに便利なんですよねぇ。 ただね、デフォルトのままだと下の方にありすぎて知っている人じゃないとほとんど使わないですし、置いてある場所が不便だと思うんです。(他の方は知りませんが少なくとも私はそう思ってます) ということで、今回は少しでもユーザーの利便性が上がるように「ブログ内検索ボックス」をページの上部に設置する方法をご紹介していこうと思います。 設置方法 <div class="hatena-module search-box"> <div class="hatena-module-body"> <form class="search-form" name="search" role="search" action="ブログのURLsearch" method="
はてなブログのPC版だとサイドバーにカテゴリを表示できます。 ↑こんな感じで。 一方、はてなブログのスマホ用ページにはカテゴリ一覧がないんですよねぇ。 これでは訪問者が他にどんな記事があるかわからず、一つの記事を読み終えたらすぐに帰ってしまいそう。 ということで、少しでもユーザの利便性が上がるようにスマホ用ページにカテゴリ一覧を設置することにしました。 カテゴリ一覧のデザインと設置場所 カテゴリを設置するにあたって最初に考えたのが、「どこに設置する??」ということ。 これは自分があったら便利だなと思うヘッダーとフッターの2ヶ所にすることに。 次に「どんなデザインで??」ということ。 デザインの参考にと検索してみるとこんな感じの記事を発見しました。 関連: はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2 はてなブログのスマートフォン版にカテゴリー選択の
今回ははてなブログの記事タイトル下のカテゴリリンクのデザイン変更方法をご紹介していこうと思います。 上画像の赤い○で囲んだ部分です。 これはスマホ用ページのものなんですが、今回はPCページも同じデザインにしてみました。 カテゴリデザイン変更方法 <style> .categories { font-weight:bold; background: #444B99;/*カテゴリの背景色*/ padding: 5px 10px;/*カテゴリ文字のまわりのスペース*/ } .categories a { color:#ffffff; /*カテゴリリンクの文字色*/ } </style> 「background」「padding」「color」はお好みで変更してください。 あとは「font-size」で文字のサイズ変更してもいいんじゃないかなと思います。 上のソースを「はてなブログ管理画面」→「設
先日、ブログを私の見てくださっている方から、「読者登録させていただきたいのですが、ボタンがありません」というコメントをいただきました。 はてなブログはデフォルトのままだとヘッダ部分とページの下の方に「読者になる」ボタンが設置されているのですが、当ブログではヘッダとページ下部のプロフィール等も非表示にしています。 だってあれ邪魔なんだもん…(汗。 どうにか、上記のものを非表示にしたまま「読者になる」ボタンを設置できないものかと検索したところ、その方法が書いてある記事を発見。 関連:はてなブログカスタマイズスマホ版でPVが絶対アップするおすすめ - うさもふ うさもふさんありがとうございます。 というか、以前に私が書いた記事を紹介してくれている。 これはかなり嬉しいです(^^) 「読者になる」の設置方法 上の記事を参考に「読者になる」ボタンを設置していきます。 <a href="http://
はてなブログ管理画面の「デザイン」→「カスタマイズ(スパナみたいなやつ)」→「記事」→「記事下」の中にアドセンスのコードを貼り付けると記事下に一括でアドセンスを設置できるんですが、これだとアドセンスはソーシャルボタンの下に表示されてしまいます。 ↑こんな感じ。 こうじゃなくて本当に記事本文の直下、即ちソーシャルボタンの上に表示させたい。という方は少なからずいるのではないでしょうか。 記事一つ一つにアドセンスコードを貼り付ければ記事直下に表示できるのですが、それは面倒ですよね。 そんな方のために今回は、はてなブログの記事本文のすぐ下にアドセンスを一括で設置する方法をご紹介します。 設置方法 <div id="my-footer"> ※ここにアドセンスのコード貼り付け </div> <script> var myFooter=document.getElementById("my-footer
どうもこんばんは☆ 私は自分のブログ向上の為に他のブログを見ることが多いのですが、画面右下にトップへ戻るボタンが付いているブログを良く見かけます。 ↑こんなヤツです。今見ているこのページにも付いていると思います。 スクロールしても画面右下に固定で出てきて、これをクリック(スマホの場合はタップ)すると一発でページの先頭に戻れる優れもの。 とても便利なので私のブログにも設置したいと思い設置方法を検索しました。 スクリプトとかCSSとかあまり良くわからないので、色々な記事を参考にしながら試行錯誤してみた結果、理想に近いもの出来ましたよ!! ということで、今回は私が行ったはてなブログでの「トップへ戻る」ボタンの設置方法を紹介していこうと思います。 参考にしたサイト: jQueryでスクロールすると表示する系いろいろ | webOpixel トップへ戻るボタン設置方法 ①HTMLの記述 <p id=
こんばんは。 突然ですが、はてなブログのスマートフォン用ページの下の方に「プロフィール」とか「はてなブログを始めよう」とか「はてなブログ開発ブログ等のリンク」とかがありますよね?? ↑これです。 プロフィールはまだいいとしても、はてなブログへのリンクは必要ないんじゃないの??って思うんです。 ですので、これらを非表示にしようと考えました。 でね、ネットで検索して探してみたんですけど、これらを非表示にする方法が書いてある記事が見つからなかったんです。 仕方がないので、ページのソースを見て試行錯誤しながら頑張りました。 結果が↓です。 <style> .hatena-module-title{display:none;} .profile-wrapper{display:none;} /*↑プロフィールの非表示*/ .footer-action-wrapper{display:none;} /
このページを最初にブックマークしてみませんか?
『chipspd.hatenadiary.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く