投稿

Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

android4.2のwebviewでdocument.write();が使えない

ウェブページが表示される画面サイズによって自動的に数値を入れるjavascriptを作成したのだが、androidタブレットのアプリ内webviewで表示した時に見栄えがどうもおかしかった。 androidのバージョンを調べたところ、4.2だった。 どうやら、4.2だとCSS3が使えないとのこと…。 更に、document.writeが対応しないという記事も見つけたので、代替え案を模索。 document.write(s); ↓ document.getElementById("WinSize").innerHTML = s; とすることで、無事表示される。 HTML側では、 <div id="WinSize"></div> とすることで、解決しました!

habakiriテーマで印刷がスマホ・タブレット表示になってしまうのを回避するスタイルシート

wordpressのhabakiriテーマを利用してホームページを作成しているのですが、「印刷しようとしたら表示がおかしい」と言われ、回避策を探しました。 とはいえ、最近ホームページを印刷するなんてあまり無いだろうと自分も思っていたのだが、まだまだ一部印刷需要はあるらしく…。 そのまま印刷しようとするとブラウザによっては(というかほぼ全てのブラウザ)スマホサイズの見栄えで印刷されてしまったり、タブレットサイズの見栄えで印刷されてしまったりします。 そもそもhabakiriテーマは、bootstrapを利用しています。 そこで、bootstrapを利用したサイトを印刷しようとした時に、主に同じ問題に当たるそうで、bootstrap用のprint.cssを見つけました! https://github.com/onocom/bootstrap-print これを、habakiriの子テーマの直下に配置します。 style.cssと同じ階層です。 そして、子テーマのheader.phpに以下を追記します。 <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_template_directory_uri(); ?>-child/print.css">  ←この行を追加 <?php wp_head(); ?> get_directory_uri は、親テーマのパスまでを呼び出してくれるところなので(つまりhabakiriのところまで)。 自分は「habakiri-child」という子テーマフォルダ名にしていたので、「-child」という文字を追加して、その直下のprint.cssを見に行くように共通ヘッダーへ追加しました。 そして更に、子テーマのstyle.cssに以下を追加します。 @media print and (min-width: 992px){ .container{ width:950px; } } @media print and (min-width: 768px){ .container{ ...

habakiriの子テーマでウィジェットエリアを追加してページフッターに横並びメニューを表示するその2

habakirriの子テーマにウィジェットエリアを追加して、ページフッターにメニューを表示するようにできました。 こちらのページ参照 引き続き、メニューを横並び表示にしていきます。 ①追加したフッターのclassにCSSを適用していきます。 style.css /*右詰めにします*/ .footer-menu-area{    text-align:right; } /*リストの上下に余白を取ります*/ .footer-menu-widget ul{ margin-top: 1em; margin-bottom:1em; } /*リストを横並びにして、リスト同士の間隔を開けます*/ .footer-menu-widget li{ display:inline-block; margin-left:1em; } /*ついでに、各リストの頭に矢印(>)アイコンをつけちゃいます*/ .footer-menu-widget a::before{  font-family: "FontAwesome";  content: "\f138"; padding:4px 0; margin-right:10px;   -webkit-font-smoothing: antialiased;   display: inline-block;   font-style: normal;   font-variant: normal;   text-rendering: auto;   line-height: 1; } 以上。 habakiriテーマはfontawesomeを使用しているので、公式サイトにアクセスして、表示したいアイコンを選択すると、その詳細ページにアイコンを直接表示する方法( ■補足■ display:inline-block; その要素をインラインブロック(横に並ぶブロック)になります。 a::before aタグの直前にcontentの中にある文字などを追加できます。

sakuraのサーバーにwordpressを簡単インストールした時にディレクトリを指定するが…

さくらインターネットのレンタルサーバーでwordpressをクイックインストールする際、インストール先のディレクトリを指定しなければならない。 http://***.com/wp/  ←のように。 しかし、このままだと本来表示したいドメインに直接アクセスした場合はwordpressのトップページが表示されないので、よく見かけるのは、wp/の中にあるindex.phpと.htaccessをルートディレクトリへコピーして、なおかつ中身を変更する方法。 ただ、無事ページが表示されたのはいいものの、テーマ内のcssやjsを読み込む部分。 主にheader.phpの「get_template_directory_uri();」のところが、実はサブディレクトリへのパスが表示されてしまっていて、うまく動作しないという現象に当たった。 そして、どうやらsakuraのドメイン設定の中をいじれば、サブディレクトリ自体をドメイン直として指定することができるようなので。テストしてみた。 ■さくらサーバーでドメインを追加すると、その独自ドメインのディレクトリは↓のようになる home/アカウント名/www/独自ドメイン用フォルダ名/ そして、wordpressをインストールすると、以下のフォルダに格納される home/アカウント名/www/独自ドメイン用フォルダ名/wp 【よくあるやり方でやってみる】 1.wordpressのインストールフォルダ直下にあるindex.phpをコピーしてくる 2.同じく.htaccessをコピーしてくる 3.管理画面の「設定」→「一般」の  「サイトアドレス(URL)」の方に、実際に表示したいURLを。 4.実際に表示されたいドメインのフォルダ直下に1と2をアップロードする  ※この時、index.phpの中身を以下のように書き換える 17行目あたり require( dirname( __FILE__ ) . '/wp-blog-header.php' ); ↓ require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' ); wpの部分は、インストールしたディレクトリ名。

wordpressの投稿ページでカテゴリーごとに表示するメインメニューを変える

固定ページごとにヘッダーやメインメニューを変更すると、投稿ページだけは基本のメインメニューやヘッダーが表示されてしまうので、こちらも変更する必要がありました。 ①メインメニューを増やす こちらを参照 ②投稿カテゴリーを判断して表示するメニューを変える 1.module/gnav.phpをカスタマイズする。 14行目に以下を挿入する <?php do_action( 'habakiri_before_global_navigation' ); ?> <!-- ここに以下を追加 --> <?php if ( in_category(array('news')) ): ?> <?php if ( has_nav_menu( 'menu1' ) ) : ?> <nav class="global-nav js-responsive-nav nav--hide" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'menu1', 'depth' => 0, ) ); ?> <!-- end .global-nav --></nav> <?php endif; ?> カテゴリーが「news」の場合 「menu1」のメニューが設定されている場合 「menu1」のナビゲーションを表示します …というif文の流れです。 元々14行目にあった部分は以下のように修正します。 <?php if ( has_nav_menu( 'global-nav' ) ) : ?> ↓ <?php elseif ( has_nav_menu( 'global-nav' ) ) : ?> もし「グローバルメニュー」が設定されていたら というところを、 「menu1」が設定されていたらそれを表示する それ以外の場合でもし、「グロー...

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用