Simplicity標準装備のはてブブログカードをお洒落にカスタマイズする方法～
スタイル7種コピペokのテンプレート2
Simplicityで搭載されているブログカード機能をお洒落にする方法を書きます。
https://mitemita.com/blog-card-customization/
前回↑からの続きです。今回は7種の展示?です。
⚠ はじめに
本題に入る前にご周知頂きたい事を二点。
- Simplicityのカスタマイザー⇒ブログカード⇒”外部ブログカードタイプ”の項目にて、
はてブブログカードに設定されている場合のみのカスタマイズです。
- 「外部リンクと内部HOMEのリンク」と「内部記事リンク」とではスタイルが若干異なります。
別のサイトを読み込みする外部リンクと内部HOMEのリンクの場合、
インラインフレーム(“iframe”要素)の中のHTMLは、
読み込み側(はてな)のJavascriptコードなので触れる事は出来ません。因って外部リンクと内部HOMEのリンクについては”iframe”の装飾のみという事になります。
文字等のHTMLは変更不可。
“iframe”で表示される広告と同じだとお考え頂ければ宜しいかと思います。
| 📣 内部リンク(個別記事)は表示される文字等もHTML部分の変更が可能です。 もしも外部リンクと内部HOMEのリンクについても同様な表示にされたい場合、 ある複合プラグインを使用する事で、カスタマイズする事が可能になります。
この件については、別記事になります。(ここで書くと長くなる為) |
この作業に必要なファイル
📋 この作業に必要なファイルは、
Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】です。
ダッシュボード⇒テーマの編集画面で編集するか、
TJ Custom CSSの様なCSS系プラグインを使用している方や、
jetpackのCSSスタイルシートエディターを使用している方はそちらに書いてもOKです。
ブログカード 外部・内部共に疑似デザインにする装飾方法
ブログカード装飾-サンプル*7
カードの四隅を角丸(border-radius)にして、
枠線(border-style)の幅(border-width)を10PXにしています。
黒と黄色の二色使いに見えますが内部記事リンクの枠・文字等を”#fabb32″で、
外部・内部HOMEへのリンクのカードは”#f7b72d”にしています。
“#fabb32″と”#f7b72d”を黒に映える色に変更すると雰囲気の違うものになります。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card.internal-blog-card {
background-color: #000000;
border-color: #fabb32;
border-width: 10px;
border-style: solid;
padding: 11px;
padding-bottom: 2px;
}
.blog-card-title a {
color: #fabb32;
}
.blog-card-excerpt {
color: #fabb32;
}
.blog-card-site a {
color: #fabb32;
}
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-style: solid;
border-color: #f7b72d;
border-width: 10px;
padding: 7px;
background-color: #000;
border-radius: 5px;
}
.blog-card-title {
padding-top: 7px;
}ブログカード装飾-サンプル*8 黒板風
よーく見ると、黒板ではないけど、、「黒板風」
内部リンク(単一記事へのリンク)の文字はセンタリングに。 
実際の表示は、以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-radius: 5px;
background-color: #1a5c09;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
color: #1320d4;
font-weight: bold;
border-color: #573310;
border-style: ridge;
border-width: 4px;
padding: 10px;
}
.blog-card.internal-blog-card {
background-color: #1a5c09;
border-width: 4px;
border-style: ridge;
border-color: #573310;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
.blog-card-site a {
color: #fce565;
}
.blog-card-title {
font-size: 19px;
text-align: center;
}
.blog-card-title a {
color: #ffe75e;
}
.blog-card-excerpt {
color: #fcfcfc;
font-size: 15px;
text-align: center;
}似た感じの引用部分デザインの書き方は以下に掲載しています。↓
https://mitemita.com/blockquote-customize/#8
ブログカード装飾-サンプル*9 チョコレート風 デザイン
チョコレート風っぽく見えるかしら??? 超、ブロックチョコ🍫
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-radius: 5px;
background-color: #572619;
border-top-style: outset;
border-top-width: 15px;
border-top-color: #5c1502;
border-left-style: inset;
border-left-width: 35px;
border-left-color: #572619;
border-bottom-color: #572619;
border-bottom-width: 18px;
border-bottom-style: outset;
border-right-color: #5c1502;
border-right-width: 31px;
border-right-style: inset;
padding: 9px;
}
.blog-card.internal-blog-card {
background-color: #572619;
border-top-style: outset;
border-top-width: 15px;
border-top-color: #5c1502;
border-left-style: inset;
border-left-width: 35px;
border-left-color: #572619;
border-bottom-color: #572619;
border-bottom-width: 18px;
border-bottom-style: outset;
border-right-color: #5c1502;
border-right-width: 31px;
border-right-style: inset;
padding: 18px;
padding-bottom: 1px;
}
.blog-card-excerpt {
color: #e647be;
font-size: 12px;
padding: 5px;
font-weight: 600;
}
.blog-card-title a {
color: #e647be;
font-size: 17px;
}
.blog-card-site a {
color: #e647be;
font-weight: 900;
}
.blog-card-title {
text-align: center;
}似た感じの引用部分デザインの書き方は以下に掲載しています。↓
https://mitemita.com/blockquote-customize/#3
ブログカード装飾-サンプル*10 背景にタータンチェックの壁紙画像
背景に画像を指定すると、ご自身の好みにより近いお洒落な感じにする事が簡単に出来ると思います。
因みに、このサイズの壁紙を使用しています。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
/*背景にタータンチェックの画像を使って*/
.blog-card {
background: #ffffff;
}
.blog-card.internal-blog-card {
background-color: #ffffff;
border-color: #d41515;
border-width: 10px;
border-style: solid;
padding: 21px;
background: #ffffff;
padding-bottom: 1px;
border-radius: 0px;
background-image: url("http://ここに画像のアドレス");
}
.blog-card.external-blog-card {
border-style: solid;
border-color: #d41515;
border-width: 5px;
padding: 10px;
background-color: #f0a1a1;
background-image: url("http://ここに画像のアドレス");
background-repeat: repeat;
}
.blog-card-excerpt {
font-size: 12px;
color: #f0dc41;
font-weight: 900;
background-color: #0a0a0a;
margin: 5px;
padding: 5px;
}
.blog-card-site a {
background-color: #0a0a0a;
color: #f0dc41;
}
.blog-card-title a {
color: #f0dc41;
font-size: 16px;
}
.blog-card-title {
text-align: center;
margin: 0px;
padding: 0px;
}ブログカード装飾-サンプル*11 背景にお花の壁紙画像
こちらも画像を使用しています。
因みに、このサイズの壁紙を使用しています。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
/*背景にお花の壁紙画像*/
.blog-card.internal-blog-card {
background-color: #ffffff;
border-color: #e6b2ed;
border-width: 1px;
border-style: dashed;
padding: 17px;
padding-bottom: 2px;
padding-top: 17px;
border-top-width: 19px;
border-top-style: outset;
border-top-color: #e6b2ed;
background-image: url("http://ここに画像のアドレス");
}
.blog-card-title a {
font-size: 17px;
}
.blog-card-excerpt {
font-size: 12px;
}
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-style: dashed;
border-color: #e6b2ed;
border-width: 1px;
padding: 15px;
background-color: #fae6e6;
border-radius: 5px;
border-top-style: outset;
border-top-width: 14pt;
border-top-color: #e6b2ed;
background-image: url("http://ここに画像のアドレス");
}
.blog-card-title {
padding-top: 7px;
}
.blog-card-thumb-image.wp-post-image {
padding: 2px;
}ブログカード装飾-サンプル*12 スラッシュ
こちらも画像を使用してシャープなイメージにデザインしました。
壁紙画像自体はちっさいものなのですが、インパクトはあります😐
使用壁紙画像はこちらです。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
/*背景にシルバースラッシュの壁紙画像*/
.blog-card {
background: #ffffff;
border-color: #000000;
border-width: 3px;
border-style: solid;
padding: 21px;
padding-bottom: 1px;
border-radius: 0px;
background-image: url("http://ここに画像のアドレス");
}
.blog-card.external-blog-card {
border-style: solid;
border-color: #000000;
border-width: 3px;
padding: 10px;
background-image: url("http://ここに画像のアドレス");
}
.blog-card-excerpt {
font-size: 11px;
font-weight: bold;
background-color: #fafafa;
}
.blog-card-site a {
background-color: #fafafa;
}
.blog-card-title {
background-color: #fafafa;
}ブログカード装飾-サンプル*13 ふなっしーカラー🍐
ふなっしーカラー。・・・のつもりなっしぃぃー😓
すいません、遊んでます。。。観方に依っては、ふなっしーな感じ。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
サンプルページにお揃いの引用部分の書き方書いてるなっしー。
スタイルシートへの書き方⇓
.blog-card.internal-blog-card {
background-color: #ffef7a;
border-color: #32c1fa;
border-width: 6px;
border-style: double;
padding: 11px;
padding-bottom: 2px;
border-left-style: solid;
border-right-style: solid;
border-right-width: 16px;
border-left-width: 16px;
}
.blog-card-title a {
color: #de3016;
font-weight: 900;
font-size: 17px;
}
.blog-card-excerpt {
font-size: 12px;
text-align: center;
}
.blog-card-site a {
color: #de3016;
}
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-style: double;
border-color: #32c1fa;
border-width: 6px;
padding: 12px;
background-color: #ffef7a;
border-radius: 5px;
border-left-style: solid;
border-right-style: solid;
border-right-width: 16px;
border-left-width: 16px;
}
.blog-card-title {
padding-top: 7px;
text-align: center;
}
.blog-card-thumb-image.wp-post-image {
padding: 2px;
background-color: #32c1fa;
}
テンプレートサンプル7種。以上です。
如何でしたでしょうか。
デフォルトのスッキリした感じも素敵ですが、ちょっと違う感じにしてみても宜しいかと。
ご閲覧頂きありがとうございます。お粗末でした😑
コメント
Simplicityのブログカード素敵ですね。
自分のサイトはまだSimlicity1なので、いずれバージョン２にした際は
利用させてください。
ほろろんさん、はじめまして、こんばんは。
ご訪問とコメントを御寄せ頂き有難うございます。
(Twitterも･･･初心者過ぎて返しがイマイチなんで後程お邪魔します)
大変励みになります。
>>バージョン２にした際は利用させてください。
はい^^*使って頂けると嬉しいです。
ブログ拝見させて頂きました。ストレートで読みやすく超親近感デス。
特に「青山氏」についての記事は「うんうん。解る×2」と
モニターの前で呟いてしまいました。(因みに拙者はリハビリ終了しました^^;)
また、遊びに行かせて頂きます。
わいひらさんのツイッターからきました。
使わせてください！
それと、グローバルナビがおしゃれですね。
そちらもぜひ方法をご伝授ください
makisushiさん、はじめまして、こんばんは。
ご訪問とコメントを御寄せ頂き有難うございます。
>>使わせてください
嬉しいです^^*使ってやって下さい♪
>>グローバルナビがおしゃれですね。
マジですかっ、有難うございます。
小躍りする程嬉しく思っています。
ナビメニューを上部に固定するって事で良いのですよね。
https://mitemita.com//simplicity2-customize2/
↑で書いているのと、
＋このサイトに実装する時に均等割付?しています。
CSSに
#navi ul { display: flex; text-align: center; } #navi ul li { width: 200px; }と追加するとこのサイトみたくなります。
“width: 200px”はお好みで(メニュータイトルの数に合わせて)調整してみて下さい^^*
cssまでご親切にありがとうございます。
早速トライしてみます^^
教えていただいた通りにやって、PCのナビメニューはバッチリ上部に固定できたのですが、スマホ用のスライドインメニューがうまく動きませんでした。メニューは出るのですがタップしてもリンクがきかない状態です。
一応、ご報告させていただきます。どなたかが解決策を教えてくれるのを期待して、ちょくちょくブログ見せていただきますね(^^)。今後とも宜しくお願いします。
makisushiさん、こんばんは^^*
コメントを有難うございます。早速お試し頂けて嬉しいです。
なのに、スマホでのメニューが上手く動作しないとの事。
何だか申し訳ないです。
こちらの投稿を見つけたのはスマホからでした。
(私はスマホを持たないので娘から2日置き位に借りて記事のチェックとかしてるんです^^;)
それで普段スマホで確認している様に
メニューをタップしてみたのですが、、、通常通り開くんですよね。
念の為、主人のタブレットでも只今確認したのですが、
何処もおかしい動きをしないので、ちょっと良く解らないのですが、
このサイトみたいにメニュー項目が多いと(複数のドロップダウン設定)
■ドロップダウンメニュー「1」をタップして↓
■「1」の階層メニュー「2」をタップする↓
■「2」の階層をタップして「3」を開く
っていう流れだと思うのですが、これが出来ない(開かない)という事ですか?
デモサイト→http://wp-demo.39ma.net/みたく、
メニューが少ない場合で割り付けもしていない場合は
所謂ハンバーガーメニューの(右上の「三」)をタップすると
メニューが一列にピローンと出て下階層も一覧選択可能な状態で、タップして開く。
と言う流れを行いたいという事なのかしら。
私がスマホに疎いので、娘に尋ねたのですが、
割付け解除したらどうだろうか。と申しております。
それと、Simplicityの設定で
3種類のモバイルメニューを試したコトがないので
(いつもデフォルト設定なんで^^+)明日にでも試してみますね。
ぁぅ、こそーっとアドレス連絡下さっても・・・。
OKだったら、同環境で試してみますよ～
折角なんで、超非力ですがお力になれれば。と^^*
追記・カスタマイザーで「モバイルメニュータイプ モバイル時、メニューボタンを押したときのスタイルです。（※スライドイン機能は「完全レスポンシブ」機能がオンの時は利用できません）」とあるので、
「レスポンシブ」にチェックが入っている状態だとか?かしら。
makisushiさんへ
気になって、スマホとタブレット、それからカスタマイザーを弄っていて、
仰っているコトが全面理解できました。
「スライドインメニュー」ってモバイル画面下にこそっと出てくるアレですね。
別サイトで表示設定してたので動かしていて「あ゛ーこれじゃん」って気が付きました。
ホント、ごめんなさい。めちゃくちゃ勘違いしてました;;
あと、Simplicity2.1.0jかi(2.1.0 20160227)のまんまだったので、
pをいれてみて試したのですが、確かに!!開かないですね。
・・・って事は、Z-indexがいかんのかも。うーん。
打開策というか、新たに上部固定メニューでも
正常動作する様な方法を考察するしかなさそうですね。
jQueryライブラリーとか使う事になるかも知れないです;
スマホもタブレットも夜しか借りれない為、
解決するには時間が掛かるので、取り急ぎ元に戻すか、
モバイルメニュータイプを変更される等で対処の方をお願いします。
ごめんなさい。お役に立てず申し訳ないです。
色々と解決策を探していただいてすみません。
とりあえず元に戻して作業しています。いま作成中のサイトは自分以外にも人が関わっていておおぴらにできないので、また趣味のブログでも作って、いろいろと試したいと思っています。引き続き、宜しくお願いします。
makisushiさん
こんにちは～
>>元に戻して作業しています。
ごめんなさい;;
昨日今日あまり時間が執れなかったので深く掘り下げて探求していないのですが、
検索してレクチャーされている方々の記事で比較的新しいモノを参考に
色々と行ってみると、スライドイン機能にして、
上部に固定すると何れの方法でもメニューが開かない感じです。
で、思ったのですが、
https://mitemita.com/blog-card-customization2/
の方法も難しい事はしていないので、もしかすると?と思い、
上部固定されている他のサイトさんに行ってみたんですが、
どこもスライドイン機能に設定なさっていないようで確認できませんでした。
なので、上部に固定する場合は、
“アコーディオン（デフォルト）・アコーディオンツリー”
をチョイスする事になるのかなぁ。と思い始めています。
因みに、わいひらさんの寝ログに記載されてある、
以下の方法を試してみた事が有りますか?
http://nelog.jp/clingify
スクロール追従方式だから上部に固定するって感じではないのですが、
このパターンだと、スライドインは機能するかしら?と、
まっさらなWordPress＋Simplicity2で試してみたんですが
動作確認どころか実装できませんでした(疑問…)
一応、寝ログの該当記事をスマホで確認してみたんですが、
スライドイン機能に設定なさっていないようで^^;
視覚的に確認できませんでした。
なので、この方法を実装した上でスマホでスライドインメニューの動作が確認できれば
「グローバルメニューをスクロールで追従する」ってのも有りかな。と思います^^*
上部固定にはなりませんけど…。
私のサイトでは当分このスタイルのままで
“アコーディオン（デフォルト）・アコーディオンツリー”の設定にしていようと思います^^;
スクロール追従方式、試してみました。かっこいい！これ自分の理想かもｗ
ただ、これもモバイルに影響が出てしまって、ヘッダーにびよーんと480pxもの空白が出てしまい、メニューもやはり効きません。惜しいので、テストサイトを作って、simplicityの方で質問してみようと思います。
お付き合い頂いてありがとうございます。これ以上、お時間を取らせてしまうのは恐縮なので、この辺で十分です。また覗かせていただきますね。
makisushiさん
おはようございます。
お世話になっています^^*
>>スクロール追従方式、試してみました。かっこいい！これ自分の理想かもｗ
そーなんだｗ
それと、
スクロール追従だと、古いAndroid系のスマホの場合、色々とNGになる事があるようです。
別のテーマの著者の方が、テーマにスクロール追従のグローバルメニューを
選択可能な様にカスタマイザー設定で可能にされているんですけど、
その様に明示されていました。
iPhone・Android・PCで動作するjQueryがあれば一発だと思うんですけど…。
>>テストサイトを作って、simplicityの方で質問してみようと思います。
あぅ～。なんだか、、、すいません。
あと、該当の記事は「寝ログ」さんの方で実装されていらしたので、
Simplicityの公式の方で尋ねられても対象外になるかも知れません。
と言うのも、上部固定のメニューについて過去に2件程のフォーラムでの
質問?要望?をされている書き込みを閲覧しましたので。
こことこちら。
>>お付き合い頂いてありがとうございます。
いえいえ、こちらこそ申し訳ないです。
もし、上手く実装されましたら私にも教えてやって下さい(笑;