読者です 読者をやめる 読者になる 読者になる

kojiokanoのブログ

コーディング業務で困ったところをまとめています。

hamlで作成したフォームのplaceholder内で改行したい時の対処法

lp_861のテキストエリアで使った方法

↓使用例

--------------------------------------------------------------------------------------

haml

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[1].id
= a.text_area :body,class:'placeholder placeholder-option', placeholder:'1行目はここに書く'

--------------------------------------------------------------------------------------

sass

.placeholder-option::-webkit-input-placeholder::after
display: block
content: "2行目はここに書く\a3行目はここに書く\a4行目はここに書く"

 

\aは改行コード

--------------------------------------------------------------------------------------

 

↓参考ページ

http://nyaahara.hatenablog.com/entry/2015/05/01/113100

LPのトップページをnoindex、followにする

LPの最初ページをnoindex、followにすることがあります。

そうすることでindex(検索結果での表示)を拒否しながらリンクをたどることをrobotに許可することができます。

やり方はLPの最初のページのhead内に↓の書き込みをしてあげればOK

  

%meta{:content => "noindex,follow", :name => "robots"}/

 

 これで大丈夫なはず。

これから作るLPには基本入れていく予定です。

テキストの組み合わせでデザインする際のポイント

文字を画像にせず、なるべくテキストで表示させたい(seo的な観点から)ということがあるかと思います。

例えば

↓のようなデザインであれば

f:id:kojiokano:20161212170615j:plain

 

↓のようにほとんどデザインを崩さずテキスト化が可能です(ブラウザによって見え方は多少かわります)

f:id:kojiokano:20161212170626j:plain

 

この例のように漢字とひらがなで文字サイズなどを変更する際はspanクラスでそれぞれの文字を選択し適応するcssを変えます。そのとき隣り合うspanクラスの間に大きな隙間が空きます。通常文字間のスペースの変更にはletter-spacingを使いますが、隣り合うspanクラスの間の隙間には適応されません。そこで左に表示されているspanクラスのmargin-rightにネガティブマージンを設定してやることで右に来るspanクラスの位置を調節できます。

調節は細かく面倒ですが、ページの関連度が上がれば検索をかけたときにより上位に表示されますし、リスティング広告などの料金も下げられる可能性があります。その他にも画像が無いことでページの読み込みが早くなったりといいこと尽くめですので、時間があるときはなるべくテキスト化をしてみてはいかがでしょうか。

 

LPのBEMルール

BEMルールを共通化して誰が見ても理解できて編集しやすいLPをつくることが目標

 

 

 

使用例

Block__Elements--Modifire

__Elements はアンダーバーを2つ使用
--Modifire はハイフンを2つ使用

例 list__item--big

 ↑なぜこのような書き方かと言うとLPのフレームワークがMDLを採用しているため(MDLはBEMを使用している)MDLで使われている書き方と同じにしたからである。

同じファイル内で2種類以上の命名規則が存在すると混乱するためMDLの命名規則にあわせている。

 

なるべく独自性の強いクラス名は付けない(汎用性が低くなるため)

.mt10みたいなパーツは作らないでBEMに忠実に命名する ※(margin-top:10px;)

classはstyle.sassに記述する_baseにはheaderやh1などのクラスではないオリジナルな要素のstyleを書くのでclassのstyleはstyle.sassに書くこと。

 

例えば下図のようなヘッダーがあったらブロックごとにBEMで命名していく。(headerという大きなブロックの中にエレメントとしてロゴなどが入っているのではなく、headerのブロックにlogoのブロックが入っている構造にすること。親要素を継承し続けるとcssが複雑になりわかりづらくなるので、ブロックの中にブロックがある状態でつくるほうがよい。)

f:id:kojiokano:20161212123625p:plain

 

 

 sass書き方例

.main
  width: 100%
  overflow: hidden
  display: table
  padding: 0

  &__item
    float: left
    position: relative
    vertical-align: top
    height: 24px
    line-height: 24px

    &__item--active
      float: left
      position: relative
 

 BEMの関係: main__item--active      

mainがblock,itemがelement,activeがmodifire

 

 

これから↓調べてまとめること

 

●ブロックのあとにモディファイアをつけてもOK!

 

●汎用性のあるクラスを作る必要は無い。ルール

 

●box-sizing

 

●フレッスボックス

 

iphoneのsafariでボタンの表示がおかしくなる場合の理由と対処法

LPなどのページを作っているとき、PCのブラウザでの互換表示ではちゃんと表示できていたのに、サーバーに上げて実機でみたら表示が違ったなんてことがよくあるとおもいます。

その原因の1つとしてiphoneios)のsafariはinput要素にグラデーションを勝手につけてしまうということがあげられます。

これはiosのみの仕様のようでmacbookでは見られない挙動でした。(2016年12月現在)

これを無効化するためにcssかsassでinput要素に以下の書き込みが必要になります。

 

cssの場合↓

-----------------------------------------------------------------------------------------------

input{

  -webkit-appearance: none;

}

-----------------------------------------------------------------------------------------------

 

 

sassの場合↓

-----------------------------------------------------------------------------------------------

input

  -webkit-appearance: none

-----------------------------------------------------------------------------------------------

 

これでOK

 

参考ページ↓

pressstocker.com

LPへのPDF貼り付け方

無料でガイドを見る系のLPでpdfファイルを見せたい場合があるかと思います。

LPページではpdfは他の画像ファイルとは異なる扱いになっているためフォルダの場所なども特殊です。

以下がpdfの貼り付け方になります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

pdfファイルの格納場所

hogehoge-landingpage/app/assets/files/forms/lp_hoge/hoge.pdf

hoge部は任意の数字か文字を設定

※jpg等と同じ画像フォルダにpdfを入れるとコンパイルされず、リンクも貼れないので注意

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

haml

= link_to 'PDFをダウンロードする', asset_path("forms/#{@form.prefix}/hoge.pdf"), :rel => "nofollow", :target => "_new"

※この書き方(asset_path)でないとコンパイルされたファイルに対してリンクが貼れないので注意

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

参考例は以下のLPのthanksページ(リンク無し)

LP812/thanks

 

スマホでフォームをタップした時にテンキーが表示されるようにする

LPで電話番号などの数字を入力する項目はよくあると思います。スマホユーザーが項目をタップすると通常はテキストのキーボードが立ち上がりますが、最初からテンキーを表示してやることでページからの離脱を減らすことができるかと思います。

方法は以下これを足すだけ↓

<input type="tel">

↑をつけてやるだけでブラウザが最初からテンキーを立ち上げてくれます。

(アンドロイドもiphoneも最新のosが入っていれば対応していました)

LPの場合はhamlでさらにフォームを吐き出す感じなので↓のように赤文字部分を足すだけでOK

= f.text_field :tel, class: 'w100 validate[required]',type: 'tel',placeholder: '例:03-1234-5678',:"data-errormessage-value-missing" => '電話番号を入力してください。'

 

cv率上がりそうなので、スマホからの流入がある場合すべての数字入力フォームに使いましょう。

 

備考

input type="password" にすると英語のキーボードを表示

input type="text" にすると日本語キーボードを表示

input type="date" にすると日付の選択を表示

他にも色々とありますが、アンドロイドとiosによって表示が変わったりもするので検証して使ってみてください。