header.phpの検索部分(下記)を1行づつ(//)コメントアウトする
作成者別アーカイブ: miyakawa
ソースコードにコメント入れる。ソースをコメントアウトにする方法
■HTMLの場合
<!– コメントアウト –>
<!–
コメントを複数行
可能になります
–>
■CSSの場合
/* コメントアウト */
/*
コメントを複数行
可能になります
*/
■PHP、JavaScriptの場合
// この行だけのコメント、コメントアウト
/*
コメントを複数行
可能になります
*/
■PHP、Wordpressの場合
<?php /* ?>
コメントや使用しないコードを消す
<?php */ ?>
WordPress タイトル文字を任意の画像ロゴに変更する
style.cssとheader.phpを少し変えてやれば可能。
まず、ロゴの画像(今回はlogo.png)を「メディア」から「新規追加」する。
その時にファイルのURLをコピーしておく。
https://www.coralreference.com/wp-content/uploads/2012/02/logo.png
次に「外観」「テーマの編集」で「style.css」「header.php」を変更する。
■style.css
ヘッダー部分に下記を追加
/* =Header
———————————————– */
#site-title-logo {
width: 330px; /* ロゴの高さ */
height: 90px; /* ロゴの横幅 */
text-align: left;
margin-top: 40px; /* ロゴの上スペース */
margin-bottom: 40px; /* ロゴの下スペース */
}
を追加する
■header.php
元
<hgroup>
<h1 id=”site-title”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span></h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>
変更
<hgroup>
<h1 id=”site-title-logo“><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”https://www.coralreference.com/wp-content/uploads/2012/02/logo.png” width=”330” height=”90” /></a></span></h1>
</hgroup>
以上で変更されます。
IEのサイト表示が確認ができる
Macで制作しWinのIEで表示確認をしますが、いろいろなバージョンを実機でテストするのに手間がかかる場合、サクッとチェックできるサイトです。
サイトのアドレスを入れると画像として表示してくれます。なのでリンクとかマウスオーバーとか…は動作しませんが、全体のチェックには便利です。
IEでの横幅も上部に出ます。ただ縦幅は全部はでませんが「Render」ボタンの左横ボックスに数値を入れれば下の方も見れます。
IE NetRenderer
Internet Explorer 9, 8, 7, 6 or 5.5,
http://netrenderer.com/
Google PageRankを確認するアドオン
Googleのページランクを確認できるアドオン。
下記のブラウザーに対応
PageRank for Google Chrome
PageRank for Firefox
PageRank for Safari
PageRank for Opera
いろいろな画面サイズで確認する
制作したウェブサイトを、PCやタブレット、スマートフォンでの見え方を確認できる便利サイト。
Simple Media Queries Tester
http://bueltge.de/test/media-query-tester.php
QuirkTools
http://quirktools.com/screenfly/
WordPress メニューバーの色設定
style.css内の「Menu」部分を変更する
簡単にバックを白にするには「#FFFFFF」とラインを「0px」する。
それと文字の色をグレー「#797979」あたりにする。
#access {
background: #222;
background: -moz-linear-gradient(#252525, #0a0a0a); バックグラデーション上部分変更
background: -o-linear-gradient(#252525, #0a0a0a); バックグラデーション下部分変更
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a));
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 枠のライン設定全部0pxだと消える
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 枠のライン設定全部0pxだと消える
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 枠のライン設定全部0pxだと消える
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee; 文字の色
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}