MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

WordPress・Stinger5でブログカード導入!プラグインなし!

      2016/04/12

無知って怖いですね。

情報弱者ってつらいですね。

ブログカード公式で対応してたんですね

 

いやね、ずっと悩んでたんですよ。

その理由がこれ。

  • 本当に必要なプラグイン以外導入したくない
  • 自分が理解できないコードでカスタマイズをしたくない
  • cssをごちゃごちゃにしたくない

 

あ〜悩んでた時間が無駄だったなぁ(棒)

ブログカードとは?

URLを入れるだけでいい感じに表示されるこんなやつです。

mac-buy_2
今まで、iPod、MacBook、iPhone、iMac、iPadと、アップルの製品ばかり買っている熱烈なアップル信者で

 

これね…ずっと導入してみたかったんですよ!

かっこいいですよね!

そして、先ほどの理由から導入をためらって数ヶ月。

 

chihou-tsunagari-1

「まあ、別にいっかぁ!」

 

と、情報収集もせずにブログ書いてました。

だって、別に導入しなくても問題ないんだもん。

WordPress4.4から正式対応&プラグインなし

嘘だろ…?

たまたま「stinger5 ブログカード」で検索してたらこんな記事がヒットしたぞ。

WordPress4.4にてブログカードが正しく表示されない時の対処法 #stinger5

 

なんでも、WordPress4.4から公式でブログカードに対応したらしいんですよ。

そして、なんか色々トラブったけど無事に解決したらしいんですよ。

何このハイエナ的なタイミング。

 

ざっくりした流れはこんな感じ。

  1. 投稿画面でURLだけ入れると勝手にブログカード化される
  2. Stinger5,6だと表示にやや問題あり
  3. コピペ2回だけで解決したよ

 

よし!

良いコンテンツだから拡散しよう!

(これが今回のメイン)

デザインを気にしなかったら(&Stinger以外なら)すぐに使える

そうそう。

これ、リンク先がワードプレス4.4以上で作られているサイトならすぐ使えるんですよ。

blogcard-1

 

かなり簡単。

でも…デザインにやや問題が。

僕は読みやすいように画像などの下にわざと1行分改行するんですが…

blogcard-2

 

そう。

それ以上にスペースがあるんですよね。

そして、スマホ表示の時も問題が。

blogcard-3

 

これを解決してくれたのが先ほどのブログ。

コピペ2回で修正完了!

コピペ2回だけで修正完了なんです!

まずはオフラインで試してくださいね!

(引用させていただきます〜)

 

function.phpのコード

真ん中ら辺にあるこのコード。

それをこちらのコードに書き換えます。

 

style.cssのコード(追記あり)

※スマホ表示時、キャッシュクリアしてもなくならない空白があったので追記しました!

このコードの上に下記のコードを追加するだけ。

追加後はこうなります。

 

すると…

先ほどのスペースがなくなります!

blogcard-6

 

スマホ表示も綺麗に!

blogcard-4

まとめ

ということで、プラグインなし&簡単なコピペでブログカードが導入できました!

あ、そうそう。

 

hito

「実際の画面見たらめちゃくちゃ余白あるじゃねーか!」

 

なんて方は、ブラウザのキャッシュをクリアしてくださいね。

僕もめちゃくちゃ焦りました。

ちなみに、別ウィンドウにしようとすると、こんな感じでURLだけ表示されることになります。

kyuujin-koukoku-eigyou
フレッシュな情報がなかったので、求人広告の元営業マンが裏側を語ってみます。 仕事内容 新卒で入社した場合のモ

 

テキストモードにするとわかるんですが、ブログカードってアンカーテキストじゃないんですよね。

↓ブログカードになる

↓ブログカードにならない

 

難しそうだからこんな感じで分けようかな。

  • 外部リンク→文字リンク
  • 内部リンク→ブログカード

※こちらの記事も要チェック!

blogcard-new-card
うーん… 調べ方が悪いんですかねー ワードプレス4.4から公式で使えるようになったブログカー

ではでは!

 - WordPress・カスタマイズ