Meta_SliderとNewPost Catch

「Diary型Blog」は勝手に呼んでる当ブログ、多くのWordPress(CMS)のサイトは目標としてるサイトのスタイルと違い、なんとなく違った世界のサイトをみてるようで真似のできない感じだ。とにかくテーマのTwentySeventeenが気に入って、Defaultテーマを出来る限り修正することなく、ベースになるプラグインが欲しい。。。そこで選んだプラグイン。

【Meta_slider】

GoogleのAPIが廃止で載せたかったスライドショーがダメになったと同時に、phpのバージョンが5から7に代わったので、代替えで準備してたPulginがダメになった。そんな時に、見つけたスライドショーが「MetaSlider]、現在サイドバーで活躍。。。

このPluginには、4つのタイプのjQuery のスライダー(nivo Slider・Flex Slider・Coin Slider・Responsive Slides)があるので定期的にタイプを変えて楽しめそう。調べると多くのサイトで「MetaSlider」の良さを紹介してるのが分かる気がする。

*画像のみ→矢印「なし」、ナビゲーション「非表示」、高度な設定「画像の切り抜き」→「スマート切り抜き」

【NewPost Catch】
サイトから得た情報とヒントを纏め、Widgetだけでなくフロントページに固定ページ欄、「最近の記事」とカテゴリー別投稿一覧など、期待以上の出来栄えになりつつある。
 

1.【npc】 ➡全て
2.【npc posts_per_page=”10″ cat=”4,5″ date=”1″ width=”80″ height=”80″】
(表示10件 カテゴリID 公開日表示 サムネイルサイズ)➡カテゴリー別に
3.Themeの「Style.css」に追記する。
(NewPort CatchのStyle.cssは使用しない)

/* NewPost Catch */
#npcatch li{
overflow: hidden;
clear: both;
vertical-align:top;
border-bottom: 1px dotted #666666;
}
#npcatch img{
float: left;
padding: 5px 10px 5px 0px;
}
#npcatch .title a{
font-size: 12px;
text-decoration: none;  ➡Link線ナシ
}
#npcatch li a{
text-decoration: none; ➡Link線ナシ
}
#npcatch .date {
font-size: small;
font-weight: 400;
display:block;
color: #adb5bf;
margin-bottom: 5px;
}
#npcatch li: hover{}
#npcatch li: hover .title{}
#npcatch li: hover .title a{}
#npcatch li: hover .date{}

Meta_Sliderは機能制限ありの無料プラグイン、NewPost Catchは無料でブログのレイアウトに選んだプラグイン。

今日はマルの誕生日

今日はマルの満10歳の誕生日、年の暮れでなんとなく忙しい中での誕生日だから別に何をする訳でないが、マルにとって特別な日だ。

近頃は暇さえあれば寝てることが多いけど、仕方がないのか人間の歳で言うと「還暦を迎える」歳らしい。昨日ママの使いで中目黒銀座の端にあるパン屋さんへ行った帰りに、監視カメラに向かって「マルちゃん!」と呼ぶと一目散に玄関口だ。その様子を急いでパチリ!、観た限りボール遊びしてる元気な姿と変わらないマルだね。

とにかく「マルちゃん、誕生日おめでとう!」

「文書を囲む枠線」をSimple CSSに

以前から記事内に「文書を囲む枠線」があった方が見栄えがするかな?と思って「style.css」へ書き加えるつもりでいたけど、Simple CSSと言うプラグインを見つけたので、文書用とサイドバー用の枠線のCSSをこのプラグインに任せることにした。とにかくこのプラグインはCSSを順序立てて書き込み保存ボタンを押すだけでOK!と超簡単だから嬉しいね。

1)シンプルな囲み枠: 未使用

.box1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #000000;
}
.box1 p {
margin: 0;
padding: 0;
}

【サイドバーで使用した枠線】
.xxxxx {
display: inline-block;
width: 240px;
height: 200px;
border: solid 1px #cdcdcd;
}

2)角丸ボックス: 文書内で使用

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3; ➡文字色
background: #FFF;
border: solid 3px #6091d3; ➡線
border-radius: 10px; ➡角の丸み
}
.box2 p {
margin: 0;
padding: 0;
}

3)破線ボックス: 未使用

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0; ➡点線
}
.box3 p {
margin: 0;
padding: 0;
}

4)bottomに影:メインページの「最近の記事」で使用

.box4 {
padding: 0.5em 1em;
margin: 2em 0;
color: #FFF;
background: #6eb7ff;
border-bottom: solid 6px #3f87ce;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;
}
.box4 p {
margin: 0;
padding: 0;
}

*上記の1)~4)を<div class=”box?”><P>~文書~</p></div>とすればOK! まだまだ多くの文書枠があるけど、上記の1)~4)があれば良いかな?と思う。

PS:最近になって多くのサイトで利用してる「crayon-syntax-highlighter」プラグインを使おうか迷ったけど、ちょっとした文書(CSS等にも)を囲む程度に大袈裟かな?、取り合えず、試したが当ブログに似合わないと思い止めた。

独自の画像縁(枠線)をStyle.cssに

投稿内に挿入する画像の縁(枠線)を幾つか用意、当ブログが日記風だと言っても少しは見た目を良くしたいと思い、以前のWeblogのCSSから幾つかを試した。

Style.cssに幾つも書き加える場合は、属性にクラス(Class)名を付ける。クラス名は、アルファベットの最後の3文字(qwxz)あたりを組み合わせた。

1)「メディア」なしで影付き角丸

img.xxx {
border:solid 2px #d0d0d0;
border-radius: 5px; ➡調整(8px,10px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}

2)指定サイズなしの円形・「メディア」なしで影付き

img.xxx {
border: solid 2px #ccc;
border-radius:50px; ➡調整(75px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}
*画像サイズ(W150xH113)、調整の75pxにすると円形

3)斜め15度ほど回転、「メディア」でOK!

img.xxx {
border:solid 2px #ccc;
border-radius: 5px;
transform: rotate(5deg); ➡逆回転(-5deg)
}

*1)~3)URLでの使用も可:
<img src=”【画像URL】” style=”border-radius: 0px; border:none; box-shadow:none; transform: rotate(0deg)” alt=”【代替テキスト】”> ➡当ブログでは「title=””」で「ふきだし」

取り合えず基本枠として3縁(枠線)を用意した。