カスタム投稿タイプを簡単に設定できるプラグイン:Custom Post Type UI

カスタム投稿タイプを設定するとき、プラグインを使いたくなくてfunctions.phpに設定していましたがプラグインも簡単かな〜と思って導入してみた

とても簡単に設定できるんだけど、オプション設定部分がわからなくなるので書き留めます。

WordPress › Custom Post Type UI « WordPress Plugins

https://wordpress.org/plugins/custom-post-type-ui/

 

Add Edit Post Types ‹ とくしよ!ネット — WordPress

Labels

管理画面で表示される名前を設定できます。

2Add Edit Post Types ‹ とくしよ!ネット — WordPress

Settings

高度な設定が出来る部分。ここが今日のメイン。

■一般公開(default:true)
一時的にカスタム投稿タイプを無効にしたいとき

■UI を表示(default:true)
管理画面で表示させる

■Has Archive(default:false)
日付アーカイブ、カテゴリーアーカイブなど投稿を一覧表示するかどうか
trueにする頻度高

■Exclude From Search
検索対象からはずすかどうか
検索結果に表示させたい場合は、falseのままで

■利用タイプ
ユーザーの権限によりカスタム投稿タイプを編集できる権限を記入

■階層(default:false)
固定ページのような親子関係を作りたい場合はtrue

■リライト(default:true)
スラッグをpost type slugの名前と変えたい場合はtrue
次項にリライトしたいスラッグを記入

■カスタムリライトスラッグ
リライトしたいスラッグ名を入力します

■With Front(default:true)
カスタム投稿タイプのパーマリンクに関係するようなのですが今イチわかってません。取りあえずいじらなくてもOKかな

■クエリーバージョン(default:true)
ここもよくわからず。初期値のままでOKなよう

■メニューの位置
管理画面の左メニューでの表示位置。
5〜100までの数値で設定します。空欄の場合はコメント下に表示されます

5〜9:投稿の下
10〜19:メディアの下
20〜ページの下

■Show in Menu(default: True)
「UI を表示」がtrueな場合、有効

■Menu Icon
管理画面左メニューのアイコンを指定できます。
絶対パスで入力

■サポート
使用する機能にチェックを入れます。

■ビルトイン分類
投稿(post)で使われているカテゴリーやタグを利用する場合はチェックをいれます

 

以上。。大雑把ですが。

カスタムタクソノミーについては後日まとめます。

Internet Explorer 互換表示にさせない

Internet Explorer の互換表示とは、新しいバージョンのIEで崩れてしまったホームページを以前と同じように表示させる機能。

IE11では非推奨になりました。

つい最近知ったのは、イントラネットでは最初から互換表示になるようになっているこ。これはIE11でもそのようです。

互換表示モードにならないようにするには、metaタグを追加します。

にする必要はもうないのかな?

chrome=1 は、Internet Explorerの古いバージョンでGoogle ChromeのJavaScriptとレンダリングエンジンを動かすためのオープンソースのプラグインChrome Frameがインストールされていれば、それを有効にする。。。という事だと思います。使ってないので詳しくは不明^^;

ただ、Chrome Frameももうアップデートの予定はなく、開発終了したそうです。

Illustrator 破線の分割(アウトライン)

イラレで放射状のラインを引く

例)200px x  200px の正円を作って、 線の太さを100pxにする。

SnapCrab_NoName_2015-1-14_17-11-44_No-00

破線の「線分」を36ptぐらいに

SnapCrab_NoName_2015-1-14_17-12-8_No-00

でもこれをパスのアウトラインや分割と拡張をやろうとすると

SnapCrab_NoName_2015-1-14_17-13-11_No-00

こんなふうになる。

いろいろググってみたところ「透明部分を分割・拡張」で

すべての線をアウトラインに変換」にチェックを入れるとOKらしい。

SnapCrab_NoName_2015-1-14_17-12-49_No-00

できました!

 

SnapCrab_NoName_2015-1-14_17-13-27_No-00

マウスオーバーでヒラッとさせる

マウスオーバーでちょっと違うエフェクト

html

jQuery

css

こちらを参考にさせていただきました

http://jsdo.it/fctale/mLaO

Retina Display 用のMedia Query

Retina 対応の画像を用意する場合

device pixel ratio とは
デバイスピクセル比とかいわれている
デバイスピクセル(dpx)とCSSピクセル(csspx)の対応

スマートフォンの画面解像度とピクセル密度についてはこちらのサイトがとても分かりやすかったです。
http://myakura.github.io/n/density.html

CSS TRICKS
Retina Display Media Query
http://css-tricks.com/snippets/css/retina-display-media-query/

mixin

device pixel ratio が1.3にするとAndroidの高解像度デバイスにも対応するってことでしょうか
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集
http://www.webcreatorbox.com/tech/sass-mixin/

config.rbに追記するべき

imagesフォルダへのリンクはデフォルトだと絶対パスになる。
それを相対パスになるようにするには

生成されたcssにcompassのコメントが入るのを消したい

コメントアウトされてるので「#」をとる

スマホで使えるjQuery アコーディオンメニュー

スマートフォンで活用大のアコーディオンメニュー。

jqueryなら実装がカンタン。
dlパターン
htmlはこんな感じ

javascriptは

css

ulを使うパターン

デモ

scss でフォントサイズをremで指定するmixin

今さらながら、SCSSからCompassを使いはじめました。

今さらながら、その便利さに驚愕している日々です。

いろいろ覚えておきたいことは一杯あるのですが今日は基本となるfont-sizeの指定をカンタンにできるようにするmixinの覚え書き。

まずは、rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

そしてbodyを14pxを指定する場合、

css3のremの指定と対応していないIE対策としてpxを一緒に指定します。

これをmixinにするには

とし、18pxで表示したいところには

とするだけ!

めちゃくちゃカンタンになりました!

 

参考にさせていただきました:

SCSSで古いIEなどにもrem感覚でフォントを指定する方法

http://negimemo.net/1141

一定期間だけNew!マークを表示する

新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする

マークを表示したい場所に
※2014年1月31日まで表示する

テキストの場合:

画像の場合: