Profile cover photo
Profile photo
Maku_zin -オレだけが分かってればいいWebメモ-
1 follower -
自分Webメモです。
自分Webメモです。

1 follower
About
Maku_zin -オレだけが分かってればいいWebメモ-'s posts

Post has attachment
今回はFacebookページの内容をWrodPressに表示してみます。 よく見るものとして「Facebook for developers」を使用する方法がありますが、けっこう場所を取って「んー」な見た目なので、ここはいっちょFacebookページのfeedを作って読み込んじゃいましょうってことです。 WordPressにfeedを読み込むには WordPressにfeedを読み込むには「fetch feed」関数を使います。…

Post has attachment
しばらく休止していたWordPressのデモサイトを復活しました。 やはりコードだけじゃなく見た目のサンプルもあったほうが分かりやすいかなと思った次第でございます。 Googleマップサンプル 以前に投稿済の「カスタムフィールドに住所を入力して自動でGoogle Mapを表示する」のデモも復活しております。 これは便利なワザだと思いますので、ぜひご参考にしてください。

Post has attachment
新年あけましておめでとうございます。もう6日ですけど。 今年の抱負は「テキトー」もしくは「テキトゥー」の下山です。 何事も頑張りすぎず、肩の力を抜いて頑張りませんってことで、ブログの更新もテキトー(テキトゥー)にやっていきます。 と思ったんですけど レバレジーズ株式会社が運営する「レバテックキャリア様」というサイトに当ブログが掲載されました。…

Post has attachment
なんか更新されたで [css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみた - レスポンシブデザインで困るのがテーブル(table)ですよね。 どう処理しようか迷うところです。 今回はテーブル(table)を大きく3つの種類に分け、それぞれの対処法を紹介します。 まずはどうなるかデモで確認してみてください。 ※画面を640px以下にしてみてください。 1.単純なtableの場合 単純なっていうのはthが左列でtdも1列のみと言うことです。↓ <table class="first">
<tr>
<th>ABC</th>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius mauris turpis, a facilisis tellus dapibus at. Vestibulum porttitor convallis orci, lacinia vestibulum sapien suscipi...

Post has attachment
なんか更新されたで [WEB]WEB製作時によく使うお役立ちツール - さすが年度末です。予算消化に託つけたくだらないシゴトワンサカです。 今回はボクがWEB製作時によく使うツールやなんやれかんやれをピックアップしてみたいと思います。 既出のモノがほとんどですが何かの、誰かの役に立てばと思いながら書いてみます。 Sublime Text3 https://www.sublimetext.com/ エディタは必須ツールですが、これでシゴトのやり方も変わるんじゃないかと思ってます。 使用しているパッケージは AutoFileName BracketHighlighter ColorPicker ConvertToUTF8 Emmet IMESupport Japanize Package Control Sass SASS Snippets SassBeautify SCSS SFTP WordPress 一時はAdobe Bracketsを使っていましたが、なぜか頻繁に落ちるので仕方なくSublime Textにしたんですが、今はSublime Textから離れられません。 イ...

Post has attachment
なんか更新されたで [CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。

Post has attachment
なんか更新されたで [Sass,@extend]Sassの@extendの使い方。セレクタの継承ってことだけども・・・ - 今回はSass行くよ!@extend行くよ! @mixinとどう区別したらいいのか分からない!って人もヒントになればいいと思うよ!てか答えはまとめに書いたよ! @extendの基本的な使い方 そもそも@extendっていうのはセレクタの継承が目的で、なんども同じことを書くのは止めようねってことだと思います。 実例をあげるとこんな感じ↓ .hoge {
border: 1px solid #777;
margin: 0 auto;
}

.fuga01 {
@extend .hoge;
}
.fuga02 {
@extend .hoge;
background: #ccc;
}

↓コンパイル後

.hoge, .fuga01, .fuga02 {
border: 1px solid #777;
margin: 0 auto;
}

.fuga02 {
background: #ccc;
} のようになり...

Post has attachment
なんか更新されたで [CSS]背景にビデオを配置して全画面で表示するよ! - 珍しくビデオネタです。 と言ってもCSSネタなんですけど。 という訳で、ビデオを背景に配置して全画面で表示するみたいな案件が来そうなので作ってみた。 正確に言うと背景としてではなく普通に配置してposition:fixedしだけの代物でそれなりに見えたので投稿。 デモはこちら videoの配置 <video autoplay loop>
<source src="img/orion.mp4">
</video> あまり使い慣れませんがvideoタグを使ってvideoを配置します。 全画面表示にする video {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -1;
} こんな感じでposition:fixedしてサイズを100%にして出来上がりです。 まとめ ずっと...

Post has attachment
なんか更新されたで [sass,css,メディアクエリ]sassでメディアクエリを書くときに簡単だなって思った方法 - スマホ対応、タブレット対応のWEBを作るときに使われるレスポンシブWEBデザイン。 これはメディアクエリが必須となっています。 ボクは日頃レスポンシブWEBデザインは使用しません。 なぜなら面倒くさいし、ボクの技量ではデザインが限られてくるからwww それでも試練はやってくるのです。 てことでSassでメディアクエリを書く方法は色々とありますが、間に合わせ的な書き方を発見しましたのでメモっておきます。 ブレイクポイントは変数に! ブレイクポイントを毎回書くのが面倒くさいので変数に書いちゃいましょう。 $phone: "only screen and (max-width:640px)";
$tablet: "only screen and (min-width:641px) and (max-width:959px)";
$pc: "only screen and (min-width:960px)"; 変数の使い方 @media #{$phone} {
...

Post has attachment
なんか更新されたで [WordPress,カスタムフィールドテンプレート]カスタムフィールドテンプレートのラジオボタンを使って表示内容を切り替えてみたメモ
Wait while more posts are being loaded