【W3Cエラー】content-visibility:auto;遅延読み込みでWebページが爆速に!?
こんにちは。FC2ブロガーのM（@yulari_happy ）です。今回は、記事タイトルに掲げた通り、content-visibility:auto;というCSSの話しを書こうと思います。 最近、たった1行のCSSコードを追加するだけで、ウェブページの読み込み速度を大幅に改善できる 小技テクニックとして「content-visibility」が話題になっているようです。ネットニュースでも取り上げられ、Googleニュースのおすすめ記事になっていました。 そこで、ほんの数行のCSSで実装できる小技テクニック「content-visibility:auto;」は、ウェブページの読み込みを爆速にする方法としてどうなのか?実際に試してみたところ、どうやらW3Cエラーになってしまうみたい…。 散々、悪戦苦闘した結果、僕のFC2ブログ『ゆうらり』に使うことを断念せざるを得ませんでした。何故、途中でカス
iPhoneのSafariでブログのハンバーガーメニューが開かない不具合の原因は？
あけましておめでとうございます。 現在のテンプレートを使い始めてから、一応の満足感を得られたこともあり、カスタマイズやブログ日記のほうはすっかりとご無沙汰してしまいました。 ぼちぼちではありますが、FC2ブログを運営するなかで気になったことがあればその都度ご報告するつもりですので、本年も宜しくお願い申し上げますm(__)m というわけで早速、新年一発目のブログ日記を更新。この記事のお題は、スマホのiPhoneでブログを見た時に表示される「ハンバーガーメニュー」のお話しです。 iPhoneのSafariでブログを閲覧していたら、ハンバーガーメニューをタップしても反応が悪いし開かない…。原因について色々と調べてみた結果、わかったことを書き記しておきます。 iPhoneのSafariでブログを閲覧したらハンバーガーメニューが開かない‼︎不具合に気付いた経緯ちなみに、僕が現在の「Choir」という
ブログ 一行の文字数は何文字が最適？ 記事を固定幅で中央に表示させる方法
こんにちは。FC2ブロガーのMです。 今回は、ブログの記事を中央に固定幅で表示させつつ、画像などは幅いっぱいまでフル表示させる方法についての話しをします。 いわゆる「フルブリードレイアウト」というやつですが、そもそも、これを実装しようと考えたのは、次の疑問がきっかけでした。 「ブログに表示される一行の最適な文字数は？何文字が読みやすいのだろう？」 僕がブログ記事一行の文字数について悩み出したきっかけとは？ 今やインターネットはスマートフォンを使って閲覧するのが主流です。したがって、ブログ一行の文字数って何のこと？と思う人がいるかも知れませんね。これは、PCでウェブサイトを閲覧した時の話しです。 僕がブログをはじめた当初は、一行の文字数なんて気にしたこともなかったんですけどね…。なぜかというと、FC2ブログのテンプレートは最初の頃に3カラムのものを使っていたから。左右にプラグインが並ぶので、
GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します
今回は、ブログに Google AdSense の広告を貼り付けているブロガーさんにとって大変な 朗報 になるかも知れません。Google AdSense の 遅延読込み で ページ表示速度を劇的に改善する方法 をご紹介します(^^) 僕は現在、FC2ブログテンプレート製作者 Akira さんの作成による「ample」というテンプレートを使ってこのブログを運営しています。とても高スペックなテンプレートですから、本来なら ブログ の ページ読み込み速度 も 爆速 なはずなんです。 ところが、僕のブログには Google AdSense をはじめとする様々な 広告 を貼り付けたり、いろんな カスタマイズ を施したことでAkiraさんのブログテンプレートをまるっきり生かせていません(^^;)
【コピペOK】Googleマップをレスポンシブ対応する方法、サイズ調整も不要！
こんにちは! FC2ブロガーのM（@yulari_happy ）です。 ブログを書いていると、記事の内容によっては地図を掲載したい時ってありますよね。そして、ブログに地図を貼る場合に誰もが利用しているのはGoogleマップだと思います。 やり方としては、Googleマップを開いて場所を決めたら地図のサイズを調整。あとは発行された埋め込みコードをブログに貼り付けるみたいな…。 しかし、発行されるhtmlコードはiframeタグ。これってレスポンシブ対応してないから面倒なんですよね（汗）サイズがデカいとブログからはみ出るし、小さいとPC画面では非常に見づらい！ そんな訳で、Googleマップの埋め込みコードをレスポンシブ対応する方法について調べてみたところ、超簡単でした。iframeタグのサイズ調整も不要になり、とても便利だと思ったのでご紹介したいと思います(^^) コピペで超簡単！Googl
スマートフォンでFC2ブログ閲覧中に突然Webページが表示されなくなる原因は⁈
こんにちは! FC2ブロガーのM（@yulari_happy ）です。いつも当ブログにお越しいただきありがとうございます。 ブログデザインのカスタマイズが好きな僕にとって、ブロガーさんのブログに施したさまざまな工夫を見るのは楽しみのひとつになっています。 しかし、カスタマイズと言っても、上手くいって満足したと思ったら、ずっと不具合が発生していたのを気付かずそのままにしていたなんてことがあるものです。 そこで今回は、通常のエラーチェックだと気付きにくいブログカスタマイズの失敗談を。ブログをスマートフォンで見ていたら、思わぬアクションがきっかけで不具合を発見した、という話しを書きたいと思います。 スマホでブログを閲覧していたら突然、何も表示されなくなった！ 横になりながら、スマートフォンで自分のFC2ブログを見ていた時のこと。 スマホって、画面表示を縦向きにロックしておかないと、ちょっと向きが
【FC2未対応】ブログの1記事を複数のページに分割するメリットとは？
FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。いつもご訪問いただき、ありがとうございます。 今回は、1つの記事を複数ページに分割する方法の話しを。結論から先に言いますと、FC2ブログには1記事をページ分割するような機能が存在しないんですよね(^_^;) ちなみに、記事のページ分割とは、ネットニュースなど、キュレーションサイトでよく見かける例のアレ。記事下に、「1・2・3」のページ数や「＜ 前のページ」「次のページ ＞」とリンクが貼られているのを目にする方も多いかと思います（デモについてはこの記事の下をご覧ください）。 1つの記事をすべて1ページ内に収めるのではなく、あえて複数ページ（記事はあくまでも1つです）で表示させるこの方法。これにはどのようなメリットがあるのでしょうか？ 1つの記事を複数のページに分割するメリットは？1つの記事を複数のページに分割するメリットは、いくつかある
FC2ブログの複数記事をページ分割のように関連付けるにはどんな方法が？
FC2ブロガーのMです。先ほどの続きを。 ひとつの記事を複数ページに分割するメリットについて書いてきましたが、僕の使っているFC2ブログには、記事をページ分割する機能が搭載されていないのです。 あると非常に便利なんですけどね(^^;) だからといって、何か似たようなことが出来ないものでしょうか？ 別の記事番号になってしまった記事同士を、まるでページ分割したような感じで関連性を持たせることで、読者の方に連続してブログを読んで頂きたい。 これを実現させるために僕がおこなっているちょっとしたWebテクの小ワザをご紹介します。 FC2ブログの複数記事をページ分割のように関連性を持たせる方法ブログを更新するとき、続けて読んでもらいたかったり、関連記事を表示させるのによく使われるのは、aタグでリンクを挿入してその記事への誘導を促したり、ブログカードを挿入するケースが一般的です。 しかしそれだと、あくま
FC2ブロガーさんのアイデアに感心！リンク行頭のリストマークにファビコンを使ってみた件
FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。いつもご訪問いただき、ありがとうございます(^^) 僕のブログには、毎日たくさんのFC2ブロガーさんがご訪問して頂けるので、いつも楽しく拝見させてもらってます。 ところが僕の場合は記事を読む前に、FC2ブロガーさんが運営するブログにどんな装飾やカスタマイズを施しているのか？にまず目がいってしまいまして(^_^;) 昨日読ませて頂いたブログには、僕がこれまで一度も浮かばなかったアイデアが取り入れられていて、「そんな発想があったのか！」と、思わず感心してしまった次第です。 そこで、僕もさっそく真似させてもらいました。 リンク行頭のリストマークをファビコンを設置するカスタマイズ 僕のブログに取り入れさせてもらったのは、リンク行頭の装飾でした。拝見したブログには、リンクの行頭にファビコンを読み込んでリストマーク代わりにしていたんです。 「この
jQuery不要の「Swiper」で3次元スライダーに挑戦！FC2ブログにカスタマイズしてみた件
FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。いつもご訪問いただき、ありがとうございます(^^) 今回もまた、FC2ブログテンプレートのカスタマイズ報告をしたいと思います。 僕が現在ブログ運営するのに使っているテンプレートはFC2ブログテンプレート製作者Akiraさんの「Ample」です。 ところが、僕のブログには、ヘッダー画像の下にデフォルトされてないスライダーが設置してあるので「おや？」と思われた方もいらっしゃるのでは？ ちなみに、スライダーというのはこんな感じ。 Webサイトや人気ブログなどに導入されているのをよく見かけますよね。 僕がスライダーを設置したきっかけは、一時期お借りしていたAkiraさんの「Southerly」というテンプレート。これに実装するスライダーがとても気に入っていた僕は、テンプレートを変えるたびに移植してきたわけです。 Southerly - FC2
FC2ブログのヘッダー画像を徐々に表示させるアニメーションのカスタマイズ
FC2ブログのヘッダー画像に、ちょっとした小ワザを使ったカスタマイズを施してみました。 今回やったことは、ブログのヘッダー部分に設定してある画像がアニメーション効果によって徐々に表示されていくというカスタマイズです。 ▼デモはこちら。 ブログのトップページへ 画像が画面内に入ると、アニメーションが始まるんですね。一度、画像が見えなくなるまでスクロールしてから再び戻りますと、何度でもアニメーションが動作します。面白いですね(^^) FC2ブログのテンプレートに限らず、img要素の画像でしたら記事内の画像などにも簡単に装飾を施すことが可能だと思います。クリエイティブなウェブデザインのブログを表現するのにもおすすめかも知れません。 そこで今回は、コピペでカスタマイズできる設定コードに加え、僕が現在使っているFC2ブログテンプレート「Ample」に実装した手順をご紹介します。 画像を徐々に表示する
【FC2ブログテンプレート】Ampleのヘッダー画像、ランダム表示数を追加したけど文句ある？
FC2ブロガーのMです。ご訪問いただきありがとうございます(^^) 今回は、FC2ブログのテンプレートについての話しを。 Akiraさんが期間限定（すでに終了しました）で公開された「Ample」に変更した僕は、このテンプレートがとても気に入っています(^^) Ample - ブログ内期間限定配布「配布終了」 Ampleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ... 何故なのかよく分かりませんけど、僕のブログを見つけて下さった同じテンプレのブロガーさんがたくさん訪れてくれます。 ただ、ほとんどの方々は、dark色のほうをお使いになっているんですね。拝見していると、皆さんのブログはどれも素晴らしいものばかり。何だか僕もdark
【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪
FC2ブロガーのMです。 とうとうやってしまいました。 FC2ブログのテンプレート製作者Akiraさんがブログ記事を更新されたんで気になって覗いてみたんです。 すると…。 Ample - ブログ内期間限定配布 Ampleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ... アッ！ 素敵で格好いい新作テンプレート『Ample』が発表されてる(￣O￣;) しかも、今使ってるテンプレと同じ「期間限定配布」じゃん(ﾟoﾟ;; とりあえず、何も考えないでダウンロード。 10月に入ってブログをダークモード→ホワイト系に変えたばかりだしな。体調も悪いし、おまけに今回はカスタマイズがいろいろあって上級者向けときたもんだ。 FC2ブログのテンプレ
オシャレな線画イラストが動く?!面白アニメーション付き無料アイコン素材200個セットを使ってみた♪
この記事の内容 線画でおしゃれなイラスト素材が動く⁈ GIFアニメーション付き無料アイコン素材200個セットがダウンロード出来るオンラインツール‼︎ ウェブサイトはもちろんiOSやAndroidにも対応したアニメーション付きアイコン素材が無料&商用利用できるおすすめ便利ツール♪ FC2ブログ『ゆうらり Happy Smile（ゆうらりハッピースマイル）』を運営する管理人のMです。 この記事は、今とても人気の線画を使った動くGIFアニメーションが商用利用可能なうえ、しかも無料で使えちゃうというお話し。 お洒落でユニークなアニメーションを実装したアイコン素材200個セット『Animated Icons from Icons 8』をご紹介します。WebサイトやFC2ブログで普段何気なく利用しているアイコンですが、ちょっとだけ動きを加えることで読者の注目を集めたり、アッと言わせられるクリエイティブ
noteが「noteで記事を書く」ボタンのカスタマイズ方法を追加で発表！
note、Webサイトにあわせて「noteで書くボタン」のカスタマイズする方法を追記さっそく気になったボクは、noteが発表した「本日より、ソーシャルプラグイン「本日より、ソーシャルプラグイン「noteで書くボタン」を、Webサイトの雰囲気にあわせてカスタマイズして設置できるようになりました。設置方法は、こちらをご覧ください。https://note.pie｜note公式｜note」というアナウンスを覗いてみました。 すると、「noteで書く」ボタンの設定方法 – noteヘルプセンターの中に、「ボタンのデザインをカスタマイズする場合」として新たな設置方法が追加されていました。 「noteで書くボタン」はWebサイトにあわせてカスタマイズして設置することもできます。 下記のコードのようにリンクタグを追加すると、画像やテキストを「noteで書く」ボタンにできます。 要するに、上の記事で紹介さ
Amazonのiframe要素を正規化、W3Cのエラー表示を回避する便利な方法はコレ！
FC2ブロガーのMです。今回のお話しは、Amazonアソシエイトから発行される「テキストと画像」のリンクについて。ブログでAmazonのリンクを挿入する際に、W3Cでエラー表示がされないようにする方法を書いてみたいと思います。 いろんなブログを見ていると、どのブロガーさんも皆Amazonアソシエイトのリンクを貼りつけてますよね。中でも一番多いのが「テキストと画像」のリンク。しかし、W3Cでhtmlの構文チェックをおこなうと、毎回エラー表示が出てしまうんですよね（汗） これは、Amazonから発行されるiframe要素の中に廃止された属性が含まれているからなんです。だから「代わりにCSSを使用してください。」とエラー表示がされてしまうわけ。 これってどうにかならないの？！という疑問と、その解決策が今回のテーマです。
元Yahoo!ブロガーさん達のFC2ブログテンプレート選択には2つの傾向が
FC2ブログの「足あと」機能についてそもそもなぜ、ゆうらりさんの所に元Yahoo!ブロガーさんが訪れているのが分かるのかといいますと、FC2ブログの管理画面には「訪問者リスト」というのがあり、どのFC2ブロガーさんが訪問されたのかが「足あと」という形で分かるようになってるんです。 もちろん、「足あと」を残さない設定もできますので、自分がほかのブログを訪問したのを知られたくない場合は「足あとを残さない」に設定することをおすすめします。 元Yahoo!ブロガーさん達がFC2ブログで使うテンプレートには2分化の傾向が…訪問者のブログは欠かさず拝見させてもらってます(^^) ブログのプロフィール欄を拝見してみると、「Yahoo!ブログの終了にともない、FC2ブログにお引っ越ししてきました」と書かれていて、元Yahoo!ブロガーさんなんだなぁと。おまけにどれもこれも秀逸な記事ばかり。すごいなぁといつ
FC2でも使える「画像拡大JS」はこれ！jQuery不要で超軽量♩
FC2ブロガーのMです。今回は、画像をマウスオーバーしたり、指を乗せる（スマホ表示のとき）とオーバーレイして、クリック（またはタップ）することでふわっと画像が拡大表示される画像拡大スクリプト「Luminous（ルミナス）」について。 Webデザインのスキルが高い方のブログなどでよく見かける機能ですが、皆さんはご存知でしょうか？ 画像というと、気になるのはブログが重くなること。画像表示のカスタマイズなんて聞くと、ちょっと心配になりますよねぇ…(^_^;) でも、Luminousという画像拡大スクリプトは、jQueryが不要の超軽量jsを使っていてFC2ブログでも使えることを知りました。 で、実際に当ブログに導入してみることにしたんです。 実装したLuminous（ルミナス）の画像拡大表示はこんな感じ実際に、Luminousを実装してみました。画像を下に貼ってみましたよ。クリックやタップで体感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
