【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
CSS3で組む、可変する枠 | Maromaro Blog
皆さんこんにちは。Maromaroの阿川です。 もうすぐクリスマスですね。プレゼントの準備はできましたでしょうか？ 私のオススメはブックカバーです！こちらの【https://covers.holiday/】ブックカバーがおしゃれでプレゼントにぴったりですよ！│ω・）ﾁﾗﾁﾗ） さて今回のお話は「リキッドレイアウトで可変する枠」についてです。ブラウザが横や縦に伸びる場合、背景としてひいている枠はどうコーディングしていくのでしょうか？ はじめてコーディングをしたとき、悩んだ個所だったのでその方法をご紹介しようと思います。 例えばこんなデザインの時…… 枠が四つ角にある時、すべてを画像で切り出してしまうと文字サイズを大きくしたときはみ出してしまいます。 「枠内に綺麗に収まっててほしい…！」という場合はどういった対処法をするのが良いのでしょうか？今回は縦に可変・横に可変・縦横に可変の3パターンを紹
ブログカード風アフィリエイトリンクCSSを作ってみた - 攻めは飛車角銀桂守りは金銀三枚
2016 - 11 - 16 ブログカード風アフィリエイトリンクCSSを作ってみた はてな スポンサーリンク シェアする Twitter Google+ Pocket ちょっと「バナーどん！！」とか「テキストリンクそっと」とかでは芸がないのでブログカード風アフィリエイトリンクCSSを作ってみました。 ブログカード風アフィリエイトリンクCSS 作ったCSSは以下のもの。 .ad_box{ width : 95% ; margin : 10px ; padding : 10px ; border : dashed 1px #0000ff ; } .ad_box br { display : none ; } .ad_title : before { content : " \f046 " ; font-family : FontAwesome; top : 8px ; line-height
アフィリエイト商品リンクをそれっぽく貼れるデザインスタイルを作ったので公開 - プログラミングとデザイン、スタートアップの話
Amazonや楽天などはカエレバのようなアフィリエイト商品リンクをお洒落に見やすくするツールが存在するのですが、 A8やアクセストレードのようなアフィリエイトASPや、アフィリエイトじゃない普通の公式サイトへの紹介リンクなどのスタイルを綺麗にしてくれるものがあまりなかったため、自分で作ったので公開します。 HTML CSS 今後もアイテムパーツ公開してきます ■これからWordpressでサイトを作るなら ▽レンタルサーバー ▽ドメイン取得 ■あなたにオススメの記事 大したものではないのですが、もし私と同じように「商品リンクをそれっぽくはりたい」と思っている方がいれば使ってください。 こんな感じで貼れるようになります（下のやつはスクショです。育毛系のアフィをやってることがバレますね）。 ■PCの場合 ■スマホの場合 カード型のデザインで、どんなアフィリエイトサイトでも問題なく溶け込めるよう
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズ PC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ
ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く
この記事には広告を含む場合があります。 記事内で紹介する商品の購入やアプリをダウンロードすることで、当サイトに売り上げの一部が還元されることがあります。 当ブログは2014年11月に開設しておりかれこれ5年目。なんとか生き残っています。その間右肩上がりでPVが爆増したこともあれば、様々な環境の変化に耐えてきたこともあります。 多くの先人の知恵を借りつつ私が取り組んできたブログのアクセスアップ、マネタイズの方法をこれまでいくつか書いてきたんですが、情報のアップデートも兼ねてまるっとまとめていきます。 そもそもブログは稼げるのか？私がブログを始めた2014年から2016年ごろは今思うとイージーゲームで今思うと「ブログで簡単に稼げる」という時期でした。私もその恩恵を受けまくりましたが2019年現在かなり難易度が高くなっています。 しかし、それでも私がブログを続けてる理由は副業としてここまで優秀な
はてなブログの目次機能をデザインカスタマイズして使ってみた。これで長文記事ならではの途中離脱を、未然に防ぐことができるようになりそうです。 - SONOTA
photo by Debbs. 2015年から利用できるようになっていたはてなブログの公式目次機能。 記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ この機能をデフォルトのままで利用しようとすると、とんでもなく長く、且つ見難いものになってしまう…という弊害があったため、今まではなかなか使いはじめることが出来なかったんですよね。 しかし、私が運営しているクレジットカードの読みものでも徐々に長文記事が増え、探したい情報がすぐに見つからない状況が出てきたので、今回、やっと重い腰をあげて導入してみることにしました。 参考にしたのはYukihyさんのところ： 目次部分のデザインカスタマイズにおいて参考にしたのは下記記事。 はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life こちらに掲載されている情
格安スマホを子供に持たせよう計画 (1)〜格安スマホを子供用にカスタマイズする方法〜 - がんばるブラザーズ
(注) アンパンマンのスマホはおもちゃです 実はこの4月で今使っているiPhoneの2年縛りが解けます。それにともなってMNPで他社に乗り換えることを検討していたのですが、思い切ってずっと気になってた格安スマホにしようかなと考えています。 普段づかいのスマホはiPhoneじゃなくても構わない 安い 縛られたくない この辺が主な理由。今使ってる5sもまだまだ使えるし、どうしてもというならiPod touchを買えばいいかなと。 で、今のところ一番有力な候補が「FREETEL Priori3S LTE」 FTJ152B-Priori3S-WH [FREETEL Priori3S LTE パールホワイト]posted with カエレバ FREETEL Amazon楽天市場 格安スマホいけるかも！と思ったのは「きらっとライフ」さんのこの記事がきっかけでした。 kiratto-life.haten
はてなブログ、スマホ版カスタマイズ① 見出装飾・フォントサイズ変更 - 気ままに殴り書き
2015 - 07 - 20 はてなブログ、スマホ版カスタマイズ① 見出装飾・フォントサイズ変更 ブログ運営 「FC2ブログ」も同様でしたが「はてなブログ」においても、スマホ版の初期設定ではメリハリがない、本文のフォントサイズが小さく私のような老眼世代には読みづらい、ことがあげられると思います。そこで、諸先般の方々の真似・HTMLはコピーですが、私のように初心者にもお手軽にできる変更を施してみました。行ったことは、以下の2つです。 フォントサイズを大きくする 見出しにメリハリをつける まずは変更のBefore & Afterです。 ▼変更前。「見たまま編集」にて中見出しとしましたが、見出しが太文字になったのみで、メリハリがない。ここはもう少し強調したい。 ▼変更後。見出しを強調し、フォントサイズを15ptに変更。フォントサイズは変更前後と変化がない？ ▼フォントサイズが変更されることを確
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - LITERALLY
はてなブログのスマホ表示時のデザインはカスタマイズが面倒で、ほぼ全てのブログが同じデザインで個性が出しにくいのが特徴だ。簡単に変更できる部分は、ページ上部のアイコン画像ぐらい。 先日、その単調なはてなブログのスマホ向けデザインをカスタマイズしまくってみた。今回は備忘録がてら、その方法と「簡単にはてなブログのスマホ表示デザインをオシャレにするいくつかのテクニック」を記録してみようと思う。 はてなブログのモバイル（スマホ）デザインCSSを編集する方法 まず、ここがあまりネットで探してもなかなか見つからなかった。はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボックスはない。そのため、レスポンシブデザインのテーマを設定しない限り、スマホのデザインはカスタマイズできないんだと諦めている人も多いかもしれない。 ぼくもスマホのデザインをなんとか変えることができないが試
はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） - LITERALLY
以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。 はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。 「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し
はてなブログの設定で「関連記事」が設定出来るようになっていた！ - Love＆Peace
デザインの編集をしていた時のこと。サイドバーの設定のところに「関連記事」を投入するボタンが！！いままではなかったのに、いつの間に！？って感じです。 読んでいる記事と同じカテゴリーの記事が、サイドバーに自動で現れるように出来るって事ですね。きっとみんなが望んでいた事なんで、これは使えるなぁととても嬉しくなりました。 ダッシュボード＞デザイン＞カスタマイズ＞サイドバー＞＋モジュールの追加＞関連記事。 これで設定完了です！念のため、スクショを載せておきます。 いつの間に！？って感じでした。これがサイドバーじゃなく、記事下に投入出来ればいいのですが、やり方は模索中。もし分かる人いたら、教えて下さい～！！クロームの要素の検証すれば、出来そうな気はしますが(^^;
はてなブログのスマホ版に1分でカテゴリ一覧を追加する方法
はてなブログのスマホ版ってカテゴリ一覧の表示が無いですよね。そこで、だれでもかんたんに1分もかからずにカテゴリーを追加する方法をご紹介します。 自分のブログのHTMLソースコードを表示 自分のブログで右クリックを押してHTMLのソースコードを表示しましょう。 そうするとなんかいろいろ訳の分からないテキストがでてくるので『Ctrl+F』で以下文字から該当箇所を検索。カテゴリーで検索すればだいたい一発ででてきます。 <div class="hatena-module hatena-module-category"> <div class="hatena-module-title"> カテゴリー </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> ※ここにカテゴリ一覧がある例として1つ掲載※ <li> <a hr
自分のブログ確認してますか？～スマホ・PCチェック編～ - Love＆Peace
はじめに 私はPCでのブログ更新を終えてから、スマホでの見え方をチェックしています。それは最近やり始めた事です。今までは公開する前に、プレビューだけでチェックして終わりでした。しかしスマホでの見え方までは、チェックしていなかったので様々な発見があったのです。 スマホ版に読者登録のボタンがなかった これ致命的ですよね・・・。「読者を増やしたい！」という希望があってもボタンが無かったら元も子もないです（汗）不要なものを削除する為のカスタマイズをしたは良いけど、まさか読者ボタンがなくなっていた！なんて気が付いてなかったんですw 気づいてなくって、１ヶ月が経とうとしている所でした。最近は、スマートニュースにも載る様になったのでほとんどがスマホからの集客なのです。だからこそ、このボタンがついてないとまずいじゃん！と思ったのでした。 改善策として、読者登録ボタンを２つ設置しました。 ２つ目のは、下段の
はてなブログを始めるときに、まずやるべき9つのこと（はてなブログの使い方・初期設定） - ニッチブログ
「ブログを始めてみよう！はてなでやってみるか」と思った時に役立つまとめを書いておこうと思い立ちまして。 はてな以外でも新しくブログ立ち上げるときに役立つと思います。「あれ、何やっとけばいいんだっけ？」ってなったときに。また、すでにブログを開始している方も、意外なところに抜けがあるかもしれません。（私はありました。） ここでは、思い立ったときから自由に記事を書けるようになるまで、後々のアクセスアップを見越した設定がとりあえず終わるように書いておきました。全部やっておけば、あとは記事を書くのにだいぶ専念できると思います。 目次 目次 まず、はてなID登録をしよう URLを決めよう 基本的な操作を覚えよう 基本設定をしよう 詳細設定をしよう デザインを変えよう プロフィールを設定しよう グループを設定しよう 最低限のカスタマイズをしておこう おわりに まず、はてなID登録をしよう まずこちらのペ
【はてなブログ】ちゃんとスマホ対応しないとお客さん素通りしていくぞ！ - きりんの自由研究
きりんの自由研究ではブログを使って何かしたいと思っている人のために、ブログ運営してて気づいたTIPSも公開していきます。 その中でも今回は、はてなブログのスマホ対応について書きます。 はてなブログを使っている人は、バズった時お客さんが素通りしていくので、ちゃんとスマホ対応しておかないとヤバいです。 はてなブックマーク発で記事がバズるとほとんどモバイル経由になる これはある日のこのブログのGoogle Analyticsのリアルタイム状況です。注目すべきは丸で囲んでいる所。PC/モバイル比率と、アクセス元です。Gnousy/smartnews経由の流入がメインになり、携帯電話比率がPCを超えます。 最近いくつか、はてブ経由での流入を狙った記事を幾つか書いています。これとか↓ この時は男女共に興味のあるテーマだったので、Smartnews/Gnousyから同時に大きく取り扱われました。 リアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance
Site is undergoing maintenance
Site is undergoing maintenance