.jetpack-lazy-image{display:none}ゲームと音楽と副業の「趣味でまったりお金を稼ぐ」ブログです。ホームHomeブログBlogブログ運営blog-managementCocoonコクーン副業のすすめside-businessゲームGameブレイドエクスロードBladexlodeデュエルリンクスDuellinksFFBE幻影戦争WoTVアルカラストarca-last読書Read参考書refernce-book小説novel漫画comic音楽Musicリスニングlistenプレイplayお問い合わせInquiryTwitterにてブログの新着記事更新情報をお届けしてます!【Cocoon】ブログカードは回遊率をあげるためにシンプルが1番!CocoonCocoonブログカードTwitterFacebookはてブPocketLINEコピー2018.06.08スポンサーリンクどうも、ぶちくまです。WordPressの無料テーマ、Cocoonのカスタマイズ記事です。「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能があります。リンクだと気づきづらいので、わかりやすいシンプルなデザインを心がけました。目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。ブログカードに憧れてSimplicityに移ってきた経緯がぶちくまにはあります。味気ないテキストリンクを貼る輩も増えているご様子。いかん、いかんぞ!こんなに素敵なブログカードがあるというのに使わないなんて手はない!と言いながら、今回はブログカードのカスタマイズ方法を伝授しつつ、リンクの貼り方についても少しばかり講義したいと思います。(まずはてめぇで実践しやがれって声も聞こえますが構わず続けます)INDEXWPテーマCocoonのブログカードカスタマイズ方法ぶちくまが実際に使っているCSSコードブログカードの外観はクリック(タップ)できることを明確にセレクタの設定の仕方デザインのコンセプト「続きはこちら」などの文章の付け加え方わかりづらいプロパティの紹介marginとpaddingで余白をつくるtext-alignで文章を中央揃えにするリンクはブログカードがいいかテキストリンクがいいか外部リンクはアフィリエイト以外は飛ばさない覆水盆に返らず、出てった訪問者は帰ってこない内部リンクでも必要に応じてテキストリンクを使おうブログカードの弱点は何と言ってもかさばることブログカードはSANGOのように「サムネイル(アイキャッチ)+タイトル」で十分サイト回遊率を上げるならつながりのあるリンクをつなげていくことが大事まとめスポンサーリンクWPテーマCocoonのブログカードカスタマイズ方法ブログカードのカスタマイズについては中級者レベル(ぶちくま判定)となります。実際に適応できているかどうか調べることができる、ことを想定しています。値をいじることで自分らしいデザインを設定することができる、が求められます。苦手なのは自分の求めているデザインはあるが、どのようにプロパティを使ったらその表現ができるか、というところまでは一人ではなかなかできない、こんな方が対象になります。今回は初級的な説明は一旦省略します。初級編の記事は今後もう少し厚くしていくので、もう少しお待ちを。これでもかってくらいに画像を使って説明してみました。わかりやすさを目指したつもりです。Chromeのデベロッパーツールの使い方も説明しました。buchikuma.xyz2018.05.10では、実際にコードを見ていきましょう。#86ceec;}まずは、外観の考え方です。スポンサーリンクブログカードの外観はクリック(タップ)できることを明確にCocoonのブログカードは、特に設定しなければ、カード全体がリンクとなっていて、カード上ならどこを押してもリンク先にいくことができます。便利ではあるのですが、逆にリンクだとわかるポイントが薄いので、いまいちクリックされづらかったりもします。カスタマイズのポイントと一緒に、どういったデザインが望まれているか考えていきましょう。内部リンクは「.internal-blogcard」、外部リンクは「.external-blogcard」というクラスが割り当てられています。いう名前がすでにつけられているってことです。これらをセレクタ(変更する場所)に指定します。ちなみに、ブログカード全体としては「.blogcard」でもよかったはずなので、2つ共通した外観デザインを設定する場合は、こちらのセレクタを使用してもいいと思います。内部リンクと外部リンクをそれぞれ、色を変えている、といったところですね。デザインのコンセプトこれはいわゆる「付箋型」のボックスを採用しています。いうか、ぶちくまのサイトは付箋だらけです。職場も付箋だらけにしてます。くまらしい、とも言えます。全体に影をつけることで、「これは押せるボタンなんじゃないか」感をうっすら出しています。それだけだとわかりづらいですよね。カードの内部に「続きはこちら」などの文章を追加しておくと、リンクであることがわかりやすくなりますね。0.5em;}文章はcontentというプロパティを使います。プロパティ、というのは「どういう変化をつけるか」という指示になります。Contentは文字通り、文章を加える、という指示になります。コードを見てもらえると、ダブルクオテーションで囲まれている部分、つまり「続きはこちら」の部分を変えると、好きな文字に変えることができます。「タップで続きを」とか具体的な指示を書いてもいいでしょう。そのあとのアルファベットと数字は、Fontawesomeのアイコンになります。こちらもサイトを見ながら、リンクっぽさを出していくといいですね。Awesomefontawesome.comスポンサーリンクわかりづらいプロパティの紹介そのほか、プロパティについては使いながら説明していきます。今回はmarginとpaddingというものを実戦で見ていきます。text-alignについても調べ上げなければいけない状況に追い込まれたので使ってみました。marginとpaddingで余白をつくるmarginとpaddingは余白をつくるプロパティだと思ってください。ふたつの違いは、marginが外側の余白、paddingが内側の余白、とまずは覚えておいてください。margin-leftをautoにすることで右寄せになります。右側の余白を指定しないことで、合わせ技で「左の余白をしっかりとって」という意味になります。結果、右寄せになります。右寄せはいろいろ方法はあります。股間のポジショニングの話はしていないtext-alignで文章を中央揃えにする右寄せついでに。今回、なんだかうまいこと文章の位置が決まらなかったので、プロパティで調整しました。「text-align:center」で文章などを中央揃えにすることができます。CSSデザインの大枠を作っている時は楽しいんですよ。できることがわかってくるから。「表示がなんか少しみづらいなぁ」とか考え始めると、泥沼です。文字を1mm動かすのも、素人にはアイデアがないのでとにかく調べるのに時間がかかる。「やりなおしだぁぁぁぁあぁぁぁl」って発狂しそうになる。有料テーマがいい、ってのはこの無駄な時間を取られる、ってところにあるね。うまく決まった時はアドレナリンどばどば。今回はこのくらいの説明にしておきましょう。スポンサーリンクリンクはブログカードがいいかテキストリンクがいいか結論から言うと、「適材適所」になります。「コンテンツに集中させたいかどうか」この2点が重要になります。外部リンクはアフィリエイト以外は飛ばさない変な話ではありますが、外部リンクは貼っておきながら、本当はあまり貼りたくない、という思春期の女の子みたいな気難しさがあります。必要な外部リンクとして、引用や出典があります。情報源を明らかにすること。「正しい手順で引用しているのであって、パクリサイトではないんですよ」というメッセージになります。引用元の感情的な問題もあります。「読んでいる人が気持ちいい」「書いている人も気持ちいい」「他のユーザーも気持ちいい」ということをちゃんと押さえていけば大丈夫です。ルールを調べるのが面倒な人はオリジナル記事を心がけましょう。少なくとも読者にとっては、信用できるサイトだという印象を与える、ポイントにはなります。載せた方が利用者には優しいですよね(ここ、ポイントです)。覆水盆に返らず、出てった訪問者は帰ってこないただ、一度出て行った読者はだいたい帰ってこないので、いわゆる「離脱」になります。ブロガーにとってのベストは「自分のコンテンツを楽しんでファンになってもらうこと」アフィリエイターのベストは「収益のためにアフィリエイトサイトに顧客を流すこと」になります。開ければ開けるほど、せっかくためた大事なものがいろいろ流れていきます。必要なリンクでも外部に流出させたくない時は、特に目立たせないテキストリンクにする、なんて使い分けが有効と言えそうです。内部リンクでも必要に応じてテキストリンクを使おうじゃあ目立つブログカードばかり使えばいいかというと、それもやはり適材適所。細かい内容が必要ないリンクはテキストリンクでいいわけです。お勧めとして記事で紹介していればタイトルだけでいいし、ある程度同一カテゴリのおすすめ記事として列挙する時なんかも、もう内容を伝えるのがタイトルコールだけで十分なら、テキストリンクで列挙の方が見やすいです。スポンサーリンクブログカードの弱点は何と言ってもかさばることぶちくまも何度かやってみましたが、ブログカードは2枚続くだけで結構うるさい。情報が溢れかえってくる感じ。3枚続けると閲覧ページがブログカードで埋め尽くされたりすると、やっぱりウンザリするわけですよ。ブログカードはSANGOのように「サムネイル(アイキャッチ)+タイトル」で十分これも考え方によりけりではありますが。ブログカードのメリットは、リンクを踏まずして内容がみえてくること。アイキャッチとタイトルで十分情報が伝わるように編集してあるなら、いっそ内容説明文(snippet)は非表示でもいいかもしれません。none;}で消すことができます。あとはタイトルと画像の大きさを調整すれば、有料テーマのブログカードも再現できるはずです。スポンサーリンクサイト回遊率を上げるならつながりのあるリンクをつなげていくことが大事これはブログ運営論みたいになってしまうけど、とりあえず記事はかけるだけ書いておいた方がいい。PVも収益も気にすることはない。思いついたことを記事にしていく。50記事は無心で書こう。50記事の貯金ができたら、それらの記事の関連性をマインドマップのようにつなげていく作業をしていくといい。まとめたり、あるいは分割して、ひとつの「かたまり」をつくっていきましょう。中心にまとめ記事をおいて、リンクでつなげていくといい。まとまりのない雑記ブログでも、アフィリエイトサイトばりに回遊できるようになるから。くまはどうしてもADHDが邪魔して気が散ってそこまでできないんだけどさ。絶対にやった方がいいよ。スポンサーリンクまとめいかがでしたでしょうか。今回はブログカードの説明をしてみました。コピペ自体は簡単ですが、余白の調整とか始めるとキリがないんだよね。メリットCocoonスポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピーぶちくまをフォローするぶちくまぶちくま創作ベース関連記事CocoonCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。2018.06.07Cocoon【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことにCocoonを使ったブログ作りを解説しています。今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。2018.05.08Cocoonサイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】WordPress無料テーマ最強のCocoonのカスタマイズ記事です。グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。これでもかってくらいに画像を使って説明してみました。わかりやすさを目指したつもりです。Chromeのデベロッパーツールの使い方も説明しました。2018.05.10CocoonCocoonにテーマ変更するメリット【ありがとうSimplicity】Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。Cocoonのモバイルスライドインメニューボタンの改造記事になります。「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。「遊びを副業に変える」をモットーに、ブログで情報を発信してます!詳しいプロフィールはこちら!ぶちくまをフォローする人気のある記事アークナイツの課金アイテムをまとめる【買ってはいけない】2020.01.242020.01.31幻影戦争の装備・武器クラフトについて知りたい2019.12.062020.02.21ブレイドエクスロードの適正パーティーの組み方2019.11.012020.02.11アルカラストの効率的な育成手順【素材もないし金もない】2019.08.182020.01.28アルカ・ラストの最強パーティを決めたい【無課金】2019.10.24応援クリック大歓迎!人気ブログランキングにほんブログ村フォローボタンぶちくまをフォローするカテゴリーイラスト2ゲーム176FFBE幻影戦争12KHUx6TEPPEN12ぷよぷよクエスト4アルカラスト8アークナイツ10アートオブコンクエスト18ゼノンザード10デュエルリンクス28ドラガリアロスト3ドラクエライバルズ1ハンドレッドソウル8ブラウンダスト12ブレイドエクスロード10ヴァルキリーアナトミア6最果てのバベル28ブログ52Cocoon19カスタマイズ2サイト高速化6Simplicity4Xeory2ブログ運営15WordPress5スパルタブログ論2収益化5副業のすすめ13ゲームライター6動画配信2読書2小説1漫画1音楽3リスニング2スポンサーリンクタイトルとURLをコピーしました。