【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でブログのハンバーガーメニューが開かない不具合の原因は？
News-政治-経済-事件系 (910) ┗ 事件ファイル (25) 芸能 (1962) ┗ テレビ-CM-映画系 (600) ハロプロ系 (1680) 日常-雑談系 (528) インターネット (429) ┣ SNS系 (300) ┗ Webサイト系 (120) グルメ (447) ┣ 低糖質レシピ (32) ┗ お酒の飲み方 (2) 漫画-アニメ系 (190) スポーツ-格闘系 (385) 仕事-転職-キャリアアップ (351) ┗ 司法書士 (14) 海外-地方ネタ系 (1088) 恋愛-人間関係 (449) 今日のエッセイ (348) Amazon (277) ┣ Amazonセール (24) ┗ Kindleセール (240) ブログ (360) ┣ FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (189) ┣ FC2ブログ日記-カスタマイズの
ブログ 一行の文字数は何文字が最適？ 記事を固定幅で中央に表示させる方法
こんにちは。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」というテンプレート。これに実装するスライダーがとても気に入っていた僕は、テンプレートを変えるたびに移植してきたわけです。
FC2ブログのヘッダー画像を徐々に表示させるアニメーションのカスタマイズ
FC2ブログのヘッダー画像に、ちょっとした小ワザを使ったカスタマイズを施してみました。 今回やったことは、ブログのヘッダー部分に設定してある画像がアニメーション効果によって徐々に表示されていくというカスタマイズです。 ▼デモはこちら。 ブログのトップページへ 画像が画面内に入ると、アニメーションが始まるんですね。一度、画像が見えなくなるまでスクロールしてから再び戻りますと、何度でもアニメーションが動作します。面白いですね(^^) FC2ブログのテンプレートに限らず、img要素の画像でしたら記事内の画像などにも簡単に装飾を施すことが可能だと思います。クリエイティブなウェブデザインのブログを表現するのにもおすすめかも知れません。 そこで今回は、コピペでカスタマイズできる設定コードに加え、僕が現在使っているFC2ブログテンプレート「Ample」に実装した手順をご紹介します。 画像を徐々に表示する
【FC2ブログテンプレート】Ampleのヘッダー画像、ランダム表示数を追加したけど文句ある？
News-政治-経済-事件系 (920) ┗ 事件ファイル (25) 芸能 (1972) ┗ テレビ-CM-映画系 (600) ハロプロ系 (1706) 日常-雑談系 (534) インターネット (432) ┣ SNS系 (303) ┗ Webサイト系 (120) グルメ (448) ┣ 低糖質レシピ (32) ┗ お酒の飲み方 (2) 漫画-アニメ系 (192) スポーツ-格闘系 (392) 仕事-転職-キャリアアップ (354) ┗ 司法書士 (14) 海外-地方ネタ系 (1094) 恋愛-人間関係 (453) 今日のエッセイ (352) Amazon (277) ┣ Amazonセール (24) ┗ Kindleセール (240) ブログ (360) ┣ FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (189) ┣ FC2ブログ日記-カスタマイズの
【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪
僕が手を出したら挫折しそうだから手を出すのはヤメとこ… ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘ しかし、時が経つごとに僕の気になるモードが最高潮に達してしまった( ；´Д｀) 何故なんだ！！ なぜ僕のブログ魂の虫が騒ぐんだろ (● ˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾ 結局、居ても立っても居られなくなった僕は、仮にこのテンプレに引っ越しするまでの過程を頭に思い描きました。 すると、何となく今と基本構造が同じ気がしてきた。 もしかして、中身をそのまま移植すれば大丈夫なんじゃね⁈的な…。 いちおう、最後まで仕上げるイメージが描けちゃうんです。約2～3時間もあれば出来ちゃうかも⁈ で、休み休み移植を始めました。今回は、FC2ブログテンプレートのカスタマイズで悪戦苦闘した備忘録を書き記しておこうと思います。 いやー。上級者向けというのがこんなに難しいものだったとは…。 改めてhtmlとcss、jsといっ
オシャレな線画イラストが動く?!面白アニメーション付き無料アイコン素材200個セットを使ってみた♪
この記事の内容 線画でおしゃれなイラスト素材が動く⁈ GIFアニメーション付き無料アイコン素材200個セットがダウンロード出来るオンラインツール‼︎ ウェブサイトはもちろんiOSやAndroidにも対応したアニメーション付きアイコン素材が無料&商用利用できるおすすめ便利ツール♪ FC2ブログ『ゆうらり Happy Smile（ゆうらりハッピースマイル）』を運営する管理人のMです。 この記事は、今とても人気の線画を使った動くGIFアニメーションが商用利用可能なうえ、しかも無料で使えちゃうというお話し。 お洒落でユニークなアニメーションを実装したアイコン素材200個セット『Animated Icons from Icons 8』をご紹介します。WebサイトやFC2ブログで普段何気なく利用しているアイコンですが、ちょっとだけ動きを加えることで読者の注目を集めたり、アッと言わせられるクリエイティブ
noteが「noteで記事を書く」ボタンのカスタマイズ方法を追加で発表！
ソーシャルプラグイン「noteで書く」ボタンが公開されたことを記事で紹介したばかりですが、その続報です。「noteで書く」ボタンは、自由にカスタマイズ出来ることが分かりました。 これは、noteの運営サイドが、ブログやそれぞれのWebサイトのデザインにあわせて「noteで書く」ボタンを設置できるようにカスタマイズする方法を追加発表したことで明らかにされたものです。 ▼前回の記事 【新機能】noteのソーシャルボタン「noteで書く」をFC2ブログに設置する方法 FC2ブロガーのMです。noteが、コピペでブログに設置できる「 note で書く」ボタンを初公開しました。1クリックで記事を引用しつつ、noteの投稿画面を開くことができるというものです。シェアボタンはSNSなどでお馴染みですが、いよいよnoteでも気軽にシェアする時代が到来したのですね。さっそく、ソーシャルボタン「noteで書く
Amazonのiframe要素を正規化、W3Cのエラー表示を回避する便利な方法はコレ！
FC2ブロガーのMです。今回のお話しは、Amazonアソシエイトから発行される「テキストと画像」のリンクについて。ブログでAmazonのリンクを挿入する際に、W3Cでエラー表示がされないようにする方法を書いてみたいと思います。 いろんなブログを見ていると、どのブロガーさんも皆Amazonアソシエイトのリンクを貼りつけてますよね。中でも一番多いのが「テキストと画像」のリンク。しかし、W3Cでhtmlの構文チェックをおこなうと、毎回エラー表示が出てしまうんですよね（汗） これは、Amazonから発行されるiframe要素の中に廃止された属性が含まれているからなんです。だから「代わりにCSSを使用してください。」とエラー表示がされてしまうわけ。 これってどうにかならないの？！という疑問と、その解決策が今回のテーマです。 Amazonから発行される「テキストと画像のリンク」を一発で正規化コードに変
元Yahoo!ブロガーさん達のFC2ブログテンプレート選択には2つの傾向が
News-政治-経済-事件系 (930) ┗ 事件ファイル (25) 芸能 (1982) ┗ テレビ-CM-映画系 (605) ハロプロ系 (1746) 日常-雑談系 (538) インターネット (434) ┣ SNS系 (305) ┗ Webサイト系 (120) グルメ (451) ┣ 低糖質レシピ (32) ┗ お酒の飲み方 (2) 漫画-アニメ系 (193) スポーツ-格闘系 (394) 仕事-転職-キャリアアップ (358) ┗ 司法書士 (14) 海外-地方ネタ系 (1096) 恋愛-人間関係 (457) 今日のエッセイ (354) Amazon (277) ┣ Amazonセール (24) ┗ Kindleセール (240) ブログ (363) ┣ FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (189) ┣ FC2ブログ日記-カスタマイズの
FC2でも使える「画像拡大JS」はこれ！jQuery不要で超軽量♩
FC2ブロガーのMです。今回は、画像をマウスオーバーしたり、指を乗せる（スマホ表示のとき）とオーバーレイして、クリック（またはタップ）することでふわっと画像が拡大表示される画像拡大スクリプト「Luminous（ルミナス）」について。 Webデザインのスキルが高い方のブログなどでよく見かける機能ですが、皆さんはご存知でしょうか？ 画像というと、気になるのはブログが重くなること。画像表示のカスタマイズなんて聞くと、ちょっと心配になりますよねぇ…(^_^;) でも、Luminousという画像拡大スクリプトは、jQueryが不要の超軽量jsを使っていてFC2ブログでも使えることを知りました。 で、実際に当ブログに導入してみることにしたんです。 実装したLuminous（ルミナス）の画像拡大表示はこんな感じ実際に、Luminousを実装してみました。画像を下に貼ってみましたよ。クリックやタップで体感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
