忍者ブログ
17 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

16 October

tabelのcssをレスポンシブに対応させる。table内の文章がはみ出る。

tabelのcssをレスポンシブに対応させる


table th, table td{
    display:block;
    width:100%;
}

table thとtdにdisplay:block;を指定する
tableだと display:table がデフォルトで指定されてるため、
display:block; することで横並びを解除し、ブロック要素ごとに改行される

table内の文章がはみ出る。

table.formTable td div{
    word-break:break-all;   
}


【MailForm01】PHP多機能メールフォーム　フリー（無料）版　を使用
http://www.php-factory.net/mail/01.php

tableでお問い合わせフォームを作成し、スマホで「確認画面」を見たところ、
お問い合わせ内容のテキスト文章が一列でだーーーーーーーーーーーっと右に行って
横スクロールバーがでてしまった。
チェックボックスで選択された項目が多いと、それも右にだらっといって、
width:100%;　通りに自動改行してくれない。

調べると　word-break:break-all; 　を指定するとよいようだ。
しかし指定しても改行してくれない。table属性に直接指定しても無視される。
そのため　td th 内をdivやpなどで囲う必要がある。

mail.php内のオレンジ色のところにdivをつけたして出力されるようにした。

function confirmOutput($arr){
～～～～～～～
        $html .= "<tr><th>".$key."</th><td><div>".$out;
        $html .= '<input type="hidden" name="'.$key.'" value="'.str_replace(array("<br />","<br>"),"",$out).'" />';
        $html .= "</div></td></tr>\n";



PR
27 September

静的HTMLにWPを埋め込む方法　さくらサーバー

<?php require_once('blog/wp-load.php'); ?>
<!doctype html>

ドックタイプ宣言の上にwpを読み込むタグを書く
blog　のところは、wpのファイル群をインストールしたディレクトリ名


Action myphp-script /php.cgi
AddHandler myphp-script .php .html

さくらサーバーの場合.htaccess内に上記を書き込む。
そのあとphp.cgiファイルを作るとかなんとかだがなんか私のFTP内には.cgiが見当たらない･･･。
作った記憶があるが動かないとか色々やって削除したかもしれない･･･
でも現時点で.cgiファイルがなくてwpの内容を静的htmlに引っ張れている･･･


静的html内にwpで書くようなphp構文を書き込む

cssで整形


うまくいった。がしかし、新着更新履歴だけを表示したいなんて場合はこれでいいが
私はブログ投稿そのものを表示させ、ページ送りまでつけたかった。
ページ送りがやばかった。
wpのページネーションは飛ぶ生成リンクがwpのものなので使えない。改変もわからない。
じゃあ、JQueryのページネーションはどうだと色々やるが、動かないのが多い。
動いてもここが動かない、3記事づつ送りたいのに1記事しか送れない。
3記事にするにはjsのfor文を使ったループを改変しなくてはいけないけど、
全然わからない。何をいってるかまでは理解したがどう改変していいかわからず。
色々変えてみても動かず。
通常で複数記事でページネーションしてくれるのは、なぜかnext　prevボタンのリンクがきかず。
あっちはこれだめ、こっちはこれだめで全然うまくいかない。

それにSEO考えると、個別記事に飛ばせないようにする静的htmlへの呼び出しはどうなんだと
思ってきて、もうだったら、ブログのページだけWPをリンクするほうが楽なんじゃないかと
思ってきた。もうそうした。はあ･･･

本当は静的htmlにwpタグで呼び出すだけで使いたかったが、ページネーションつきで
もってくるのは無謀かもしれなかった。

16 September

floatしたリストを中央寄せにしたい

http://www.webdesignleaves.com/wp/htmlcss/451/

  1. .ulを囲うdiv {
  2. position: relative;
  3. overflow: hidden;
  4. }
  5.  
  6. .ul {
  7. position: relative;
  8. left: 50%;
  9. float: left;
  10. }
  11.  
  12. .ul li {
  13. position: relative;
  14. left: -50%;
  15. float: left;
  16. }
16 September

スマホ　mediaクエリ　あれこれ

縦置き

@media (orientation: portrait){

  }
}


横置き
@media (orientation: landscape){

  }
}
正確な意味としては縦置き横置きとは違うらしいが、もう面倒だからいいだろ。
小さい画像を縦と横で大きさを変えたい、とかいうときにmediaクエリでpxサイズ指定が調べるのもめんどいのでこれでいいよもう