遠き君へ

〜インターネットの最果てで自分語りを垂れ流したり垂れ流さなかったりするブログ〜

公式デザインテーマ：Naturalのサイドバーを右カラム化

技術メモ CSS

はてなブログ公式のデザインテーマであるNatural - テーマ ストアを結構気に入っているのですが
色々いじり始めると、デザインの「サイドバー」で設定した項目が記事や記事一覧の下にしか出ない(しかもそれぞれの項目の並び方も微妙……)のが無視できなくなってきました。

自分で1からいじろうとしたらちょっとダルかったので、「他に同じこと考えてる人いるでしょ！」と思ってググったら見事にhit❗️

デザインテーマ：Naturalのデザインを２カラムにカスタマイズした。 - 命名って難しい

早速適用したのですが、

なんか右の白いエリアが余分でもうちょっと詰まらないか、とか
幅を狭くしていったら要素が重なっていく！とか

色々足らない部分があるんですが、とりあえず反映。

と御本人も書かれているように、表示が崩れてしまいました……😢

ということで、これをベースに改造してみました🔧

/* for side bar */
#container {
  width: 75%; /* 変更前の指定値: 800px */
  min-width: 800px; /* 変更前の指定値: なし */
  padding-right: 30px; /* 変更前の指定値: 50px */
}
/* width: about 60px */
.entry-date, .entry-header-menu > a {
  left: -70px; /* = #mainとの間隔は 約10px */ /* 変更前の指定値: -90px */
}
#main {
  float:left;
  width:70%; /* 変更前の指定値: 650px */
  margin-left: 30px; /* 変更前の指定値: auto(実質75px) */
  margin-right: 30px; /* 変更前の指定値: auto(実質75px) */
}
#box2 {
  float:left;
  width: 160px; /* 変更前の指定値: 650px */
}
#bottom-editarea {
  clear:left;
}

これが最適ではないかもしれません(paddingとmarginの使い分けがわかってない…😢)が、とりあえず以下は達成できました。

  • 余白の調整
  • ウィンドウを小さくしても重ならない
  • 記事の投稿日付の領域が隠れない

補足

HTMLとnatural.cssを見るとはだいたい以下のような構造になっていました。

- #container : 背景が白の部分 : 800 pxで指定されている
    + ...
        + #wrapper
            + #main : メインのカラム : 650 pxで指定されている
            L #box1 : ？(自分の場合は空でした)
        L #box2 : 右カラム : 650 pxで指定されている
     L #bottom-editarea : デザインの設定で指定できるフッタ領域

方針として、テーマの方のCSSで固定値が指定されている要素の値を変更することにしました。

元にした記事のCSSがwidthをパーセント指定してたのと、
ウィンドウを広げた時にある程度追従した方がみやすかろうと思ってパーセント指定にしてますが、
別にこれは固定値指定でも問題ないと思います。

今回は、右カラムはそもそも小さめなので固定幅にして、残りの部分がメインカラム+余白になるようにしました。

#containerにmin-widthを設定することで、背景が白の部分の幅が元々の大きさより小さくならないようにしています。

.entry-dateは記事の投稿日付領域、.entry-header-menu > aは(自分にしか見えないはずですが)記事の投稿日付領域の下に出現する[編集]ボタンです。
これのleftの値の絶対値を下げることで、記事の投稿日付領域とメインカラムの間の余白を詰めました。

そして、記事の投稿日付領域が隠れないように、#mainのmargin-leftで余白を確保しました。
記事の投稿日付領域の右の余白の大きさは以下(多分……)

{50px(#containerのpadding-right) + 20px(#containerのleft) + 30px(#containerのmargin-left)}
    - 70px(.entry-dateのleft)
= 100px - 70px
= 30px

あと、私はカスタムのフッタ領域(#bottom-editarea)を設定してたんですが、それも右カラムの下に行っちゃってたのでclear:left;でfloat:left;を解除てちゃんとページ下部に表示されるようにしました。

もし誰かのお役に立てれば幸いです。

【PHP】参照渡しだと未定義変数でもエラーにならない

技術メモ php 
// 値渡し
function issetWrapByValue($value) {
    return isset($value);
}

var_dump(issetWrap($hoge));
// -> PHP Notice:  Undefined variable: hoge in ...
$hoge = ['fuga' => 1];
var_dump(issetWrap($hoge['foo']));
// -> PHP Notice:  Undefined variable: hoge in ...
$hoge = (object)$hoge;
var_dump(issetWrap($hoge->foo));
// -> PHP Notice:  Undefined variable: hoge in ...

// 参照渡し
function issetWrapByReference(&$value) {
    return isset($value);
}

var_dump(issetWrap($hoge));
// -> bool(false)
$hoge = ['fuga' => 1];
var_dump(issetWrap($hoge['foo']));
// -> bool(false)
$hoge = (object)$hoge;
var_dump(issetWrap($hoge->foo));
// -> bool(false)

という感じです。

stdObjectのプロパティを渡して、それが定義されているかどうかで処理をあれこれ〜というメソッドを書こうとした時に最初値渡しにしててエラーになってちょっと焦りました 💦

理屈としては、
値渡しは「その変数の参照を解決して、参照先の値を渡す」ので、参照自体がないと途中でエラーになり、 一方参照渡しは「その変数の参照そのものを渡す」ので、参照がない(参照そのものがnull、¥0)でも値渡しの時のnullみたいな扱いになる、という風に理解しました。

スニーカーみたいに歩きやすいパンプス(ヒール3.5cm)

日常

ツイッターで #KuToo が盛り上がってますね。

個人的には是非とも同調圧力と「今までそうだったから」の思考停止で維持されてるだけの非効率・非合理的な風習はバンバンなくなっていって良い世の中になっていってほしいので、とても応援したい活動ですね。

あとは夫婦別姓とかも。

とはいえ、今日明日には中々変わらないと思うので、自分がめっちゃ気に入ってるサイコーに歩きやすいパンプスを布教しておきます。

ANNA COLLECTION リボンデザインコンフォートパンプス

ショップ：clytie

こっちのショップはちょっと高いけどカラバリ5種類ありますね〜〜

裏はこんな感じ

ショップ：ＫＡＲＡＤＡＮＩＬＵＣＫ

幅3Eというのがポイント😍
私の足はそこそこ幅広なので、靴によってはパンパンになっちゃったりして辛いのですが、 これならゆったり履けます👍✨✨

あと、ソールがすごい柔らかくかつしっかりしてて、
初めて足を通した瞬間は「え？？？こんなに履き心地の良いパンプスが存在したの😱❓❗❓❗」
って衝撃を受けました。
(それまで安物しか知らなかっただけなのかな？💦)

それでも画像によると、ヒールは3.5cmはあるようなんですが、
下手するとぺたんこ靴なんかよりよっぽど履きやすいですね。

色は画像のSTEELを、もうかれこれ3足は買って愛用してます💖
シックでありつつ、BLACKよりは遊びがあって良いんですよね〜

どうぞご検討ください❗

【PHP】null合体演算子がいい感じにしてくれるのはnullだけじゃなくて未定義も

技術メモ php

http://php.net/manual/ja/migration70.new-features.php#migration70.new-features.null-coalesce-op の「Null 合体演算子」の項に書いてある通りっちゃそうなんですが、
「null合体演算子」という名前からだとnullの場合にデフォルト値に変えるのに使える印象ですが、
未定義：変数が定義されていなかったり、配列のキーが存在しなかったりする場合にも使えます。

// $hogeはここまでで出てきていない
echo $hoge ?? 'empty' . PHP_EOL;
// -> empty
echo $hoge['fuga'] ?? 'empty' . PHP_EOL;
// -> empty

つまり以下の2つのコードは等価ではないってことですね。

$fuga = $hoge;

$fuga = $hoge ?? null;

最初、「null合体演算子の2項目をnullにしたら」意味なくない？って思っちゃいました。

便利ですね。でもさらに欲が出て$hoge ??= 'empty';(+=的な感じ)みたいにも書けるようになって欲しくなってきた……

モバイルルーターでGoogle Home Miniをセットアップしようとしたらハマった話

IT モバイルルーター

諸事情によりGoogle Home Miniをタダでゲットしました 🎉

さらに諸事情により、それを普通のルーター(固定回線のっていったらいいのか？)ではなく、
モバイルWi-Fiルーター(Y!mobileのPocket WiFi)でセットアップをしなければなりませんでした。

しかし、Google Homeアプリでセットアップしようとしても、以下の画像のように、

〇〇 はセットアップされているようですが、XX からの通信に応答しませんでした。Google Home Mini と XX が、相互に通信できないネットワークに接続されている可能性があります。場合によっては Wi-Fi 設定に若干の変更が必要になります。

というエラーメッセージが出て次に進めませんでした 😢

Google Homeアプリのエラー画面

まず調べて引っかかったのが以下ですが、状況変わらず………

これも見てみましたけどスレ主自体が未解決のよう………

そして見つけたのがこれ

ポケットWiFiじゃなく、固定回線用のWiFiルーターじゃないと使えない

そ、そんなーー 😵

………と思いつつ、「いや、そんなわけないやろ」と思って、
Pocket WiFi自体のマニュアルを読んでみました。

これの表示上の125ページ(pdfファイルとしての127ページ)のところにLAN接続設定の説明があり、以下のような記述が見つかりました。

プライバシーセパレーター ｜SSID Aに接続している無線LAN端末間の相互通信を禁止するかどうかを設定します。

「これじゃね？？？」と思って確認してみると「オン」になっていたので、
一旦「オフ」にしてからリトライしてみると、無事セットアップが完了しました 🙌

セットアップ完了後、再び「オン」に戻しましたが、今の所問題なく使えているので、戻しておいた方がいいと思います。

もし同じ事象で困っている方の参考になれば幸いです。

(知恵袋の回答も普通に間違ってることもあるってことよね………)

追記

答えがわかってから、もう一度知恵袋をみると以下の質問＆回答がありました。

わードンピシャ。なぜかわからないで探している時はこういうのが引っかからないんですよね…… 😅

background image is created by Niellyn & bhsav.