はてなブックマーク

前々回と前回と続いたAMPの記事も今回で最終回です。 今回ははてなブログのAMP CSSで、実際に使えるCSSをいくつかご紹介します。 といっても、特別難しいことはありません。AMPページを開いてデベロッパーツールなどで見ていただけたら分かりますが、構造自体は簡単にできており、はてなブログが前もって設定しているデフォルトのCSS自体も比較的かんたんに出来ています。 ただ、容量制限の50KB（デフォルトCSSを差し引いて約43KBほど）は超えないように注意してくださいね。 ※はてなブログでAMP CSSを設定する際の注意点など、詳しいことは前回の記事をご参照ください。 （2017年8月27日、追記あり） スポンサーリンク ページ全体のフォントや文字色などを変える 記事本文全体の文字の大きさや行間を変える。 段落の文字の大きさを変える 各見出しの文字の大きさを変える 日付の文字色を変える カテ

先日（2017年5月5日）、はてなブログでAMP用に記事中にGoogle AdSense（アドセンス）をせっせこと設置していたのですが。 そのとき、広告の表示を統一だせる目的で、PCなどの従来の記事用とAMP配信の記事用と2つの広告ユニットのコードを並べて記入していたのですね。 それで表示確認をしたら、なんとその広告ユニット2つともAMP配信での表示テストで表示されていたのです。 どうやら、はてなブログでは従来のアドセンスのコードをAMP専用のコードに自動変換できるようになっているようです。 今回は、このことについて、まとめた記事です。 スポンサーリンク はてなブログで記事中のアドセンスのコードは、AMP形式に自動変換されるようになっています今まで、はてなブログのAMP配信でアドセンスを設置したい場合、AMP専用のアドセンスのコードを作成して、記事中に書き込むという方法しかなかったようです

もうすぐ3月も終わり、新年度が始まろうとしています。新スタートです。 新年度と言えば、そう、はてなブログユーザーが増える時期です（特にそういうデータがある訳ではなく、わたしの勝手な想像です）。 今回の記事ですが、はてなブログ初心者のブロガーさんに向けての記事です。 と言っても、はてなブログ初心者向けの記事はたくさんありますから、検索で調べたら大方の疑問は解消します。 今回の記事は、わたしがブログを初めた当時に失敗したことや、「これは知っとったほうが良かった」という経験から、はてなブログ初心者のはてなブロガーの方々に教えたいことです。 これは知っている方には非常につまらない内容です。なので、そんな場合はそっとページを閉じて下さい。 それと機能や仕組みや、間違いやすいことといった話ばかりで、デザインやアクセスアップといったことはまったく書いていません。あしからずです。 では本文です。 はてなフ

今回ははてなブログのカスタマイズに関係したCSSの記事です。 はてなブログにはパンくずリストがあります。 リンク：記事のカテゴリーを「パンくずリスト」として表示できるようにしました - はてなブログ開発ブログ だが、このパンくずリスト、記事タイトルが長いとリストも長くなり、見づらくなります。 特に右端で改行して2行以上になると、見にくいだけでなく、ブログのデザインが崩れることもあります。レスポンシブ対応にしてスマホで見ると3行以上になることもあります。 これをCSSでどうにかしたい！というのが、今回の記事です。 スポンサーリンク パンくずリストをどうにかするCSSデフォルトのパンくずリストの何が問題なのかと言えば、パンくずリストが冗長的に長くなることです。それをCSSで回避します。 その1：リスト最後のページタイトルを消すパンくずリストが長くなる場合、だいたいは記事タイトルが長いから長くな

【追記 (2017/04/08)：Flexbox（フレキシブルボックスレイアウト）のことなど、記事の一部を変更しました。】 HTMLをCSSでデザインするときに、要素を重ねることがありますよね。 例えばdivやspan要素、疑似要素:beforeや:afterを重ねて一つのデザインを作る、なんてことはよく使われる方法です。 そのときよく使われるCSSがpositionプロパティです。 このプロパティなのですが、親要素と子要素の表示形式やプロパティによって、いろいろややこしかったのです。 スポンサーリンク 親要素の影響を受けるインラインレベルの position:absolute 原因の推測 IE11 では他とは違い基準位置に インラインレベルで位置が変わることへの対応策 1、ブロックレベルにする 2、leftプロパティを指定する vertical-align や Flexbox はブロック

今週のお題は「もしも100万円が手に入ったら」ですが、私だったら旅行かな？日本中いろんな所に行ってみたい。 例えば、日本一周するのには50万～120万円ほどで回れるそうです。節約すれば50万ほど、旅館、観光地も周ってリッチにいくなら120万円以上はいるようです。 うん、100万円ならいけそうですね。 でも、普通に日本中旅行しても面白くない。ではご当地納豆や、ご当地納豆グルメを満喫する旅ならどうだろう、と考えたのが今回の趣向です。 実際、100万円もらった訳ではないので全て妄想ですが、こんな順番で周っていけるかな、というコースを考えてみました。 少々、というかかなり長くなってしまったので、肩の力を抜いてほどほどな感じで読んでいってください。 47都道府県、納豆を味わい尽くす旅 埼玉・千葉・茨木・栃木 福島・宮城・岩手・青森 北海道・秋田・山形・新潟 群馬・長野・富山・石川 岐阜・福井・滋賀・

はてなブログの記事を書くとき、スマートフォンから書いているという方も、多いと思います。 ですが、スマートフォンから書く場合、ちょっとHTMLを書き足したいと思っても出来ないし、できても思った通りに記入できない、ということがあります。 そこで今回は、はてなブログでスマホから記事内にHTMLを書く場合に、どんなHTMLも、何でもかんでも思いっきり書ける方法をいろいろ調べ検証したので、そのご報告です。 スマホからHTMLを書く方法 HTMLタグを書ける編集モードの選択 HTMLタグを直接記述できる「pタグ停止記法」 pタグ停止記法の記述方法 実際マークアップする際の注意点 締め スポンサーリンク スマホからHTMLを書く方法初めに、スマートフォンから記事を書く場合、スマホのウェブブラウザとアプリの2つの方法があるのですが、これはどちらでも良いです。 というか、本当はブラウザの編集画面だけでも事足