Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

当該記事内容は最新OS、最新ブラウザでの閲覧をおすすめします。また、IEは11でも閲覧に支障があります


スマホなんかは画像編集アプリの優れものがたくさんあるわけですが。
その画像が「サムネイルとして利用されるかもしれない」ことを考えると、枠がついていたりなどの画像は不向きです。
サムネイル と一口に言っても、その縦横比は様々ですので、せっかく入れた文字が見切れたり。
外回りについている枠が中途半端に見えていたり。などなど。

サムネイル対象画像として「素」の画像を入れておく(アイキャッチ指定するなどして)というのはかなり使える方法です。
装飾が邪魔になる場合には加工前の画像をアイキャッチ指定するなりの小ワザを効かせておくと良いですね。
なので画像を編集する際には上書きを避けて元画像は取っておく、と (´・ω・`)

サムネイル用に別画像を指定するということは、ローディングの際にひとつ余分が増えるわけですので、それが嫌だというストイックな方は画像編集を利用せずCSS装飾を行うのもひとつの手かと思います。
FC2ブログ上では、サムネイル対象画像にCSS装飾が行われていても、トップページや関連記事のサムネイルになる場合にはCSSが取り除かれます。

というわけで、CSS画像装飾いろいろ。
独自クラスの利用は避け、記事内で完結できるものを厳選しました
さすればテンプレート変更しても内容がそのまま生き残ります。
なので複雑なものは掲載しません。
ごく単純なものばかりです。

サンプルとしてこちらの画像を使用します。

元画像 (縮尺掲載 1000 x 666, 29KB)




要件
  • レスポンシブであること
  • 独自クラスを利用しないこと
  • valid(htmlが正確)であること

などです。


CSSフィルター


まず注意点
IE11を当てにしてはいけない
IE11では無効になるエフェクトも多くあります(未実装あるいは誤解釈やグリッチなど)
11以下についてはもうほとんど無理だと思ってください(そもそも私のテンプレの場合はサポート外)
ベンダープレフィックスはwebkitのみ
Firefox用の -moz- やIE用の -ms- などは入れていません。
-webkit- のプレフィックスはSafari(iOS含む)や古めのChromium系ブラウザに有効です。
小数点の数値 0 は省略しています
推奨の書き方ですのでここでは遵守します。
例)
X 0.5
✔ .5

① セピア







<img src="画像アドレス" style="-webkit-filter: sepia(50%); filter: sepia(50%);" alt="代替テキスト">



② ドロップシャドウ








<img src="画像アドレス" style="-webkit-filter: drop-shadow(6px 6px 5px rgba(0,0,0,.5)); filter: drop-shadow(6px 6px 5px rgba(0,0,0,.5));" alt="代替テキスト">

注)
私の製作したテンプレートでは img に 独自クラスの class="shadow-attachment" でも影が付きますが、見た目はほぼ同じでもCSS内容が異なります。
古いIEの閲覧が心配な方は独自クラスの方をお使いください(記事の主旨に反するが)

このdrop-shadowはめちゃくちゃ便利です。そして box-shadow とは全く別物です。
drop-shadowはこういうこともできます ↓

元画像 (背景透過png)



drop-shadow付加



わかりますかね (´・ω・`)
「背景透過」というのはオブジェクト周りの不透明度を0にし、背景が無いように見せていますが、実際の画像というのは 四角形 です。
不透明度0%(透明度100% = 完全透明)の背景が「有る」と考えるべきものです。
しかしこの drop-shadow ではオブジェクトを認識してその周りに影を落としてくれます。
従来だと画像編集に頼るしかありませんでした。
box-shadowはオブジェクト認識はしませんのでこうなります ↓



ただしbox-shadowとは違い、拡がりの距離指定, 内向き(inset)指定はできません


③ 不透明度







<img src="画像アドレス" style="opacity: .5;" alt="代替テキスト">

注)
透明度ですので、数字が大きいほど透けなくなります。
最小値 0 で完全透明、最大値 1 で完全不透明


④ 明度









<img src="画像アドレス" style="-webkit-filter: brightness(.5); filter: brightness(.5);" alt="代替テキスト">

注)
暗くするには .数字
1でデフォルト(変化なし)、0で真っ暗(真っ黒)
明るくするには 1.数字
デフォルト1(変化なし)、明るさ上限なし(人の目の可視・不可視は当然あります)


⑤ 彩度







<img src="画像アドレス" style="-webkit-filter: saturate(200%); filter: saturate(200%);" alt="代替テキスト">

注)
パーセンテージ指定。上限なし。


⑥ グレースケール







<img src="画像アドレス" style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" alt="代替テキスト">

注)
パーセンテージ指定。上限100%


⑦ 階調反転







<img src="画像アドレス" style="-webkit-filter: invert(100%); filter: invert(100%);" alt="代替テキスト">

注)
パーセンテージ指定。上限100%


⑧ 色相変換







<img src="画像アドレス" style="-webkit-filter: hue-rotate(250deg); filter: hue-rotate(250deg);" alt="代替テキスト">

注)
度数(degree)指定。360deg


⑨ コントラスト







<img src="画像アドレス" style="-webkit-filter: contrast(200%); filter: contrast(200%);" alt="代替テキスト">

注)
パーセンテージ指定。上限なし。


⑩ ぼかし







<img src="画像アドレス" style="-webkit-filter: blur(5px); filter: blur(5px);" alt="代替テキスト">

注)
ピクセル(px)指定。上限なし。


基本のボーダー


簡単額縁風ですね (´・ω・`)
IEはoutlineプロパティ未実装です(内付の方)
基本的にIEはCSS実装がかなり遅れているのでここでもやはり期待はしない方が良い。
ボーダーの見た目はブラウザ毎に異なります
若干違います。ボーダーの見た目(様式)はIEが一番かっちょいい感じでしたが、最近はChromeに寄せてきてるので残念なことに。
(IEの良さはボーダーの美しさだけだったのに)
ボーダー中に隙間(空間)の無いものについては外も内もあまり関係ありませんので、outlineは省いています。


① solid







<img src="画像アドレス" style="border: 7px solid purple;" alt="代替テキスト">

注)
ショートハンド(短縮プロパティ)で記してします。
左から
border-width (太さ)
border-style (様式)
border-color (色)
の順ですが、順序が入れ替わっても問題ありません(ショートハンドには順序が決められているものもあります)


② dotted (外付け, 内付)







<img src="画像アドレス" style="border: 7px dotted purple;" alt="代替テキスト">




<img src="画像アドレス" style="outline: 7px dotted purple; outline-offset: -7px;" alt="代替テキスト">



③ dashed (外付け, 内付)







<img src="画像アドレス" style="border: 7px dashed purple;" alt="代替テキスト">




<img src="画像アドレス" style="outline: 7px dashed purple; outline-offset: -7px;" alt="代替テキスト">



④ double (外付け, 内付)







<img src="画像アドレス" style="border: 7px double purple;" alt="代替テキスト">




<img src="画像アドレス" style="outline: 7px double purple; outline-offset: -7px;" alt="代替テキスト">



⑤ groove







<img src="画像アドレス" style="border: 7px groove purple;" alt="代替テキスト">



⑥ ridge







<img src="画像アドレス" style="border: 7px ridge purple;" alt="代替テキスト">



⑦ inset







<img src="画像アドレス" style="border: 7px inset purple;" alt="代替テキスト">



⑧ outset







<img src="画像アドレス" style="border: 7px outset purple;" alt="代替テキスト">



⑨ おまけ(複合)







<div style="border: 3px groove purple;"><div style="border: 5px ridge purple;"><div style="border: 3px groove purple;"><div style="border 12px groove purple;"><div style="border: 8px ridge purple;"><div style="border: 3px groove purple;"><img src="画像アドレス" alt="代替テキスト"></div></div></div></div></div></div>

注)
ここまでゴツいのはimgタグだけではできませんのでdivの入れ子を利用しています。
これをやりたいという方は居ないと思われる。
入れ子を使うことで組み合わせることができますよ、という一例として。


応用編


ここまでの内容を組み合わせるといろいろなことができます。
さらにdiv要素を追加することで多少複雑な内容にはなりますが、デザインの幅が広がります。

① 写真風







<div style="display: inline-block; background-color: rgb(240,240,240); border-top: 1px solid white; outline: 1px solid rgb(221,221,221); padding: 10px;"><img src="画像アドレス" alt="代替テキスト"></div>


Openテンプレートのトップページに採用しているのと同じ装飾です。



imgにstyleを付けるのではなく、外回りに一つdivを追加し、そちらにstyleを適用します。
background-color が枠の色、paddingの数値が枠の太さに該当します。
1pxのborderを上辺にだけ、背景色よりも一段明るい色で入れておくことで立体感が出ます。
divに挟まれているimgは素の状態(装飾なし)でサムネイル候補となります。


② ①に文字入れ





<div style="display: inline-block; background-color: rgb(240,240,240); border-top: 1px solid white; outline: 1px solid rgb(221,221,221); padding: 10px; position: relative;"><img src="画像アドレス" alt="代替テキスト"><div style="position: absolute; bottom: 0; right: 0; padding: 20px; font-family: 'Georgia'; font-style: italic; font-size: 13px; color: white; text-align: right;">Akira<br>2017 7 25<br><a href="遷移先アドレス" style="color: white; word-break: break-all;">リンクテキスト</a></div></div>

わかりづらいので以下の通りコードを整えますが、
旧投稿画面をご利用の場合
・改行の扱い「自動」--- 上のコード
・改行の扱い「HTMLタグのみ」--- 上下のコードいずれも使用可
(htmlタグのみの場合にはページ全体に於いて、改行時は文章末尾にbrタグが必要です)
新投稿画面をご利用の場合、「HTMLモード」に切り替えて上下コードいずれも使用可。通常画面不可。

<div style="display: inline-block; background-color: rgb(240,240,240); border-top: 1px solid white; outline: 1px solid rgb(221,221,221); padding: 10px; position: relative;">
<img src="画像アドレス" alt="代替テキスト">
<div style="position: absolute; bottom: 0; right: 0; padding: 20px; font-family: 'Georgia'; font-style: italic; font-size: 13px; color: white; text-align: right;">
Akira<br>
2017 7 25<br>
<a href="遷移先アドレス" style="color: white; word-break: break-all;">リンクテキスト</a>
</div>
</div>


緑が重要部位。
テキストの部分は absolute という配置方法です。
親のdivに relative を書き忘れると、配置の基準がブラウザの左隅になってしまいますので、必ず双方の記述を忘れない。
テキスト配置位置は
right: 0;
bottom: 0;
が該当です。つまり水平は「右」を基準に、垂直は「下」を基準にしています。
水平「左」垂直「上」にするには
left: 0; top: 0; に変更。
0を数値(●●px)に置き換えることで微調整は可能ですが、absolute配置は下手を打つとすぐに 画面からはみ出してしまいます
それを極力避けるため、paddingの方で調整を行ってください。

レスポンシブに対応できるよう、あまりにも長い文字列は不向きです。
特に リンク のテキストにサンプルのようなURLを直接記す場合。
URLはそのままでは 折り返してくれません ので、word-break: break-all; を付けるようにしてください。
でないとパソコンでは良くてもスマホではみ出します。
また、リンクを入れる際には何も書かないと自動でリンク色がテンプレートのデフォルトに倣いますので、画像上に乗った際に見やすい色をダイレクトに指定するようにしてください。
(サンプルだと white)


③ めくれ風







<div style="display: inline-block; position: relative;"><img src="画像アドレス" alt="代替テキスト" style="position: relative; z-index: 3;"><div style="width: 50%; height: 20%; box-shadow: 0 15px 10px rgba(0,0,0,.5); position: absolute; right: 5px; bottom: 15px; -webkit-transform: rotate(3deg); transform: rotate(3deg);"></div></div>

緑は2つある div への適用、赤は1つある img への適用。
imgのz-indexは忘れずに。
2つ目のdivにz-index指定するパターンの方がよく紹介されていますが、テンプレートによってはページ全体背景の「下位」に潜り込む(= シャドウが見えなくなる)など、恐らく苦労すると思いますのでimgへの指定をおすすめします。


④ 内側にシャドウ (凹み風)







<div style="display: inline-block; position: relative;"><img src="画像アドレス" alt="代替テキスト"><div style="width: 100%; height: 100%; box-shadow: inset 0 0 50px rgba(0,0,0,.5), inset 0 0 100px rgba(0,0,0, .2); position :absolute; top: 0; left: 0;"></div></div>


CSSフィルターの drop-shadow では内側シャドウが表現できませんので、ここでもやはり box-shadow の方を使います。


⑤ 応用





Rainy Days


<div style="display: inline-block; background: url(背景画像アドレス); box-shadow: 5px 5px 5px rgba(0,0,0,.5); padding: 10px 10px 50px; position: relative;"><img src="画像アドレス" alt="代替テキスト" style="-webkit-filter: sepia(30%); filter: sepia(30%);"><div style="position: absolute; right: 0; bottom: 0; padding-right: 40px; padding-bottom: 30px; font-family: fantasy; font-size: 30px; color: white; font-weight: bold; text-shadow: 2px 4px 3px rgba(0,0,0,.3); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);">Rainy Days</div></div>

テキストを入れる際は 画面が小さくなった時にどうなるか をよく確認しながら行ってください。
ブラウザ幅を狭めていくだけでも確認はできます。
画像に直接文字入れ編集するのと違い、テキストは自動縮小されません ので、それがメリットでもありデメリットでもあります。
画像文字は画面が小さくなると同じように小さくなりますので場合によっては読み辛いですね (´・ω・`)
この応用サンプルはここまでにでてきた内容の組み合わせです。
他にも色々組み合わせるとおもしろいものができるかと思います。


サイズ指定と位置指定


● サイズ指定は img側のstyleで行ってください

例) ボーダー double
<img src="画像アドレス" style="width: 180px; outline: 7px double purple; outline-offset: -7px;" alt="代替テキスト">



例) 写真風
<div style="display: inline-block; background-color: rgb(240,240,240); border-top: 1px solid white; outline: 1px solid rgb(221,221,221); padding: 10px;"><img src="画像アドレス" alt="代替テキスト" style="width: 200px;"></div>




● センタリングするには、divを一つ追加(全体を囲う)し、そちらのstyle属性に text-align: center; を記述。

例) ボーダー double
<div style="text-align: center;"><img src="画像アドレス" style="width: 180px; outline: 7px double purple; outline-offset: -7px;" alt="代替テキスト"></div>



例) 写真風
<div style="text-align: center;"><div style="display: inline-block; background-color: rgb(240,240,240); border-top: 1px solid white; outline: 1px solid rgb(221,221,221); padding: 10px;"><img src="画像アドレス" alt="代替テキスト" style="width: 200px;"></div></div>



div要素の方に安易にwidthを指定してしまうとレスポンシブが崩壊します。
なのでimg側での処理にしてください。
ただしテンプレートの内容によってはそれでもはみ出します。
(私のテンプレートは大丈夫です)


記事作成段階での見た目


特に旧投稿画面をご利用の方は「リアルタイムプレビュー」と照らしながらの作業になるかと思います。
その際に ボーダーがズレていたり、記事編集画面からはみ出していたり、なんかもーとにかくヘン! という状況になります。
FC2ブログの記事編集画面というのは、box-sizingというプロパティの値が content-box で、これが初期値です。
私のテンプレートは border-box です。
どんな違いかと言うと、content-boxというのは borderやpaddingをwidthに含まない んですね。
ですから

例) 画像に11px四方のボーダーを付けて全体300pxの横幅にしたい時の画像へのwidth指定
content-box --- width: 278px; (全体 - 左右border)
border-box --- width: 300px;

とこんな風に、content-boxのままでは計算が非常に複雑になってしまいます。
それ故 border-box を採用していますことをご理解頂ければ、と思います。
というわけで、border-box で仕上げていないテンプレートの場合には計算が異なります のでご注意ください。


IE11での表示について 2017.8.4 追記


IEからご覧の方が「管理人、気づいてないんじゃないか。」と思われるのも困るので追記 (´・ω・`)
IE11では著しくレイアウトが乱れているというか、画像がはみ出していると思います。
IEというのは displayプロパティの inline-block という値を正しく解釈できません。
inline-block というのは「インラインでありブロック」という特殊な値で、インラインの利点・難点とブロックの利点・難点を相互に補てんし合うと言うんでしょうか。
例えば難点としてインラインは
widthやheightを認識しない
上下paddingや上下marginが無効
ブロックの難点は
vertical-align無効
横並びにできない
など。
inline-blockはこれらを補完できるんですね。
width/ height指定ができ、上下padding及びmarginの指定ができ、vertical-align指定ができ、横並びにもできる、と。
ところがIEはinline-blockのwidth指定を正しく解釈できません。
故にはみ出してます。
もうアホすぎというかタヒねレベル。
その状態を見て知って頂きたい、つか、Edgeに変えろ。
という意味でもそのままにしておきます。
IE11が気になる方は
・display: inline-block; を削除
・外回りのdiv(親div)に width: 100%; max-width: ●●px; を追加
・imgに width: 100%; を追加
・センタリングするには親divから text-align: center; を外して代わりに margin: auto; を追加
という手順でお願いします。
追加多すぎ。めんどくせーわアホか


------- 以下本文



最後におまけ。
CSSフィルターを動画に適用

素の動画



フィルター「グレースケール」「階調反転」
(スマホやタブレットだと意味ないけどね)

関連記事

Comments 15

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/07/30 (Sun) 22:21 | EDIT | REPLY |   
Akira  
To 画像装飾の件 内緒さん

こんばんは (●'0'●)/

drop-shadowをお使いになったんですね。
上手く行って良かったです
影が少し付いているだけでも洒落た感じにはなりますよね ( ̄∀ ̄)

2017/07/31 (Mon) 00:49 | EDIT | REPLY |   
黒猫  
はじめまして!

はじめまして黒猫と申します。Colonyを使わせて頂いているのですが素晴らしいテンプレートなのでとても気に入っています(^^)

質問があります。Colonyの記事のコメント欄から質問をしようとしたら書き込めなかった為こちらから書かせて頂きました。

ランキングバナー等を記事の真下に貼りたいのですが自力で行うと関連記事の下になってしまいます。
貼りたい場所はTwitterやFacebook等のボタンの上です。
下画像を参照して下さい。

2017/08/04 (Fri) 18:26 | EDIT | REPLY |   
黒猫  
続きです!

失礼しました。

下画像を参照して下さい。

http://vanillaice000.blog.fc2.com/

この位置にバナー等を貼る方法を教えて下さいm(_ _)m

2017/08/05 (Sat) 12:34 | EDIT | REPLY |   
Akira  
To 黒猫さん

ありがとうございます。
そしてお返事遅くなりました (*_ _)

> ランキングバナー等を記事の真下に貼りたい〜

頂いたURLは私のブログアドレスですので確認できませんが、なにせ「FC2個人設定SNSシェアボタンの上」ということで合ってますでしょうか。
FC2ブログの仕様上、テンプレートの記載位置だけで操作するのは不可能ですので、下記ページの内容に沿ってJSを利用した方法をお試しください。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object18

注意点としては、
① 「バナー関連ソースコード」の部分にhtml内容を書き入れるわけですが、その際にはソース内改行は全て削除してください。
例)
X
<a href=""><img src=""></a>
<br>
<a href=""><img src=""></a>


<a href=""><img src=""></a><br><a href=""><img src=""></a>

② SNSボタン関連を軸にhtmlを書き出す方式ですので、仮に今後黒猫さんがこのSNSボタンなどを「非表示」設定に変更された場合、連動してこれから挿入する内容も非表示になります。

よろしくお願いします。

-----

余談ですが、黒猫さんはスマホ専用版をご利用ですので、スマホ版の方は別途同じ作業を行う必要があります。
というか、SEOブログですのでレスポンシブにされた方が…と思いますがそこはお任せします。

*既に読まれたかもしれませんが、以降の内容は余計なお世話だと思いますので削除しました

2017/08/05 (Sat) 17:19 | EDIT | REPLY |   
黒猫  
ありがとうございますm(_ _)m

画像のURLの件失礼しました。

コメントを送信すると何度も書き込み制限となり混乱してしまいました。
ご指示通り行ったところ広告と、はてブアイコン以外は記事の真下に入れる事が出来ました。この2つは不可能という認識でよろしいでしょうか?

SEOブログと言っても素人がSEOを勉強してあれこれと実験やデータ収集を行っていくブログです(^_^;
スマホテンプレートを表示しているのは最初からレスポンシブを使用していた訳ではないのでスマホ用URLが大量にインデックスされている為noindexタグを貼ってスマホ用URLを消している最中です(^_^;

ちなみにスマホ用のリンクを切っておけば検索エンジンからのインデックスは自然と消えていくものですか?

話がSEOに脱線してしまいましたがこの部分も知りたいところです(^_^;

2017/08/05 (Sat) 21:00 | EDIT | REPLY |   
Akira  
To 黒猫さん

> この2つは不可能という認識でよろしいでしょうか?〜

広告がscriptを用いて書き出すものであればこの方法では無理ですね (´・ω・`)
はてぶの方はAPIを使わずにリンクだけで設置すれば並びますよ。
APIや公式アイコンにこだわりがあるのならば無理です。

> スマホ用のリンクを切っておけば検索エンジンからのインデックスは自然と消えていくものですか?〜

既にインデックスされてしまったものはsearch consoleから削除依頼を出さないと消えないかもしれません。
何故ならspというパラメータはテンプレートの切り替えに用いるものだからです。
レスポンシブデザインに切り替え(スマホ版非表示)を行った場合でも、spつきリンク自体は機能します。
表示されるのは全く同じレイアウトのページになりますので、PCからspつきリンクを踏んだときにも現在のようにスマホ版の極小画面になってしまうことはありませんけどもね。
インデックス自体は残るのではないかと (´・ω・`)

私のsearch consoleを見るとこんな感じです
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/98uw2frth.jpg

「HTMLの改善」タブを開くと、メタタグ等の重複があった場合には対象ページが指摘されます。
無い場合は上記スクショの通り。
で、重複するものって大抵は sp や pc などのパラメータ付きURLなんですね。
私は自作テンプレで「SEO対策済み」は謳いませんが、自作以外のテンプレートを設定することはありません、という前提で現在までの結果が上記の通り。

・重複が気になる
・spつきURLをPCで閲覧しても正しい表示にはなるが、やはり気になる

上記に該当するのであれば、search consoleからspを始めフィーチャーフォン用パラメータ(m)なども全て削除依頼をされると良いと思います。
フィーチャーフォン版についてはもうとうの昔にGoogleもクロールを停止していますし、AOSSL化が行われればガラケーもほぼ完全に切られることになるので要らない (´・ω・`)
そしてパラメータ管理画面でこれらパラメータをインデックス除外にしておけば万全。
FC2ブログはダイナミックサービングのシステムを採用していて、spパラメータはただ単に「テンプレート種の特定」を行うものですが、Google的には別URLです。スマホ版が存在し続ける限り
「PCから見てるのにこれってスマホ画面じゃね?」
は起こります。

・search consoleでパラメータ付きURL既存インデックスの削除
・search consoleでパラメータ除外設定
・テンプレートhtmlソースからモバイル版へのリンク削除(デフォルトではスマホ閲覧時に「mobile」のリンクが表示されます)

結局のところFC2ブログでのモバイル版の併用の何がいけないかって、みなさん相互に行き来するわけなんですよ。

スマホからの閲覧時…
モバイル画面(ここではパラメータなし=ダイナミックサービング) → 「PC版で表示」クリック(?pc付加) → 「スマートフォン版で表示」を押して戻る(?sp付加)
こういう経路があると当然クロールもインデックスも行われますわね (´・ω・`)
なのでスマホ版への経路を塞ぐというのは有効です。
といっても閲覧者が手入力でURLにパラメータを付けることは防げません。
なのでそちらについてはsearch consoleで予めインデックスを予防しておく、と。
そういう流れになるかと思います。

2017/08/06 (Sun) 02:13 | EDIT | REPLY |   
黒猫  
ありがとうございます(^^)

はてブの設置の仕方はよく分からないです(>_<)

この件に関しては色々と自分で考えてみます。もしかしたらまた相談はするかもしれないですが(^_^;

私の場合search consoleのHTMLの改善は画像のリンク分だけ重複してます。インデックスをトップページと個別記事ページのみにしてます。もう少ししたらスマホを非表示にします。

あれもこれも色々と聞きたくなりますが少し自分で調べてみます(^_^;

Akiraさんのブログをもっと早く知っておけばよかったと思っています。これから毎日少しずつ過去記事も読んで勉強します。

また聞きたい事や相談する事もあるかとは思いますがその時はよろしくお願いしますm(_ _)m

2017/08/06 (Sun) 07:24 | EDIT | REPLY |   
Akira  
To 黒猫さん

はてぶのリンクは

<a target="_blank" href="http://b.hatena.ne.jp/entry/<%topentry_link>">〜</a>

です。
〜の部分には画像があるならば
<img src="アドレス" style="with: ●●px; height: ●●px;">
が入ります。
画像の利用についてははてなの規約がわかりませんので自己責任で。
自作する場合には表示サイズの「倍」のサイズが良いと思います(解像度の問題)
はてなは B! という簡単なロゴなのでテキストで入れても全然良いと思います(笑)

ランキングバナーやSNSアイコンについては整形のお手伝いなど致しておりませんので、ご自身で頑張って頂くことになりますが、ヒントやアドバイス程度なら (´・ω・`)

こちらこそ色々教えてくださいね。
よろしくお願いします

2017/08/06 (Sun) 12:09 | EDIT | REPLY |   
黒猫  
度々すいませんm(_ _)m

せっかく教えて頂いたので試しに行ってみました。

従来は以下のタグを貼っていました。

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加"width="20" height="20" style="border: none;" /> </a> <script type="text/javascript"src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

教えて頂いた内容から<script~>~</script>の部分を抜けばよいと解釈して以下のタグを貼りました。
(解釈が間違っていたと思いますが)

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加"width="20" height="20" style="border: none;" /> </a>

このタグを貼ったところ、はてブアイコンは存在するのですが個別記事ではなくトップページ用の「はてブ」となってしまいました(^_^;

こうなると私の知識ではお手上げです(>_<)

何か良い方法がありましたら教えて下さいm(_ _)m

2017/08/06 (Sun) 17:58 | EDIT | REPLY |   
Akira  
To 黒猫さん

hrefの値を

http://b.hatena.ne.jp/bookmarklet?url=<%topentry_link>&btitle=<%topentry_enc_title>

に変更してみてください。
よろしくお願いします (●'0'●)/

------

えっと。ごめんなさい。
はてぶのトップに飛ぶのではなくて、ブログのトップページがシェアされてしまうって意味でしょうか。

明日また改めますね。
申し訳ないです。
もうベッドの中なのですみません (^^;

2017/08/07 (Mon) 00:42 | EDIT | REPLY |   
黒猫  
何度もすいませんm(_ _)m

個別記事の変数を使用しているのにも関わらずトップページがシェアされるという意味です。分かりづらくてすいませんでした。

試しによくWordPressとかで使われるCSSを利用するTwitterやGoogle+やはてブ等の一体シェアボタンを利用してみてもやはりトップページがシェアされる形になります。もちろん個別記事の変数を使用してもこうなってしまいます。

こうなると私の知識ではお手上げです(>_<)

代替え案ですがもし可能であれば関連記事そのものを枠の1番下に置く事は可能でしょうか?1番の目的はバナー等を関連記事より上に配置したいという事です。

当初はFC2のシェアボタンの上にバナーを置きたいと言ってしまいましたがこの目的は関連記事よりもバナーを上に置きたいという意味でもありました。

何か良い方法があれば教えて下さいm(_ _)m

本当に色々言ってすいません。返答は時間があるときで構わないですm(_ _)m

2017/08/07 (Mon) 06:48 | EDIT | REPLY |   
Akira  
To 黒猫さん

こんにちは。お疲れ様です (o'ω')ノ

またしても私が不親切でした。
コードを貼り付けた位置は</body>の直前ですよね。
私がそう推奨しているからそうだと思います(笑)
トップページ以外のページ種からURLや画像などを拾う時にはFC2のエリア変数が必要です。
なので以下の通り。

<!--permanent_area-->
<!--topentry-->
<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;"><a href="http://b.hatena.ne.jp/bookmarklet?url=<%topentry_link>&btitle=<%topentry_enc_title>" title="このエントリーをはてなブックマークに追加" target="_blank"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="はてなブログ" width="20" height="20" style="border: none;"></a></div>').insertBefore('.fc2_footer');
});
</script>
<!--/topentry-->
<!--/permanent_area-->

コピペでどうぞ。
htmlの記述ミスなどもありましたので修正してあります。
・属性間スペースなしを修正
・target="_blank" 追加
・余分なスペース削除
・alt変更
などです。

aタグ内にクラス名やdata属性など付いていますが、こちらはscriptを使わない場合には不要というか無効です。
なので削除してあります。

--------

> 関連記事そのものを枠の1番下に置く事は可能でしょうか〜

FC2ブログ個人設定はJSでの自動挿入ですので、そちらをOFFにして「テンプレート変数のみ」にすれば可能です。
可能ではありますが、該当のhtmlを手入力する必要があります。
サムネイルなしの関連記事リストは簡単ですが、サムネイルつきの方はかなり難しいというか、煩雑です。
FC2公式のhtml内容をどこかのページのコメント欄に記した覚えがありますが、どこだか思い出せない (´・ω・`)
いずれにしてもこちらは玄人向けですかね (´・ω・`)
時間があれば探しますが、私明日から10日ほど日本に居りませんので間に合うかどうか。
お返事も遅れるかと思います。あちらからアクセスできるかどうかもわからない。
申し訳ないです。

あ、あともう一つ。
はてなのアイコンですが、DLしてFC2ブログのサーバーにアップロードした方が良いですよ。
現在だとはてなサーバーへの直リンクです。
はてなはAOSSL化が不明というか、すぐにはできないと思います。
なので仮にFC2の方が先にAOSSL化した場合にアイコンが表示されなくなります。
FC2サーバーに移して相対アドレスで入れておくと良いと思います。
規約的なことはわかりませんが。

* 相対アドレス(相対パス) = スキーム省略
例)
絶対パス http://vanillaice000.blog.fc2.com/
相対パス //vanillaice000.blog.fc2.com/

-------- 追記

ありました。
http://vanillaice000.blog.fc2.com/blog-entry-377.html#comment2273

ただあくまでも上記はBelongという別テンプレートですので、細かなCSS調整が要りますし、アウトライン(articleやsectionなど)のクラス名が異なれば変更する必要もあります。
で、この件についてはあちらのコメントにもありますように自己責任・自力でお願いします。
というか、おすすめしない(笑)
htmlはもっと簡素にできますが(JSを取り除くこともできます)、今度はそれに合わせてCSSを全変更しなければいけなくなります。
いずれにしても大変な作業かと思います。

2017/08/07 (Mon) 10:12 | EDIT | REPLY |   
黒猫  
ありがとうございました(^^)

ご指示を頂いた通りの作業で無事はてブアイコンを置きたいところに置くことが出来ました。

関連記事を1番下に置く事は興味がとてもありますが今はやめておきます(^_^;

それにしても色々と知識が豊富ですごいですね!アフターまでしっかりされているので本当にAkiraさんのテンプレートを使って良かったと思っています(^^)

しかも本来では回答しない様な内容まで答えて頂いてとても助かりました(^^)

また色々と聞きたい事が出てくると思いますが今後ともよろしくお願いしますm(_ _)m

しばらく忙しそうなのでこのコメントに対しては返信はいりません!

2017/08/07 (Mon) 18:17 | EDIT | REPLY |   
Akira  
To 黒猫さん

なんとか納得できる形になりましたでしょうか。
ご配慮もありがとうございます。
はい、またお気軽にどうぞ
いってきますー (●'0'●)/

2017/08/08 (Tue) 08:21 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い