カテゴリー: 岩瀬工務店

Feed Wind に切り替え！　Google Feed Apiが廃止された！

Google Feed Apiが突然廃止となり、feedが表示されなくなった。替わりにFeed Windというジェネレーターでjavascriptを作りhtmlへ張り付けた。

http://blog-sierrarei.com/blog/2015/12/googlefeedapi-feedwind/

ちなみに、どうやってもfeed2jsにfeedされない野末建築のRSSもこれなら表示される。

入力設定時、widthはピクセル実数で入れなくてはならないのだが、このままだと、レスポンシブにしたときに、幅が広がらずスクロールバーが中途半端な箇所にでる。これを解消するために、下記CSSを記述すると回避できる。

.jspContainer {
width:100%;
}

FEED WIND  http://feed.mikle.com/ja/

 

投稿日付に時刻を入れない方法

http://feed.mikle.com/ja/support/strftime/

ジェネレーターで作ったコードの下記部分替える。

（１）rssmikle_item_dateの値をjaからgl1に変更します。
【初期設定】rssmikle_item_date: “ja”　→
【修正後】rssmikle_item_date: “gl1”

（２）次に日付のフォーマットを下記のように記載します。
【初期設定】datetime_format: “”　→
【修正後】datetime_format: “%Y年%m月%d日”

 

上の例ですと、時刻が非表示となり「2014年11月05日」と表示されるようになります。

 

CSSのカスタマイズ方法

http://feed.mikle.com/ja/support/using-costom-css-with-feedwind/

 

カスタマイズには外部CSSを作る必要がある。

 

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とか入れるとレスポンシブっぽくヌルヌル動いてくれません。

http://mcbrain.jp/8805/

 ※.ngg-gallery-thumbnail-box　だけで指定するとオリジナルのCSSが優先されるので包含している要素から指定すること。

 

もし、２カラムにしてwidth:50%にすると、スマホ横向きの時に、元の画像が小さいと、スペースがものすごく生まれる。いろいろやったがだめ。3カラムにしてwidthを30％で体裁ととのえた。

 

NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる

itprobe 2014年1月31日 by itprobe

NextGEN Gallery自体はデフォルトではレスポンシブに対応していませんから、
横並び1列の画像数は表示カラム数を指定せず、「Gallery Settings」の「NextGEN Basic Thumbnails」にある、
「Number of columns to display」の値は0にしておいて、CSSのwidthを適切な％で設定しましょう。

140131-02

http://entrys.jp/wordpress/blog/837

hタグとimg seo

http://w3q.jp/t/3708

 

ダメといいますか、h1にはSEO的にもテキストが最適なのでimgは控えるべきだと言われまして、imgを入れようとしていたのでどうしようかと思っていた所でした。文法的に問題ないのですね、imgといっても会社のロゴ等なので安心して配置できそうです！

2013-03-23 · ID:QXVNvUxdOAHgテキストが最適というのは間違いですよ。画像でも何ら問題ありません。画像とaltが一致していればいいのです。
ユーザー目線で考えることを忘れないほうがいいです。誰のためのサイトなのか、誰に情報を伝えたいのか。たとえ画像でも正確に正しくユーザーに伝わればいいのです。そういったことはGoogleなどの検索エンジンアルゴリズムは理解できるようになっています。

2013-03-22 · ID:TLbujehH5t42報告

そもそもhtmlの文法って本当に意味あるのかな？
コーディングする上での決まりごとって意味ではあるけど、タグとseoは関係ないというのが公式見解だし。(text-indentの悪用とかペナルティ受けるようなのは除く)

2013-03-22 · ID:JkFSYiglz6MI報告

なんとなくテキストの方が良いみたいな雰囲気があった時代もありますが、今は問題ないかと思います。

IE11でレスポンシブされないって思ったけど

ローカル環境での動作確認は不可

HTTP接続によって閲覧しないとこのJSは動作しない 以上の条件下による制約はありますが、CSS3 Media Queries.jsとRespond.jsの組み合わせによりIE8以下にもレスポンシブが対応できますが、あまり意味はないかも・・・。

IEはローカル環境ではcss3をつかさどっているMedia Queriesが働かずレイアウトされないが、HTTP接続してサーバー下では作動される。

ビビった。

http://tokidoki-web.com/2013/05/%E3%80%8E%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/

背景画像の透過

http://index-japan.jp/?p=1732

opacityは子要素も透過させる 背景の上に半透明の要素（画像ではない）を乗せて透過させるにはrgbaを使う  rgbaへの色 ステップアップブックｐ181 最下層の画像を半透明にすることはどうやらできないようだ。だから、画像そのものを半透明にして書き出す必要があるみたい。   書式 書式は今まで16進数カラーコード（ff9966など）を指定していた箇所に、 rgba(R赤,G緑,B青,Aアルファ値); と色別にカンマ（,）で区切り指定をします。 各色には0～255までの色の濃さを示す数値を入力し、最後には0～1（小数点で0.5など）でアルファ値を指定します。   ステップアップブックｐ182   http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14115190739

opacityは子要素もすべて透明化するので 文字なども もちろん透明化されますよ

 

rgba 変換ツール　http://j-press.info/16torgba/

 

大きな画像がipadの横画面ではみ出す。　img %

レスポンシブにするために大きな画像一枚を以下のように設定したがipadの横画面でははみ出してします。

#TopContainer #block3 {
height: auto;
width: 1183px;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 80px;
text-align: center;
}

#TopContainer #block3 img {max-width:100%;
height:auto;}

 

どうやらwidthをpx実数で設定したのが原因のようだ。おおきすぎるのだろうか？widthを%にしていしなおしたらレスポンシブになった。

#TopContainer #block3 {
height: auto;
width: 80%;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 80px;
text-align: center;
}

#TopContainer #block3 img {max-width:100%;
height:auto;}