tableの利用は非常に注意が必要です【モバイルフレンドリー】【画面幅の超過】

これまで啓蒙の意味で何度か記事にしている tableタグの利用 についてです。 なかなか意識が変えられないというか。気づいて頂けないというか。 当弱小ブログをご覧の方の中にも 必ず該当者がいるはず ですので、心当たりがあるのならば潔く修正をお願いします(笑) 誰のためでもなく自分のために。そして 足を運んでくれる訪問者のために。...

アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう

昨日ははてなブログさんのレイアウトを真似てみましたが、今回はアメーバさんを。 アメブロではスマホ版でこんな感じになります 通常の掲載 画像の横幅を画面幅と同等に 画像は画面幅(ビューポート)いっぱい、テキストの左右にはちゃんと余白がありますので読みづらくありませんよね。 ビミョーにトレンドというか、シャレオツ化計画進行中のYahoo!ブログスマホ版もこういったレイアウトになるようで...

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログさんの機能パクりというか。 まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`) 複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ記事編集画面(PC版)の編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際に、複数の写真を...

レイアウトを崩してしまうhtmlの凡ミスいろいろ

凡ミスなんですよ (´・ω・`) 凡とはいえ、htmlでは 記号ひとつ打ち間違えても内容が狂ってしまう んですね。 そんな凡ミスのよく見かけるパターンを挙げてみようと思います。 htmlのありがちなミスには 入れ子のミス (開始タグと終了タグの 位置 間違い) タグの閉じ忘れ (開始タグに対応する終了タグが 欠損) 開始タグと終了タグの数が違う (一部の空要素以外は 開始タグと終了タグの数が一致している必要あり) ...

SSLに対応したテンプレートの見分け方

SSL対応 なんつっても別にたいして特別な処理をするわけではないのですが。 製作者目線で言うと「とても大変な改修」ではありません (´・ω・`) すべきことをすればすぐ対応できます。 とはいえFC2の共有テンプレートというのは製作者さんが既にFC2ブログから去っている場合があります。 共有テンプレートについてFC2はその著作権を製作者本人に帰属させています。 平たくいうと、 メンテも修正も全部製作者の責任であって...

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】

ブログタイトルを画像に変更する というのは比較的ポピュラーなカスタマイズかと思います。 その際に やってはいけないこと がいくつかあるんですね。 やってはいけないというか、「やるとマズいことになる」と言った方が正しいか。 背景画像とロゴは 切り分けるべき 掲載に利用するのは CSSプロパティのbackground-image ではなく htmlタグのimg 今回はこの2つに的を絞って説明しようと思います。 もちろん条件...

ページ内スクロールと開閉プラグインの衝突

特定環境下で衝突するんですよ (´・ω・`) 特定というと狭い範囲のように思いますが、広範です。 条件 HTML5テンプレート を利用している 開閉プラグインが開閉トリガーに aタグ を用いている テンプレートにページ内スクロール(スムーススクロール)が導入されている この条件が重なった時ですね。 挙動 開閉ボタンをクリックすると ページ最上部にスクロールしてしまう この原因と対策についてです...

ヘッダー背景画像カスタマイズ時の考え方

物の考え方についてです。 a way of thinking, a point of view です。 ヘッダーの背景に画像を入れたいなぁ もしくは 既に設置されている背景を変更したいなぁ と考えた時、 どんな画像をどのような形で収めるか この思考作業のフローチャートというんでしょうか。 URLを入れ替えただけでしっくり来ることもあれば、そうでない場合もある わけなので、壁にぶち当たった時に「どう考えれば良いのか」というのを導く...

ヘッダー背景画像をランダム表示

「ヘッダーの背景画像をランダム表示にしたい」 よくあるご相談のひとつです。 毎回個別にお答えするのもアレですので、記事にしておきますね。 注意点 あくまでも「ランダム」ですので、連続して同じ画像が選出されることもあります。 アクセス時に表示される背景をランダム選出する、というカスタマイズであり、スライダーのように画像を切替えるためのものではありません。 どのテンプレートでも必ず機能するとい...