カテゴリー: 未分類
サーバーにアップしたpdfが真っ白
pdfへリンクさせるために記述したファイル名が間違っていたためにリンク切れでまっしろだっただけ。きちんとファイル名指定したら表示された
ヨガセンティアの月間スケジュール表
テスト
画像をまとめて縮小する リサイズProや Fireworksを使ってリサイズするときのトラブル 画像縮小
リサイズＰｒｏ使ってリサイズするときにはフォーマット箇所のExif情報のチェックは外す。そうじゃないと縦で撮った写真が横になった状態で書き出される
縦の画像が横になったときはFireworksで向きおｗ-90で保存すればExif情報を上書きできる。
Fireworksで保存や書き出す時は拡張子が自動で小文字で保存されるので画像が映らない時には拡張子がhtml側で小文字にちゃんとなっているか確認すること
自社ページの件 実例写真集の作業のメモ
提供された画像をいったんhtmlに入れる分だけフォルダに小分けする
リサイズＰｒｏでいったん全部50％にする
横長はリサイズＰｒｏで640 ｘ 480にしてサムネ用にファイルの末尾にｓをつける
縦長な画像はfireworksでまず-90で角度を正しく縦長にする。大き目のリンク用として保尊
こんどはそれのサムネを作るために640 ｘ 480 にリサイズカットしてファイル末尾にｓをつける
※オリジナルが大文字の拡張子であってもfireworksで保尊やかきだしすると小文字に自動変換される。小文字の拡張子しか保存や書き出しができない。html側で表示されなかったり挙動がおかしい場合は拡張子をチェック。
codepen.io で接続が拒否されました。
対処手順
Google Chromeを例に手順を説明していきます。
- どのブラウザでも良いので「codepen」にいきます。
2. codepenのページにたどり着けたらログインします。
（codepenのアカウントを作成を済ませて下さい。）
1回ログインすることができたら、ページに埋め込まれたcodepenのコードを確実に閲覧することができます。
それから使用ブラウザのキャッシュが切れたら、codepen.ioにアクセスしないともう一度埋め込みコードを閲覧することができなくなります。
codepenにログインせずに接続できるブラウザアプリとそうでないブラウザアプリがありました。
そして、codepenに接続ができない多くのブラウザアプリは「codepen.ioで接続が拒否されました」とメッセージが表示されるぐらいなので、codepen側に問題があるのだと思われます。
しばらくの間、今回の問題を簡単に回避する方法は「codepen.ioに一度で良いからアクセスすること」ぐらいかなと思います。
提供された写真をリサイズしたら表示されない。向きがおかしい スマホで表示されない
自社ページに専務からの建築実例写真を入れようとしたが、 リサイズ超簡単！Proでリサイズしたら縦で撮った写真の向きがサムネでもおかしいし、サーバーにあげたら表示されない。ローカルでは表示される。
原因はこれ
写真の向きが正常に表示されない理由
カメラやスマホで撮った写真をサイトやブログに投稿した時、画像の向きが変わってしまった経験はありませんか？
実はこの現象の原因は写真にあるのです。
カメラやスマホで撮った写真には様々な情報が保存されています。
これはExif情報（エグジフ情報、またはイグジフ情報）と呼ばれ、写真の向き情報の他、カメラやスマホの種類、焦点距離、F値などの設定や著作権情報などが含まれます。
またGPSが有効な機種やスマホの場合は、撮影した場所の情報を埋め込むこともあります。
リサイズプロのフォーマット箇所のExif情報の継承はチェックオフにする事！！
問題の解決方法
写真の向きが変わる時の簡単な対処法
では、写真の向きが変わってしまった時にはどう直したら良いのでしょうか？
パソコンに入っている写真ビューアで表示の回転をさせてから投稿しても効果がなかったという方も多いでしょう。
でもご安心ください！実は簡単な方法で写真の向きを変えることが出来るのです。
それはパソコン上で画像編集機能を使い、一度向きを直してから保存すること。
そうすることで、写真に埋め込まれたExif情報が上書きされ、正しい向きの写真になります。
OSや写真ビューアによっては回転と保存で同じ効果を得られますが、上手く行かない場合は画像編集を行うことで解決出来ます。
つまり画像加工をすることがポイントとなります。
これでサーバーでも表示されるようになった。
●リサイズプロのフォーマットではExif情報のチェックを外す
●画像ソフトで向きを変えて保存してExif情報をクリアする
ただ、ローカルで読み取りＱＲコードでスマホ確認しようとしたら、Lightboxが作動しても画像がでてこないが、
サーバーでは表示された
ソフト側の仕様だと思う。
PS.
dreamweaver側の問題だが、ときどきコードのコピペでやると、画像がサーバーで表示されない時がある。ローカルでは大丈夫。そんなときはコピペせずにきちんと挿入すると画像がサーバーでも表示される。
https://www.seo-pro.jp/seo/rotation
faviconが表示されない chrome
記述はこれでＯＫ → <link rel=”shortcut icon” href=”../image/favicon.ico”>
https://www.japan-secure.com/entry/what-to-do-if-favicon-is-not-displayed-in-google-chrome.html
foxで表示されているのにchromeではfaviconが表示されないとき、chromeのキャッシュクリアでもダメなときはchromeのシステム内のファイルの削除が必要となる。
※ブログで表示されないときは、ファビコンまでのパスを絶対パスにしとく
２、【ファビコンに関するファイルを削除する】
それでは次に「Google Chrome」に保存されているファビコンに関するファイルを削除するという対策方法について記載いたします。
「Google Chrome」に保存されているファビコンに関するファイルを削除するという対策方法に関しては、「Google Chrome」に保存されている古いファビコンに関するファイルを削除することにより、「Google Chrome」でファビコンが表示されないという不具合を改善するという対策方法になります。
そこでまずは、お使いの「Google Chrome」を終了してください。
次にお使いのキーボード上の「Windows ロゴマーク」及び「R」というキーを同時に押してから、ファイル名を指定して実行という画面を表示します。
次に名前という欄に以下の文字列を入力してから、OKという項目をクリックしてください。
＜文字列＞
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default
次に「Google Chrome」のフォルダ画面が表示されてから、以下のファビコンに関するファイルを削除します。
＜ファビコンに関するファイル＞
- Favicons
- Favicons-journal
以上で「Google Chrome」に保存されているファビコンに関するファイルを削除することができました。
「Google Chrome」に保存されているファビコンのファイルを削除するという対策方法に関する記載は以上です。
３、【Webサイト情報を強制的に更新する】
それでは次に「Google Chrome」に保存されているWebサイト情報を強制的に更新するという対策方法について記載いたします。
「Google Chrome」に保存されているWebサイト情報を強制的に更新するという対策方法に関しては、「Google Chrome」に保存されている古いWebサイト情報を強制的に更新することにより、「Google Chrome」でファビコンが表示されないという不具合を改善するという対策方法になります。
そこでまずは、お使いの「Google Chrome」を実行してください。
次に「Google Chrome」にファビコンが表示されないという不具合が発生するWebサイトにアクセスします。
次にお使いのキーボード上の「Ctrl」及び「F5」というキーを同時に押してください。
以上で「Google Chrome」に保存されているWebサイト情報を強制的に更新することができました。
「Google Chrome」でファビコンが表示されない場合の対策方法に関する記載は以上です。
動画変換 コンバーター
wordpressバージョンアップ 管理画面から失敗する
管理画面からバージョンアップしたら、
ダウンロードに失敗しました。: ファイルのチェックサム (d41d8cd98f00b204e9800998ecf8427e) が期待値 (f0adc091f4259fccd75f385f1a4c0ce0) と一致しません。
インストール失敗
となる。
https://teratail.com/questions/81692
管理画面からは失敗するので、直接wordpressのサイトからダウンロードしてFTPでアップしたらバージョンアップはできた
ハンバーガーメニュー エフェクト付きの 丸バーガー 円バーガー
※<link rel=”stylesheet” href=”css/bootstrap.min.css”> があると、スマホ時にプルダウンが初めからオープン状態でナビが開いてしまう。 どう改善したらよいかわからない。<link rel=”stylesheet” href=”css/bootstrap.min.css”>をとるとブートストラップのCSSが無効となってしまうし。
test-bugger/index4.html
http://cm-creation.net/yoshida/test-burger/index4.html
※スマホの幅に縮めると表示されるようにしてある。
html
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<title>CSSで作るハンバーガーメニュー！</title>
<link href=”css/common.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>
<body>
<header>
<div class=”inner clearfix”>
<h1><a href=”#”><img src=”img/h1_logo.svg” alt=””></a>
</h1>
<div class=”” id=”nav_toggle” >
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<ul>
<li><a href=”#”>MENU1</a></li>
<li><a href=”#”>MENU2</a></li>
<li><a href=”#”>MENU3</a></li>
<li><a href=”#”>MENU4</a></li>
<li><a href=”#”>MENU5</a></li>
</ul>
</nav>
</div>
</header>
</body>
<script type=”text/javascript”>
$(function(){
$(‘#nav_toggle’).click(function(){
$(“header”).toggleClass(‘open’);
$(“nav”).slideToggle(500);
});
});
</script>
</html>
CSS
::selection {background: #EBD25D;color: #ffffff; /* Safari */}
::-moz-selection {background: #EBD25D;color: #ffffff; /* Firefox */}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style:normal;
font-size: 100%;
vertical-align: baseline;
}
article, main, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
input, textarea {
margin: 0;
padding: 0;
}
ol, ul{
list-style:none;
}
table {
border-collapse: collapse;
border-spacing:0;
}
.both {
clear:both;
}
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
img {
max-width:100%;
}
table {
width:100%;
}
a:focus {
outline: none;
}
.fade-in {
transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
}
.fade-up {
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: transform 0.7s;
-moz-transition: transform 0.7s;
-webkit-transition: transform 0.7s;
-o-transition: transform 0.7s;
}
html{
height: 100%;
}
body{
background: linear-gradient(-135deg, #006598, #001464);
margin: 0;
height: 100%;
font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’, sans-serif;
}
img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.inner{
width: 960px;
margin: 0 auto;
}
header{
padding: 32px 0;
}
header .inner{
display: flex;
justify-content: space-between;
align-items: center;
}
h1{
width: 160px;
margin-right: auto;
}
header nav {
margin-right: -16px;
}
header nav ul{
display: flex;
align-items: center;
}
header nav ul li a{
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 16px ;
}
#main_img{
max-width: 960px;
margin: 0 auto;
}
#nav_toggle{
display: none;
}
.change_btn{
color: #fff;
display: block;
width: 100%;
text-decoration: none;
border: 1px solid #fff;
text-align: center;
padding: 25px 0;
font-size:20px;
margin-top: 40px;
}
/*スマホ・タブレット用の設定*/
@media screen and (max-width:960px){
header{
padding: 16px 0;
position: relative;
}
h1{
width: 120px;
}
.inner{
width: 90%;
}
#main_img{
width: 100%;
}
.change_btn{
width: 90%;
margin: 32px auto;
}
/*メニュー部分*/
nav{
display: none;
position: absolute;
top:72px;
width: 100%;
background: #006598;
left: 0;
margin-top: 30px;
}
header nav ul{
display: block;
margin: 0 auto;
width: 90%;
}
header nav ul li{
margin: 0 auto;
text-align: center;
border-bottom: 1px solid #fff;
}
header nav ul li:last-child{
border: none;
}
header nav ul li a{
display: block;
}
/*開閉ボタン*/
#nav_toggle{
position: relative;
z-index: 100;
height: 60px;
width: 60px;
display: inline-block;
box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 50%;
}
#nav_toggle div {
position: relative;
}
#nav_toggle span{
display: block;
height: 3px;
background: #fff;
position:absolute;
width: 50%;
left: 0;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#nav_toggle span:nth-child(1){
/*top:0px;*/
top:18px;
left:25%;
}
#nav_toggle span:nth-child(2){
/*top:12px;*/
top:28px;
left:25%;
}
#nav_toggle span:nth-child(3){
/*top:24px;*/
top:38px;
left:25%;
}
/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 27px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav_toggle span:nth-child(3) {
top: 27px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
Font Awesome アイコンフォントの使い方&カスタマイズ方法
desktop/font-awesome-4.7.0 にある
work/testTAB/index3.html
アイコンの種類を知るにはfont awesomeサイトのIconsからコードを取得する
※Firefoxなどで表示されない場合。
サーバーにダウンロードしたfont-awesomeのcssファイルを参照する際に、CDNを参照すれば解決できました。
以前はダウンロードしたCSSを参照していましたがそれでは表示されないので、下記のＵＲＬを指定する。
<link href=”http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>
Font Awesomeをカスタマイズしてみる
Font Awesomeにはちょっとたアレンジ専用のclassが割り当てられているので、class名を追加するだけで簡単にカスタマイズすることができます！
サイズや色、角度の変更や、くるくるとまわり続けるような動きまで色々あります。
サイズを変更する
専用のclass名を使用すれば、アイコンの大きさを簡単に変更することができます。もちろん自分でclass名・CSSを追記すれば、好きな大きさに変えることも可能です。
- 1.5倍： fa-lg
- 2倍： fa-2x
- 3倍： fa-3x
- 4倍： fa-4x
- 5倍： fa-5x
<i class=”fa-5x fa fa-apple“></i>
色を変更する
classを追加することでアイコン色の変更もできます。こちらだけは自分でスタイルシート(CSS)を記述する必要がありますが、やり方はfont色の変更と何ら変わりありません。
↓ HTML側の記述
<i class=”fa-skyblue fa fa-wordpress“></i>
↓ CSS側の記述
.fa-skyblue { color : #45B7DD; }
常にくるくると回転させる
画像を常に回転して表示させることができるので、ロード画面のような表現も簡単にできてしまいます！
<i class=”fa-spin fa-spinner”></i>
向きを変える
右に90度、180度、270度と回転させて向きを変更することができます。
- 90度： fa-rotate-90
- 180度： fa-rotate-180
- 270度： fa-rotate-270
<i class=”fa-rotate-180 fa fa-apple“></i>
反転させる
- 水平方向： fa-flip-horizontal
- 垂直方向： fa-flip-vertical
<i class=”fa-flip-horizontal fa fa-music”></i>
アイコンを整列させる
元々は全てのアイコンの横幅(空白部分)が違うのですが、クラスを追加することですっきりとキレイなリストに整列させることができます。
<i class=”fa-fw fa fa-apple“></i>
アイコン余白幅を揃える方法
https://hacknote.jp/archives/4350/
iconの幅はそれぞれバラバラなのですが、「class=”fa-fw”」を入れるだけで均等な幅に揃えてくれます。
<p><i class=”fa fa-time fa-fw“></i>スケジュール</p>
<p><i class=”fa fa-paste fa-fw”></i>掲示板</p>
<p><i class=”fa fa-phone fa-fw”></i>電話</p>
<p><i class=”fa fa-book fa-fw”></i>ブックマーク</p>
<p><i class=”fa fa-comments fa-fw”></i>チャット</p>
シネマグラフをphotoshop cs6で作る
https://liginc.co.jp/web/design/photoshop/102162
ファイル→開くで動画を読み込み
適用したい箇所でタイムラインの印の上で右クリック→クリップを分割
不要な部分はデリート
新規ビデオグループを追加して、対象ビデオをctrl+A ctrl+C して新規ビデオグループにctrl shift Vペースト してビデオの長さを下のビデオグループの長さと同じに調節する ビデオ2は止絵になっている
ビデオグループ2にベクトルマスクを追加 選択ツールで動かしたい箇所を指定し、塗りつぶしツールで黒く塗る
ファイル→webように保存 GIF形式にして ループオプションを無限にする
web上でzipファイルなどダウンロードさせるには
割合計算
％は百分率といって、全体を１００としたときの割合です。
８０％といえば、全体が１００のときの８０です！という意味です。
ということは例えば、５００の４０％を求めよ。ときたら
１００にしたときの４０（全体の４０/１００ということ）
これに５００を掛けるので
５００＊（４０/１００）＝２００ となる。
ある数の何％なら
ある数＊（何/１００）＝答え です。
何割については、野球の打率で何割何分何厘とよく聞くと
思いますが、全体を１と考えて
１割＝０．１、１分＝０．０１、１厘＝０．００１です。
よって、２割引といえば、１から０．２を引いて全体の０．８です。
５００の２割引きは
５００＊（１－０．２）＝４００
したがって、ある数の何割引きは
ある数＊（１－０．何）＝答え
になります。
何割引きのときは、まず何割を考えてもいいかもしれません。
画像の比率計算
NextGen Gallery ギャラリープラグイン wordpress
http://www.adminweb.jp/wordpress-plugin/list/index13.html
http://www.adminweb.jp/wordpress-plugin/list/index14.html
http://sharinglab.info/wordpress/wordpress-plug-in/design/nextgen-gallery20-2/
管理画面を日本語化するパッチは現在ないようだ。
インストールされたバージョンが既に数カ所は日本語なので、たぶんその部分だけ。ほぼ英語だけみたい。
キャプションについて
https://ja.forums.wordpress.org/topic/5242
サムナイルのサイズ
Galley → other options → thumbnail option でサイズを決定
【追加２】ギャラリーの画像サイズはレイアウトに沿って
サムネイルの画像サイズを設定する。
管理画面ー＞ギャラリーー＞オプションー＞サムネイルで指定。
サムネイルのサイズを変更したら、既に登録済みの画像のサムネイルは、 再作成する必要がある。
管理画面ー＞ギャラリーー＞ギャラリー管理より、再作成する。
サムネイルのカラム数
あと小技としては、レスポンシブ対応のテーマを使っている場合は、Gallery settings の Number of columns は「0」にしておいて、cssのほうでwidthを設定すると吉。
Number of columns はカラムの個数（写真の横並びの個数）を設定する項目なので、3とか4とか入れるとレスポンシブっぽくヌルヌル動いてくれません。
|
1
2
3
4
|
.ngg-gallery-thumbnail-box {
float: left;
width:280px;/*ここでwidth設定する 3列なら 33%とか*/
|
※.ngg-gallery-thumbnail-box だけで指定するとオリジナルのCSSが優先されるので包含している要素から指定すること。
もし、２カラムにしてwidth:50%にすると、スマホ横向きの時に、元の画像が小さいと、スペースがものすごく生まれる。いろいろやったがだめ。3カラムにしてwidthを30％で体裁ととのえた。
NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる
2014年1月31日 by itprobe
NextGEN Gallery自体はデフォルトではレスポンシブに対応していませんから、
横並び1列の画像数は表示カラム数を指定せず、「Gallery Settings」の「NextGEN Basic Thumbnails」にある、
「Number of columns to display」の値は0にしておいて、CSSのwidthを適切な％で設定しましょう。
コンバージョンの設定の仕方
wp social bookmarking light
page.phpへも使える