はてなブログにプログラムを載せていると、記事の幅が狭くてみずらいことがある。。。 なので、デザインからCSSをカスタマイズして、記事の幅を調整してみた!ときの備忘録 もちろん、レスポンシブデザインでPCだけ、幅広な表示に!! ちなみに利用しているテーマはこちら Epic - テーマ ストア こんなかんじにカスタマイズします /* <system section="theme" selected="alpha2"> */ @import "/css/theme/alpha2/alpha2.css"; /* </system> */ /* <system section="background" selected="default"> */ /* default */ /* </system> */ /***** ここから下を追記 ***/ @media screen and (min-wid
本機能は提供を終了しました。 はてなブログでは、記事をAMPで配信することができます。 AMP - a web component framework to easily create user-first web experiencest ブログユーザーにとって、AMPはモバイル環境で速やかに表示され、ブログがより快適に閲覧されるため、多くの人に読まれやすくなることが期待できます。一方で、デザイン上のカスタマイズなど、リッチな表現には制限があります。 AMPの配信設定は、有料プラン「はてなブログPro」に加入しているブログで利用できます。 AMPは開発が進行中のプロジェクトであり、本機能もベータ版として提供されます。AMPの仕組み等をご理解のうえ、ご利用ください。ご不明な点やお気づきのことがあればお問い合わせフォームよりご連絡ください。 はてなブログでAMPを配信する はてなブログPro
はてなブログのAMP対応AMP対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。 設定編はてなブログでAMP対応するのはすごく簡単です! 有料プランの「はてなブログPro」を利用している方が対象ですが、「設定→詳細設定」にある「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて変更するボタンを押したら完了です。 注意事項はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。 はてなブログのデザインテーマは反映されないサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)が配信されないstyle属性(CSS)が反映されない記事中のJavaScriptが反映されないはてなスターが反映されないはてなカウンターは非対応(カウントされない)ざっくり説明すると、
まずは、通常ページ(AMP非対応ページ)とAMP用CSSに見出し部分のCSSを適用した場合の見た目から御覧ください。 ※<h6>は省略しています。 一緒やん! と言われそうですが、一緒ですw 何故かと言うと同じCSSを適用しているからです。 つまり、AMP用CSSに現在使用しているCSS(デザインCSSに書いている)を適用すれば見出し部分は”ほぼ”同じに出来ると思います。 カエレバリンク部分Amazonや楽天等の商品を紹介する際に、非常に便利な「カエレバ」ですが、今ままでのAMPページでは見るも無残な状態でした。 しかし、こちらもAMP用のCSSを適用する事で見やすいデザインに変更することが出来ました。 個人的には、今回のAMP用CSS対応で一番のメリットは「カエレバ」のデザイン部分だと思っていますw AMP用CSSの注意点今回の検証で気になった点をまとめておきます。 ※確証はないのであく
はてなブログではデフォルトで読み込んでいるアイコンフォントがあります。テーマの作成や記事中でこれらを使うこともできるので、どんなものが使えるのかチェックしておくといいでしょう。 クラス名 コード blogicon-hatenablog \f000 blogicon-plus \f001 blogicon-minus \f002 blogicon-reorder \f003 blogicon-grid \f004 blogicon-chevron-left \f005 blogicon-chevron-right \f006 blogicon-chevron-up \f007 blogicon-chevron-down \f008 blogicon-external \f009 blogicon-plugin \f00a blogicon-member \f00b blogicon-acco
はてなブログProにすればデザインcssを変更できる。 私がはてなブログProにしてから今月で2ヶ月目です。Proにアップグレードすることによるメリットはいくつかありますが、ブログのデザインを変更できるというのがその最も大きなものではないかと思います。 デザインを変更することの意味とは もちろん見た目が美しくなります。せっかく自分でブログやるならかっこいいデザインにしたいですよね。記事を書こうというモチベーションにも影響してくると思いますし。 さらに、ブログを見に来てくれる方にとっても親切ですよね。デザインについて考えるということは、同時に使いやすさについても考えることにつながります。 私がやったカスタマイズ 今回はすべてPCサイト版のカスタマイズです。スマホ版については後日アップしようと思います。 1.グローバルメニューの設置 こういうやつですね。 こういったメニューを設置することで、サ
先日、当ブログをはてなブログPRO版に移行しました。 はてな側が貼っているアドセンスやリンクが邪魔っていうのもありますが、早い段階で独自ドメインに移行していた方が何かとメリットがあるので、PRO版に変更しました。 はてなブログ側で用意されている独自ドメインの設定方法とか見ていたのですが、正直分かり辛い・・・ なので、今回は はてなブログをPRO版に移行する 独自ドメインを取得する そのままの勢いで独自ドメインを設定する この流れで紹介します。ボリュームが大きくなってしまいましたが、はてなブログPRO版に変更してすぐに独自ドメインを設定したい人は参考にしてください。 はてなブログのPRO版に移行する これは割と簡単ですね。はてなブログのダッシュボードから『PRO版にアップグレード』を選択します。(場所はダッシュボードのアカウント設定のところ) 1ヶ月コース 1年コース 2年コース の3種類が
「ブログを始めてみよう!はてなでやってみるか」と思った時に役立つまとめを書いておこうと思い立ちまして。 はてな以外でも新しくブログ立ち上げるときに役立つと思います。「あれ、何やっとけばいいんだっけ?」ってなったときに。また、すでにブログを開始している方も、意外なところに抜けがあるかもしれません。(私はありました。) ここでは、思い立ったときから自由に記事を書けるようになるまで、後々のアクセスアップを見越した設定がとりあえず終わるように書いておきました。全部やっておけば、あとは記事を書くのにだいぶ専念できると思います。 目次 目次 まず、はてなID登録をしよう URLを決めよう 基本的な操作を覚えよう 基本設定をしよう 詳細設定をしよう デザインを変えよう プロフィールを設定しよう グループを設定しよう 最低限のカスタマイズをしておこう おわりに まず、はてなID登録をしよう まずこちらのペ
2021年9月1日更新 はてなブログには、初期設定するところがたくさんあります。 どこを変更したらいいかわからないですよね? はてなブログをやり始めたばかり方であればなおさらです。 この記事では、はてなブログのおすすめの初期設定について「画像」と「長編動画」と「ショート動画」で分かりやすく解説しています。 今回は、はてなブログ初心者のかたのために、「初期設定は、このおすすめだけやっておけば大丈夫!」というものを厳選してお伝えします。 きちんとおすすめの初期設定をするだけで、アクセスがめちゃくちゃ上がります。 読者の流出も減ります。 このおすすめの初期設定をやっておかないと損です。 そして、はてなブログで稼ぎたいかた向けに以下2つのおすすめツールの設定の解説動画を撮りました。 Googleアナリティクスの登録と設定 Googleサーチコンソールの登録とサイトマップの送信 2つ合わせても10分
以前ブログのデザインをシンプルにしたいと思い、記事の下にある「はてなID」(アカウント、ニックネーム)を非表示する方法を、はてなサポート窓口に問い合わせて教えて頂きました。(今はそのままはてなIDを表記しています。)その方法のメモです。 ダッシュボードにある設定から行います はてなブログにログインした状態で「ダッシュボード」にアクセスします。はてなIDの非表示の設定を行いたいブログ名の右横にある「設定」(スパナのマーク)をクリックします。 「デザイン」を選択します 上から「設定」、「デザイン」、「アクセス解析」と表示されるので「デザイン」(パレットのマーク)をクリックします。(※左側サイドバーにある「デザイン」からも行えます。) 「カスタマイズ」を選択します 左サイドバー上部の「カスタマイズ」タブ(スパナのマーク)をクリックします。 「デザインCSS」を選択します 表示が切り替わりますので
追記: 2020年最新の情報について 2020年4月23日(木)以降、サブドメインなしでも独自ドメインの運用が可能になりました。 詳しくはこちらをご確認ください。 2020年現在の「独自ドメインの取得・設定方法」および「サブドメインなしの独自ドメインの運用」は、以下の記事で解説しています。 サブドメインを使った独自ドメインを運用を行いたい方は、引き続き本記事をご確認ください。 ◇◇◇ 自分らしいブログにしたい! ブログを開設したなら誰もがそう思うのではないでしょうか。 他の誰でもない、世界に一つしかない自分だけのブログ。自分にしか撮れない写真、自分でしか書けない文章、自分らしさにあふれたデザイン。いろいろな工夫とあわせて設定しておくと、認知力としてグッと効いているのが独自ドメインです。 一度取得したドメイン名は、使えば使い続けるほど価値が高まっていきます。自分をよく表すドメイン名を選択でき
【2021年3月8日更新】 こんにちは、ブログサポート60の石黒です。 2014年から「はてなブログ」を始めた経験から語る、有料版(Pro)の始め方と無料版のメリットデメリットをピックアップしました。 信憑性があると思います。 自己アフィリエイトで、はてなブログ有料版にすることによって、最大1,200円得られる方法も解説しています。 はてなブログ有料版にする作業で1,200円もらえるので、やらないと損です。 動画ではてなブログの有料版と無料版のメリットとデメリットの内容や始め方を知りたい方はこちら↓ ※1年プランで契約後に、途中で他のプランへ変更もできます。 他のコースからこのコースへ変更する場合、現在残っている有効期間が終了した後に上記の金額が決済され、新しいコースへ切り替わります。 30日の無料体験があります。クレジットカードの登録をして、30日後に自動的に料金が発生する仕組みです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く